CSS基础学习
1 简介
层叠样式表，网页实际时一个多层结构，可以为每一层设置样式，用css设置网页中的样式
2 方式
1、在标签内部通过style属性来设置元素的样式
使用内联样式，样式只能对一个标签生效，不好维护
<p style="color:red; font-size:60px;">hello world</p>
2、将样式写到head里的style标签里
利用选择器选中元素并为其设置样式，可以同时为多个标签设置样式。
只能对一个页面起作用，但是不能跨页面使用
<style>
p{color:red; font-size:60px;}
</style>
3、外部样式表
将样式写一个css文件里, 通过link标签进行引用
可以使用浏览器的缓存机制，从而加快网页的加载速度
<link rel="stylesheet" href="./css/p.css">
3 css的基本语法
- css的注释
// 注释
/*注释*/
-
选择器，选择指定的元素
-
声明块，为元素设置样式，由一个个声明组成，是一个名值对组成，以；结尾
4 选择器
- 元素选择器，根据标签名选中指定元素
例如：p{} h1{} div{}
- id 选择器，根据元素的id属性值选择元素，html 中 id属性值是唯一的
<p id="abc">hello</p>
例如： #abc{}
- 类选择器，根据元素的class属性，html 中 class属性值可以重复, 可以写多个class class名之间用空格隔开
<p class="cdf gh"></p>
例如： .cdf{}
- 交集选择器，如果有元素选择器必须以元素选择器开头
<p class="cdf"></p>
例如：选择器1选择器2选择器3 {}，p.cdf {}
- 选择器分组（并集选择器）
<p>hello</p>
<span>hello</span>
例如：选择器1，选择器2 p, span {}
- 关系选择器
<div>
<p>hello
<span>hh-span</span>
</p>
<span>hello—span</span>
</div>
子元素，直接被包含的元素
例如：div > span {}
父元素，直接包含的元素
祖先元素，直接或间接包含后代元素
后代元素，直接或间接被包含
例如： div span {}
兄弟元素，拥有相同父元素是兄弟元素
例如： p + span {} 找p元素下一个兄弟元素
? p ～ span {} 找p元素下边所有兄弟元素
- 属性选择器
<p title="abc">hello</p>
[属性名] 选择含有指定属性的元素
[属性名 = 属性值] 选择含有指定属性和属性值的元素
[属性名^ = 指定值] 选择属性值以指定值开头的元素
[属性名$ = 指定值] 选择属性值以指定值结尾的元素
[属性名* = 指定值] 选择属性值含有指定值的元素
例如：p[title] { } p[tiltle = abc] {}
- 伪类选择器
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
伪类用来描述元素的特殊状态，比如：第一个子元素，被点击的元素，鼠标移入的元素，伪类一般用 : 开头
例如：ul > li : first-child {} ul > li : nth-child {} ul > li : 2nth-child {}
? ul>li :nth-child(even) {} even 是偶数 odd是奇数
:first-child :last-child :nth-child :first-of-type :last-of-type :nth-of-type
:not {} 将选中的去除，ul > li:not(:nth-of-type) {}
链接伪类
a:link {} 没访问过的链接
a:visited {} 访问过的链接 ，由于隐私限制，只能改变颜色
a:hover {} 鼠标移入
a:active {} 鼠标点击
- 伪元素
表示网页中特殊的位置，使用 :: 开头
p::first-letter {} 第一个字母
p::first-line {} 表示第一行
p::selection {} 表示选中的东西
p::before { content = ‘a‘ }元素的开始，必须结合content属性
p::after {content = ‘abc‘ }元素的结束，必须结合content属性