A brief introduction to CSS knowledge
1. CSS definition
CSS refers to Cascading Style Sheets, which is a style sheet language used to describe HTML or XML (including XML branch languages such as SVG and XHTML) Document presentation. CSS describes how elements should be rendered on screen, paper, audio, and other media.
2. Why use CSS
Web pages are composed of HTML tags, then these tags will be typed and styled according to the browser's default method. If you want to change these default styles , it is recommended to use CSS, because this not only achieves the separation of content and performance, but also makes it easier to maintain.
3. CSS syntax
CSS syntax consists of two main parts: the selector, and one or more declarations.
selector {declaration1; declaration2; ... declarationN }Each declaration consists of an attribute and a value.
selector {property: value}In the following example, h1 is the selector, color and font-size are attributes, and red and 14px are values.
h1 {color:red; font-size:14px;}This picture vividly represents the structure of the above code
CSS is insensitive to spaces and case. Sensitive, that is to say, both upper and lower case can be used. Whether or not spaces are included will not affect the working effect of CSS in the browser.
/* 属性为大小，值为小写，并且冒号后面有多个空格 */
.box {COLOR: blue;
}/* 建议写法 */.box {color: blue;
}The above two writing methods will be displayed in the browser The effect is the same.
4. CSS comments
Like the HTML language, CSS also has comments
4.1. Single-line comments
/* 这是表示单行的注释 */
Note: Comments cannot be nested. For example, the following writing is wrong
/* 这是表示*/单行的注释 *//* 这是表示单行的注释 /* */ */
4.2. Multi-line comments
/* * 这是表示多行的注释 * 注释内容1 * 注释内容2 */
5. Introduction method
5.1. Inline style
Inline style sets the CSS style in the style attribute of the tag.
<div style="..."></div>
5.2. Embedded
Embedded is to write CSS styles in the tag of the
tag of the web page Alignment<head><meta charset="UTF-8"><title>嵌入式</title>...<style type="text/css">...在这里写CSS样式</style></head>
5.3, External connection
Write the CSS style in a separate file, and then introduce the CSS style file through the link tag
<head><meta charset="UTF-8"><title>外联式</title>...<link rel="stylesheet" href="outer.css?1.1.11" /></head>
type attribute: There is only one option, "text/css", specifying that the current css text file is
rel: Specifying that the relationship between the current HTML file and the CSS file is a style sheet
href: Specifying The path of the external style sheet
5.4. Import (not recommended)
Write the CSS style in a separate file, and then introduce the CSS style file through the @import tag
<head><meta charset="UTF-8"><title>导入式</title><style type="text/css">@import url(css/outer.css);/*其他css样式*/</style></head>
Note: The imported style must be written before all css rules are written, otherwise it will be invalid. Importing an external style sheet is similar to linking an external style sheet, which is equivalent to using it directly in the file. This will It takes up space in the html file, so this method is not recommended. Moreover, some browsers will load the imported styles last, resulting in no styles when you first open the web page. The styles will not be imported until the loading is complete, resulting in a poor user experience.
Another use for importing external style sheets is that if a file needs to reference many external style sheets, you can put the style sheets to be referenced in one file, and then only need to reference the files that need to be referenced. Just one file, for example,
import.css content is as follows
@import “a.css”
@import “b.css”
@import “c.css”
In addition to the above four imported styles, you need to know that all tags have a default style, which we call browser style, or default style. That is, how HTML tags appear in a browser without adding any styles.
6. Suggestions and points of attention
Some suggestions
In order to improve the code in the future For optimization, it is recommended to add a semicolon after each attribute value, such as: p { font-style: normal; }
Some html attributes have custom default CSS attribute values. , such as:
In order to be compatible with browsers, it is recommended to reset the CSS attribute values of all elements, such as:
————>h1 { font-size: 12px; }
If you want to use a special font but are worried that the user does not have the font on it, you can use The picture replaces
The order of setting Chinese and English fonts, first set the English font, then set the Chinese font, such as: p { "Courier New", "宋体" }, it is recommended to use the font Double quotes
Style application order
Inline styles have the highest priority
For the same style attributes, different style attributes will be rendered in a merged manner.
For the same style and the same attributes, the rendering method is determined by the order in
. The previously defined attributes will be overwritten later- ##!important The specified style rule will be applied first
The above is the detailed content of A brief introduction to CSS knowledge. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1677
14
1431
52
1334
25
1279
29
1257
24
How to use bootstrap in vue
Apr 07, 2025 pm 11:33 PM
Using Bootstrap in Vue.js is divided into five steps: Install Bootstrap. Import Bootstrap in main.js. Use the Bootstrap component directly in the template. Optional: Custom style. Optional: Use plug-ins.
Understanding HTML, CSS, and JavaScript: A Beginner's Guide
Apr 12, 2025 am 12:02 AM
WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.
The Roles of HTML, CSS, and JavaScript: Core Responsibilities
Apr 08, 2025 pm 07:05 PM
HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.
How to insert pictures on bootstrap
Apr 07, 2025 pm 03:30 PM
There are several ways to insert images in Bootstrap: insert images directly, using the HTML img tag. With the Bootstrap image component, you can provide responsive images and more styles. Set the image size, use the img-fluid class to make the image adaptable. Set the border, using the img-bordered class. Set the rounded corners and use the img-rounded class. Set the shadow, use the shadow class. Resize and position the image, using CSS style. Using the background image, use the background-image CSS property.
How to write split lines on bootstrap
Apr 07, 2025 pm 03:12 PM
There are two ways to create a Bootstrap split line: using the tag, which creates a horizontal split line. Use the CSS border property to create custom style split lines.
How to set up the framework for bootstrap
Apr 07, 2025 pm 03:27 PM
To set up the Bootstrap framework, you need to follow these steps: 1. Reference the Bootstrap file via CDN; 2. Download and host the file on your own server; 3. Include the Bootstrap file in HTML; 4. Compile Sass/Less as needed; 5. Import a custom file (optional). Once setup is complete, you can use Bootstrap's grid systems, components, and styles to create responsive websites and applications.
How to use bootstrap button
Apr 07, 2025 pm 03:09 PM
How to use the Bootstrap button? Introduce Bootstrap CSS to create button elements and add Bootstrap button class to add button text
How to resize bootstrap
Apr 07, 2025 pm 03:18 PM
To adjust the size of elements in Bootstrap, you can use the dimension class, which includes: adjusting width: .col-, .w-, .mw-adjust height: .h-, .min-h-, .max-h-
