# 前置知识
# 使用场景
美化页面、布局页面、调整样式
# 文件位置及 CSS 组成
<style> | |
/* CSS 位置 */ | |
/* CSS 一般结构 */ | |
选择器 { | |
/* 样式声明 */ | |
属性:值; | |
} | |
</style> |
# 选择器作用
选择 html 标签
# CSS 样式表引入方式
<link rel="stylesheet" href="CSS文件路径"> |
CSS 文件路径可以是相对路径、绝对路径和超链接
# 调试工具使用
调试工具视频浅谈
# 常用单位
px: 像素大小
em: 相对单位，1em 相当于一个字
# CSS 选择器
# 基础选择器
# 标签选择器
用同类型 HTML 标签 全选出作为选择器
标签名 {
属性 1: 属性值 1;
属性 2: 属性值 2;
属性 3: 属性值 3;
属性 4: 属性值 4;
....
}
div { | |
color: pink; | |
} |
# 类选择器
单独选择一个或几个 HTML 标签作为选择器，使用 class 属性调用， 可调用多次
. 类名 {
属性 1: 属性值 1;
属性 2: 属性值 2;
....
}
.red { | |
color: pink; | |
} | |
<div class= "red"></div> | |
<li class = "red"></li> |
# id 选择器
HTML 标签以 id 属性设置选择器， 只能调用一次
#id 名 {
属性 1: 属性值 1;
属性 2: 属性值 2;
....
}
#red { | |
color: pink; | |
} | |
<div id= "red"></div> |
# 通配符选择器
以 "*" 定义，选取页面所有 HTML 标签， 不需要调用
*{
属性 1: 属性值 1;
属性 2: 属性值 2;
....
}
* { | |
margin: 0; | |
padding: 0; | |
} |
# 复合属性写法
/* 一般 */ | |
#font { | |
font-size: 20px; | |
font-family: 'Microsoft yahei'; | |
} | |
/* 复合写法 */ | |
#font { | |
font: 20px 'Microsoft yahei'; | |
} |
属性书写顺序要由上往下
# 复合选择器
由任意基础选择器组合而成
# 后代选择器
可以选择父标签里的子标签改变样式，其中子标签和父标签可以时任意基础选择器
父标签 子标签 ...{
属性 1: 属性值 1;
属性 2: 属性值 2;
....
}
ol li { | |
color: pink; | |
} | |
<ol > | |
<li>1</li> | |
<li>2</li> | |
</ol> |
# 子选择器
只能选择父标签的一级子标签改变样式
父标签 > 子标签 ...{
属性 1: 属性值 1;
属性 2: 属性值 2;
....
}
.nav>a { | |
color: pink; | |
} | |
<ol class = "ol" > | |
<a>一级子标签</a> //作用对象 | |
<p> | |
<a>二级子标签</a> | |
</p> | |
</ol> |
# 并集选择器
选择多个标签作为选择器集体改变样式，可以是任意基础选择器
父标签，子标签 ...{
属性 1: 属性值 1;
属性 2: 属性值 2;
....
}
div,p,.ol { | |
color: pink; | |
} | |
<body> | |
<div>123</div> | |
<p>123</p> | |
<ol class = "ol" > | |
<li>1</li> | |
<li>2</li> | |
</ol> | |
</body> |
# 伪类选择器
用于向某些选择器添加特殊的效果
# 链接伪类选择器
常用于超链接的样式显示效果，a 标签最为常见
a: 连接名 {
属性 1: 属性值 1;
属性 2: 属性值 2;
....
}
其中连接名
:link /# 未访问的链接 #/
:visited /# 已经访问的链接 #/
:hover /# 鼠标移动到链接上 #/
:active /# 选定的链接 #/
/* 先指定链接的默认样式 */ | |
a { | |
color: pink; | |
} | |
/* 指定鼠标移动到链接的样式 */ | |
a:hover { | |
color: blue; | |
} | |
<body> | |
<a href="#">链接伪类</a> | |
</body> |
# focus 伪类选择器
常用于选取获得焦点 (光标) 的表单元素，针对于 input 标签
/* 把获得光标的 input 表单元素样式显示出来 */ | |
input:focus { | |
background-color: blue; | |
color: white; | |
} | |
<body> | |
<input type="text"> | |
</body> |
# CSS3 新特性
# 属性选择器
使用标签内的属性作为选择器
有多种格式如下
标签名:[标签属性格式] {
属性 1: 属性值 1;
属性 2: 属性值 2;
....
}
其中标签属性格式
E [att] 选择具有 att 属性的 E 标签
E [att="val"] 选择具有 att 属性且属性值等于 val 的 E 标签
E [att^="val"] 匹配具有 att 属性且属性值以 val 的 E 标签
E [att$="val"] 匹配具有 att 属性且属性值以 val 结尾的 E 标签
E [att*="val"] 匹配具有 att 属性且属性值中有 val 的 E 标签
/* E[att] */ | |
a[target] | |
{ | |
background-color:yellow; | |
} | |
/* E[att] */ | |
a[target=_blank] | |
{ | |
background-color:yellow; | |
} | |
/* 对应 E [att] 和 E [att] */ | |
<a href="http://www.disney.com" target="_blank">disney.com</a> | |
/* E[att^="val"] */ | |
div[class^="test"] | |
{ | |
background:#ffff00; | |
} | |
/* E[att$="val"] */ | |
div[class$="test"] | |
{ | |
background:#ffff00; | |
} | |
/* E[att*="val"] */ | |
div[class*="test"] | |
{ | |
background:#ffff00; | |
} | |
/* 对应 E [att^="val"]、E [att$="val"] 和 E [att*="val"] */ | |
<div class="first_test">第一个 div 元素。</div> | |
<div class="second">第二个 div 元素。</div> | |
<div class="test">第三个 div 元素。</div> | |
<p class="test">这是段落中的文本。</p> |
# 结构伪类选择器
多种格式如下
标签名：结构伪类格式 {
属性 1: 属性值 1;
属性 2: 属性值 2;
....
}
其中结构伪类格式
E:first-child 匹配父标签中第一个子标签
E:last-child 匹配父标签中最后子标签
E:ntn-child (n) 匹配父标签中第 n 个子标签
E:first-of-type 指定 E 标签的第一个
E:last-of-type 指定 E 标签的最后一个
E:ntn-of-type (n) 指定 E 标签的第 n 个
# 伪元素选择器
在选定标签前面后面插入新内容
标签名：：元素位置 {
属性 1: 属性值 1;
属性 2: 属性值 2;
....
}
其中元素位置
after 在选定标签后面插入新内容
before 在选定标签前面插入新内容
p::before | |
{ | |
content:"Hello "; | |
} | |
p::after | |
{ | |
content:" Jelly"; | |
} | |
<p>I'm</p> | |
/* 结果是 Hello I'm Jelly */ |
# 提醒
更多关于 CSS 的详细内容可以去看 W3C。
