CSS必备基础知识点 / 四六文摘

浏览器内核

firefox:gecko
ie:trident
safari:webkit
chrome: webkit ---> 基于webkit开发了Blink
opera:Presto ---> webkit ---> Blink

css样式表的组成

样式表：
规则集：选择器(浏览器从右向左读) 声明块组成
声明块：声明组成
声明：合法的css属性的键值对(属性属性值)组成

引入样式的三种方式

引入CSS样式有三种方式，分别是：行内样式、内部样式、外部样式。

行内样式(优先级最高)

<标签名 style='样式'>xxx</标签名>

<!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>

内部样式

将样式写在<head>标签中，用style标签将样式包裹起来。

<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>

外部样式

在<head>标签中写<link rel='stylesheet' href='样式表名.css'>，href的值需要单独建一个扩展名为.css的样式文件,注意路径。

<head> <link rel='stylesheet' href='style.css'> </head> <body> <p>Lorem ipsum dolor sit amet.</p> </body>

CSS的基本使用方式

在编码时，我们利用选择器来为各个元素设置样式。基本的选择器分别为：标签选择器、类(class)选择器、id选择器。

选择器语法

d83bd18e-07b5-46fc-9fac-222ae086a4f3.png

标签选择器

标签名{样式}

   <style>
        p{
            font-size: 15px;
            color: #81c6f8;
        }
    </style>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni
    </p>

id选择器

<标签 id='id名'>xxx</标签>
#id名{样式}

<head> <style> #p{ color: #eabdca; font-style: italic; } </style> </head> <p id='p'>Lorem, ipsum dolor sit amet consectetur adipisicing elit. </p>

后代选择器

祖先元素选择器后代选择器

<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)选择器

<标签 class='class名'>xxx</标签>
.class名{样式}

<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>

其余更高级的选择器可去以下地址查看
https://www.w3.org/TR/2011/REC-css3-selectors-20110929/

css层叠规则

选择器特殊性(选择器特殊性不进位)

--ID属性值                              0,1,0,0
--类，属性，伪类                   0,0,1,0
--元素，伪元素                       0,0,0,1
--通配符                                  0,0,0,0
--内联声明(标签中的样式)      1,0,0,0
--继承没有特殊性
注：当声明发生冲突时，选择器特殊性越大越占优势。
重要声明(!important)覆盖普通声明。
0特殊性(通配符)大于无特殊性(继承)。

声明的优先级

--按来源排序

来源： <1>读者 <2>创作者 <3>用户代理 权重： <1>读者的重要声明(只有IE有) <2>创作者的重要声明 <3>创作者的普通声明 <4>读者的普通声明 <5>用户代理(浏览器)的声明(无重要声明)

--按选择器的特殊性排序

如上：选择器的特殊性

--最终按顺序排序

前端坐标系

--
top left
x轴的正方向就是前端坐标系的正方向
y轴的负方向才是前端坐标系的正方向
--
bottom right
x轴的负方向就是前端坐标系的正方向
y轴的正方向才是前端坐标系的正方向
示意图：

image.png

CSS必备基础知识点