CSS
1. CSS 介绍
CSS : Cascading Style Sheet 层叠样式表
作用 : 调整页面元素的显示外观,实现网页布局
2. CSS使用
在HTML文档中使用CSS样式表,有三种方式
1. 内联样式/行内样式
特点 : 在标签中通过style属性,为元素设置样式
语法 :
<标签名 style="属性:值;属性2:值;"></标签名>
CSS中使用属性和值来声明样式
常用的CSS属性:
1. font-size
设置元素的字体大小,取像素值;
2. color
设置元素的字体颜色,取颜色值;
3. background-color
设置元素的背景颜色,取颜色值;
2. 文档内嵌
特点 : 在文档中使用<style></style>标签,为文档中的
元素设置样式
语法 :
<style type="text/css">
选择器{
属性:值;
属性2:值;
...
}
选择器{
属性:值;
属性2:值;
...
}
</style>
选择器 : 用来匹配文档中的元素并为其设置样式
et :
p{
color:red;
font-size:32px;
}
通过标签名匹配文档中所有的该元素,叫标签选择器
3. 外链
特点 : 在HTML文档中引入外部的样式表文件
使用 :
1. 定义外部的样式表文件 以.css为后缀
2. 在HTML中使用
<link rel="stylesheet" href="url" type="text/css">
3. 样式表的特征
1. 层叠性
可以为一个元素设置多个样式,共同起作用
p{
color:red;
background-color:green;
font-size:32px;
}
2. 继承性
子元素可以继承父元素或祖先元素的某些CSS样式
例如 : 大部分的文本属性都可以被继承;
块元素默认宽度与父元素保持一致 h1 p div
3. 优先级
从低到高依次为 :
1. 浏览器默认样式
2. 文档内嵌样式/外链文件中的样式,以代码书写顺序为准
后来者居上
3. 行内样式 (最高)
如果发生样式冲突,参考优先级,决定元素最终样式
4. 选择器
1. 选择器作用 :
根据不同的选择器,匹配文档中相应的元素,并为其设置样式
2. 选择器分类 :
1. 标签选择器
作用 : 根据标签名匹配文档中所有的该元素
语法 :
标签名{
属性 : 值;
}
练习 :
1. 创建超链接标签
2. 设置文本颜色为红色
3. 取消下划线 text-decoration : none;
2. id选择器
根据元素的id属性值匹配元素
注意 : 所有的元素都有id属性,属性值自定义.
ID属性具有唯一性
语法 :
#id属性值{
样式
}
et:
#box{
width : 200px;
height : 200px;
background-color:red;
}
<div id="box"></div>
3. class类选择器
根据标签的class属性值匹配元素,可以复用
语法 :
.class属性值{
样式
}
特殊用法 :
1. 标签选择器与类选择器结合使用
p.c1{
background-color:pink;
}
标签名必须放在前面
.c1p{ 匹配类名class="c1p"的元素
}
2. class 属性值可以出现多个使用空格隔开
et :
class="c1 c2 c3"
4. 群组选择器
可以为一组元素,设置共同样式.
语法 :
选择器1,选择器2,选择器3{
样式
}
常见于清除浏览器默认样式,或者设置网页基础样式
5. 后代选择器
特点 : 匹配满足要求的所有后代元素
语法 :
选择器1 选择器2{
样式
}
选择器1 表示匹配父元素
选择器2 表示后代元素
6. 子代选择器
只匹配父元素中的直接子元素
语法 :
选择器1>选择器2{
样式
}
7. 伪类选择器
1. 作用 : 针对元素不同状态,设置相应样式
2. 分类 :
1. 超链接伪类选择器
针对超链接不同状态设置样式
2. 动态伪类选择器
所有元素都可以使用
3. 使用 :
1. 超链接伪类选择器
1. 访问前 :link
2. 访问后 :visited
伪类选择器需要与其他选择器结合使用,不能单独使用
a:link{
设置超链接访问之前的样式
}
2. 动态伪类选择器
1. :hover
鼠标滑过元素时的状态
2. :active
鼠标点按元素时的状态,激活
超链接使用注意 :
1. 超链接可以设置四种状态的样式,书写时必须按照
以下顺序定义 : LoVe/HAte 爱恨原则
:link
:visited
:hover
:active
2. 网页中一般会直接对a标签设置默认样式,配合
:hover改变超链接文本色或背景色
3. :focus
表示文本框或密码框在获取焦点时的状态
焦点状态 : 正接受输入或编辑时的状态
input:focus{
}
3. 选择器的优先级
选择器的优先级看权重(值),权值越大,优先级越高
基础选择器的权值
标签选择器 1
类选择器/伪类选择器 10
id选择器 100
行内样式 1000
组合选择器,除了群组选择器,其他的选择器权值由各选择器
的权值相加得到
div span{ 2
color:red;
}
span{ 1
color:green;
}
.d1 .c1{ 20
}
#d1 .c1
5. 尺寸与颜色单位
1. 尺寸 :
1. 属性 : width height
2. 单位 :
1. px 默认单位,表示像素
2. % 百分比单位:参照父元素对应属性的值获取尺寸
-------------
3. cm 厘米
4. mm 毫米
5. pt 磅 1pt = 1/72in
6. in 英寸inch 1英寸 = 2.54 cm
-------------
7. em 默认情况下 1 em = 16px
8. rem 与字体大小相关
2. 颜色取值 :
1. 英文单词表示颜色
2. rgb(r,g,b);
使用红绿蓝三原色表示,每种颜色取值范围0~255
red rgb(255,0,0);
green rgb(0,255,0);
blue rgb(0,0,255);
black rgb(0,0,0);
white rgb(255,255,255);
3. rgba(r,g,b,a)
a 表示alpha 透明度,取值0-1
0表示透明,1表示不透明
使用小数表示半透明 0.5 .5
4. 十六进制表示颜色
语法 :
十六进制取值范围 0-9,a-f
表示颜色 : 以#开头,每两位为一组,代表一种三元色
et :
rgb(255,0,0) #ff0000
green #00ff00
blue #0000ff
#01ace6
短十六进制 :
由三位组成,每一位表示一种三元色,浏览器会
自动重复补充成6位十六进制
#f00 -> #ff0000