1.引入其他css样式表
@import "style.css"引号里填url
其实有很多种
1.CSS的工作原理
瀏覽器解析網頁的流程圖
css工作的原理
2. css的幾種引用方式
2.1. 外部樣式表
2.1.1. 通過link引入(推薦)
link寫在head裏面
2.1.2. 通過@import引入
注意格式,不要忘記分號
2.2. 内部樣式表
在頁面中使用<style>標簽.
跟html寫在一起
2.3. 内聯樣式
直接在標簽内寫屬性
内聯樣式
2.4. 屬性樣式(廢棄)
看看就好
3.css選擇器
3.1. 種類
3.1.1. *直接選擇所有元素
3.1.2. #id選擇
3.1.3. .class選擇
3.1.4. element選擇
比如p{ }
3.2. 組合選擇
組合選擇
上圖中,E F形式可以選擇E裏面的F,不管F嵌套了幾層,而E>F,只能當F是E的直接子元素時才能生效,如果E裏套了D再套F就不會生效.
E+F是選擇跟E直接相鄰的F(要求同級);
E~F是選擇E後面所有的F(要求同級);
.class1.class2指同時擁有這兩個class的元素
3.3. 屬性選擇器
image.png
舉例:
<input type="text">可使用input[type=text]{ }來選擇
3.4. 僞類選擇器
伪类选择器
示例
上图中有以下两句，分别表示在
<div class="wrap">里的最前面和最后面插入文字内容‘aa’和‘bbb’，最终效果见下图。
.wrap::before{
content:'aa';
}
.wrap::after{
content:'bbb'
}
最后的效果
示例选择器及含义
3.5. css的样式渲染优先级规则
···根据css样式渲染的顺序是从上到下的原则,链接的三种形态visited(已被点击)-hover(悬停)-active(按下)应按此顺序,否则visited在最后的话,会导致一次visited之后hover和active的效果不再生效的问题.
first-oftype
first-of-type首先先选中有此.child 类的所有元素,然后再选中这些元素的同类标签,在这些同类标签中选第一个,因此第二个h2就没有被给样式.
相对应的改了这里的属性,h2就变了
···在属性后面加上!important可以让这个属性有最高的优先级。
!important
