Home > Article > Web Front-end > What are the three different ways to introduce css?
What are the three different ways to introduce css?
- 青灯夜游Original
- 2022-09-02 17:23:5822412browse
Three ways to introduce css: 1. Inline introduction, use the style attribute to insert CSS code into a specific HTML tag, the syntax is "
.."; 2. Embedded introduction, put the CSS code in the style tag pair in the head part of the document, the syntax is ""; 3. External introduction, put the CSS code in Into the external CSS file, use the link tag or "@import" rule to introduce it into the html document.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
CSS: Cascading style sheets are a computer language used to express document styles such as HTML or XML. CSS can not only statically modify web pages, but can also cooperate with various scripting languages to dynamically format various elements of web pages. CSS can perform pixel-level precise control of the layout of element positions in web pages, supports almost all font sizes and styles, and has The ability to edit web object and model styles
Basic syntax of CSS:
CSS rules consist of two main parts: selectors, As well as one or more statements, the selector is usually the HTML element whose style needs to be changed. Each statement consists of an attribute and a value.
1. Selector (Selector)
The selector consists of the id, class attribute or element name itself of the HTML element and some Special symbols are used to specify which HTML element to define the style for. For example, the selector p means to define the style for all
tags in the page;
2. Declaration
There can be one or countless declarations. These declarations tell the browser how to render the object specified by the selector. All declarations are placed within a pair of curly braces { }, immediately following the selector.
The statement must include two parts: attributes and attribute values, and use a semicolon to mark the end of a statement. The semicolon can be omitted for the last statement in a style.
Attribute: The style name you want to set for the HTML element, consisting of a series of keywords, such as color, border, font, etc., in CSS Provides many attributes, which you can view through the W3C official website;
Value: consists of a numerical value and a unit or keyword, used to control the display effect of a certain attribute, such as the value of the color attribute It can be red or #F1F1F1 etc.
Colon: is required to separate attributes and values. Each combination of attributes and values can be regarded as a statement. A semicolon is required at the end of each statement. ; At the end, declarations belonging to the same selector need to be wrapped in curly braces { }.
Three forms of CSS introduction
1. Inline style sheet (inline introduction)
Add the style attribute directly to a single HTML element tag to control the presentation style of the HTML tag.
This way of introducing CSS is decentralized, flexible and convenient, but it lacks integrity and planning, which is not conducive to later modification and maintenance. When the style of the website needs to be modified, the same modification may involve multiple places. , high maintenance costs. The style effect using the STYLE attribute is the strongest and will overwrite the same style effects of other introduction methods.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 style="color: maroon; margin-left: 40px">PHP中文网</h1>
<p style="color: blue;">https://www.php.cn/</p>
</body>
</html>
Although inline style (inline style) can easily give CSS styles to HTML tags, its shortcomings are also very obvious, and it is not recommended to use it too much.
Defining inline styles requires defining the style attribute in each HTML tag, which is very inconvenient;
Use double in inline styles Be especially careful when using quotation marks or single quotation marks, because the attributes of HTML tags usually use double quotation marks to wrap the attribute value, such as ;
- ## in The styles defined in inline styles cannot be reused anywhere else;
- Inline styles are very inconvenient in later maintenance, because a website usually consists of many pages. When modifying the page style Pages need to be modified one by one;
- Adding too many inline styles will increase the size of the HTML document.
2. Internal style sheet (embedded introduction)
Write the style code on the page语法：
<style type="text/css">
@import url("css文件路径");
</style>简单实例：
css外部样式表 style.css
h1{
color:red;
}
p{
font-size:14px;
color:green;
}HTML文档
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link type="text/css" rel="styleSheet" href="style.css" />
<!-- <style>
@import url("style.cs");
</style> -->
</head>
<body>
<h1>link标签或@import的应用</h1>
<p>外部定义CSS样式表以.CSS为扩展名文件，然后在页面中通过link标签或@import链接到页面中。</p>
</body>
</html>实现效果：
link和@import的区别：
1、从属关系区别
@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
2、加载顺序区别
加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
3、兼容性区别
@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
4、DOM可控性区别
可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。
（学习视频分享：web前端）
The above is the detailed content of What are the three different ways to introduce css?. For more information, please follow other related articles on the PHP Chinese website!