Introduction to CSS style classification (basic knowledge)

Classification of CSS styles

1. Internal style ---- inline style

Using the style tag

<style type="text/css">
/* Style */
</style>

Learn one more trick: write the common style of the page (if there are not many) in the style tag

2. Inline styles

Write it directly in the style attribute on the tag

<div style="color:red;">
    I am a box</div>

Learn one more trick: Usually used by backend programmers to modify the page

3. External Style

Create a new css file and associate it with the html page

a) Use tag association

<!-- In the head tag of the html -->
<link rel="stylesheet" type="text/css" href="css file path">

b) Use instruction association

<style type="text/css">
/* In the style tag */
    @import url("css file path")
</style>

Learn one more trick: The most commonly used external style and link tag in projects

Summary of three style sheets

Knowledge point supplement: CSS style classification

CSS styles can be divided into three categories: inline styles, internal style sheets, and external style sheets

1. Inline style (the style is written in the HTML tag and only works on the content of the tag)

Hello World!

2. Internal style (the style is written between the head tags of the HTML and only works on the content of the HTML)

<html>
    <head>  
    <title></title>
    <style type="text/css">
    body{font-size:12px}    
    </style>
    </head>
    <body></body>
</html>

3. External style (style reference is written between the head tags and works on the web page that references the CSS file)

<html>
    <head>  
    <title></title>
    <link href="common.css" rel="stylesheet" type="text/css"> 
    </head>
    <body></body>
</html>

In the css style, # represents the id selector, and . represents the class selector

<div class="font"></div>

<div id="top"></div> In HTML, the id cannot be repeated.

Summarize

This is the end of this article about the classification introduction of CSS styles (basic knowledge). For more relevant CSS style classification content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!

<<: How to write the introduction content of the About page of the website

>>: MySQL Query Cache Graphical Explanation

3 methods to restore table structure from frm file in mysql [recommended]

Introduction to CSS style classification (basic knowledge)

3 methods to restore table structure from frm file in mysql [recommended]

MySQL 5.7 JSON type usage details

Vue implements Dialog encapsulation

Native JavaScript to achieve the effect of carousel

Example code of javascript select all/unselect all operation in html

js detects keywords in the title and description and replaces or jumps to other pages when found

How to view the running time of MySQL statements through Query Profiler

Detailed process of installing logstash in Docker

Vue realizes the palace grid rotation lottery

CSS Reset style reset implementation example

Recommend

Detailed tutorial on how to install OpenStack Ussuri in CentOS8 with minimal deployment

How to isolate users in docker containers

MySQL changes the default engine and character set details

How to encapsulate axios in Vue project (unified management of http requests)

Vue page monitoring user preview time function implementation code

Example of customizing the style of the form file selection box

Usage and difference analysis of replace into and insert into on duplicate key update in MySQL

17 404 Pages You'll Want to Experience

Rules for using mysql joint indexes

mysql 5.7.11 winx64 initial password change

JS implementation of carousel carousel case

WeChat applet implements simple calculator function

How to develop Java 8 Spring Boot applications in Docker

How to import txt into mysql in Linux

Detailed explanation of how to configure openGauss database in docker