Browser kernel
firefox:gecko
ie:trident
safari:webkit
chrome: webkit ---> developed Blink
opera:Presto ---> webkit ---> Blink based on webkit
The composition of the css style sheet
Style sheet:
rule set: selector (read from right to left by the browser) + declaration block composition
declaration block: declaration composition
declaration: legal css attribute key-value pair (attribute + attribute value) composition
Three ways to introduce styles
There are three ways to introduce CSS styles: inline style, internal style, and external style.
Inline style (highest priority)
<tag name style="style">xxx</ tag name>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>行内样式 demo</title>
</head>
<body>
<p style="color:blueviolet;font-size:15px;">Lorem ipsum dolor sit amet.</p>
</body>
</html>
Internal style
Write the style in the <head> tag, and wrap the style with the style tag.
<head>
<style>
a{
display: block;
background-color: rgb(180, 146, 212);
width: 200px; /*转换为块元素后可设置其宽度*/
height: 200px; /*转换为块元素后可设置其高度*/
}
</style>
</head>
<body>
<a href="https://www.baidu.com">行内元素转换为块元素</a>
<a href="https://www.baidu.com">在CSS样式中将display的值设置为block;</a>
</body>
Exterior style
Write <link rel="stylesheet" href="stylesheet name.css"> in the <head> tag. The href value needs to create a separate style file with the extension .css, pay attention to the path.
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Lorem ipsum dolor sit amet.</p>
</body>
Basic usage of CSS
When coding, we use selectors to set styles for each element. The basic selectors are: label selector, class selector, id selector.
Selector syntax
Label selector
Label name {style}
<style>
p{
font-size: 15px;
color: #81c6f8;
}
</style>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni
</p>
id selector
<tag id="
idname ">xxx</tag> #id名{style}
<head>
<style>
#p{
color: #eabdca;
font-style: italic;
}
</style>
</head>
<p id="p">Lorem, ipsum dolor sit amet consectetur adipisicing elit.
</p>
Descendant selector
Ancestor element selector descendant selector
<head>
<style>
#p{
color: #eabdca;
font-style: italic;
}
</style>
</head>
<div id="">
<p class="p">Lorem, ipsum dolor sit amet consectetur adipisicing elit.
</p>
</div>
Class selector
<tag class="class name">xxx</ tag>
.class name {style}
<head>
<style>
.p{
font-family: 'Courier New', Courier, monospace;
color: blueviolet;
}
</style>
</head>
<p class="p">Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
Other more advanced selectors can be viewed at the following address
https://www.w3.org/TR/2011/REC-css3-selectors-20110929/
CSS cascading rules
Selector specificity (selector specificity does not carry)
--ID属性值 0,1,0,0
--类，属性，伪类 0,0,1,0
--元素，伪元素 0,0,0,1
--通配符 0,0,0,0
--内联声明(标签中的样式) 1,0,0,0
--继承没有特殊性
注：当声明发生冲突时，选择器特殊性越大越占优势。
重要声明(!important)覆盖普通声明。
0特殊性(通配符)大于无特殊性(继承)。
Declared priority
- Sort by source
来源：
<1>读者
<2>创作者
<3>用户代理
权重：
<1>读者的重要声明(只有IE有)
<2>创作者的重要声明
<3>创作者的普通声明
<4>读者的普通声明
<5>用户代理(浏览器)的声明(无重要声明)
-Sort by the particularity of the selector
如上：选择器的特殊性
--Finally sorted in order
Front Coordinate System
-
top left
The positive direction of the x-axis is the positive direction of the front-end coordinate system and the negative direction of the
y-axis is the positive direction of the front-end coordinate system
-
bottom right
The negative direction of the x-axis is the positive direction of the front-end coordinate system and the positive direction of the
y-axis Is the positive direction of the front-end coordinate system.
Schematic diagram:
