CSS 基础使用
一、CSS介绍
CSS全称为: Cascading Style Sheets ,意为层叠样式表 ,与HTML相辅相成,实现网页的排版布局与样式美化
二、CSS使用方式
1. 行内样式/内联样式
借助于style标签属性,为当前的元素添加样式声明
<标签名 style="样式声明">
CSS样式声明 : 由CSS属性和值组成
例:
style="属性:值;属性:值;"
常用CSS属性 :
- 设置文本颜色 color:red;
- 设置背景颜色 background-color:green;
- 设置字体大小 font-size:32px;
2. 内嵌样式
借助于style标签,在HTML文档中嵌入CSS样式代码,可以实现CSS样式与HTML标签之间的分离。同时需借助于CSS选择器到HTML 中匹配元素并应用样式
示例:
<style>
选择器{
属性:值;
属性:值;
}
</style>
选择器 : 通过标签名或者某些属性值到页面中选取相应的元素,为其应用样式
示例:
/*标签选择器 : 根据标签名匹配所有的该元素*/
p{
color:red;
}
3. 外链样式表
- 创建外部样式表文件 后缀使用.css
- 在HTML文件中使用标签引入外部样式表
<link rel="stylesheet" href="URL" type="text/css">
- 样式表文件中借助选择器匹配元素应用样式
三、样式表特征
1. 层叠性
多组CSS样式共同作用于一个元素
2. 继承性
后代元素可以继承祖先元素中的某些样式
例 : 大部分的文本属性都可以被继承
3. 样式表的优先级
优先级用来解决样式冲突问题。同一个元素的同一个样式(例如文本色),在不同地方多次进行设置,最终选用哪一种样式?此时哪一种样式表的优先级高选用哪一种。
- 行内样式的优先级最高
- 文档内嵌与外链样式表,优先级一致,看代码书写顺序,后来者居上
- 浏览器默认样式和继承样式优先级较低
四、CSS 选择器
1. 作用
匹配文档中的某些元素为其应用样式
2. 分类 :
1. 标签选择器
根据标签名匹配文档中所有该元素
语法 :
标签名{
属性:值;
}
2. id选择器
根据元素的 id 属性值匹配文档中惟一的元素,id具有唯一性,不能重复使用
语法 :
#id属性值{
}
注意 :
id属性值自定义,可以由数字,字母,下划线,- 组成,不能以数字开头;
尽量见名知意,多个单词组成时,可以使用连接符,下划线,小驼峰表示
3. class选择器/类选择器
根据元素的class属性值匹配相应的元素,class属性值可以重复使用,实现样式的复用
语法 :
.class属性值 {
}
特殊用法 :
1. 类选择器与其他选择器结合使用
注意标签与类选择器结合时,标签在前,类选择器在后
例 : a.c1{ }
2. class属性值可以写多个,共同应用类选择器的样式
例 :
.c1{ }
.c2{ }
<p class="c1 c2"></p>
4. 群组选择器
为一组元素统一设置样式
语法 :
selector1,selector2,selector3{
}
5. 后代选择器
匹配满足选择器的所有后代元素(包含直接子元素和间接子元素)
语法 :
selector1 selector2{
}
匹配selector1中所有满足selector2的后代元素
6. 子代选择器
匹配满足选择器的所有直接子元素
语法 :
selector1>selector2{
}
7. 伪类选择器
为元素的不同状态分别设置样式,必须与基础选择器结合使用
分类 :
:link 超链接访问前的状态
:visited 超链接访问后的状态
:hover 鼠标滑过时的状态
:active 鼠标点按不抬起时的状态(激活)
:focus 焦点状态(文本框被编辑时就称为获取焦点)
使用 :
a:link{
}
a:visited{
}
.c1:hover{
}
注意 :
1. 超链接如果需要为四种状态分别设置样式,必须按照以下顺序书写
:link
:visited
:hover
:active
2. 超链接常用设置 :
a{
/*统一设置超链接默认样式(不分状态)*/
}
a:hover{
/*鼠标滑过时改样式*/
}
3. 选择器的优先级
使用选择器为元素设置样式,发生样式冲突时,主要看选择器的权重,权重越大,优先级越高
选择器 | 权重 |
---|---|
标签选择器 | 1 |
(伪)类选择器 | 10 |
id选择器 | 100 |
行内样式 | 1000 |
复杂选择器(后代,子代,伪类)最终的权重为各个选择器权重值之和
群组选择器权重以每个选择器单独的权重为准,不进行相加计算
例 :
/*群组选择器之间互相独立,不影响优先级*/
body,h1,p{
/*标签选择器权重为 1 */
color:red;
}
.c1 a{
/*当前组合选择器权重为 10+1 */
color:green;
}
#d1>.c2{
/*当前组合选择器权重为 100+10 */
color:blue;
}
五、标签分类及嵌套
1. 块元素
独占一行,不与元素共行;可以手动设置宽高,默认宽度与与父元素保持一致
例 : body div h1~h6 p ul ol li form, table(默认尺寸由内容决定)
2. 行内元素
可以与其他元素共行显示;不能手动设置宽高,尺寸由内容决定
例 : span label b strong i s u sub sup a
3. 行内块元素
可以与其他元素共行显示,又能手动调整宽高
例 : img input button (表单控件)
4. 嵌套原则
- 块元素中可以嵌套任意类型的元素
p元素除外,段落标签只能嵌套行内元素,不能嵌套块元素 - 行内元素中最好只嵌套行内或行内块元素
六、尺寸单位
- px 像素单位
- % 百分比,参照父元素对应属性的值进行计算
- em 字体尺寸单位,参照父元素的字体大小计算,1em=16px
- rem字体尺寸单位,参照根元素的字体大小计算,1rem=16px
七、颜色单位
- 英文单词:red,green,blue
- rgb(r,g,b) 使用三原色表示,每种颜色取值0~255
- rgba(r,g,b,alpha) 三原色每种取值0255,alpha取值0(透明)1(不透明)
- 十六进制表示:以#为前缀,分为长十六进制和短十六进制。
- 长十六进制:每两位为一组,代表一种三原色;每位的取值范围09,af
例:red rgb(255,0,0) #ff0000 - 短十六进制:由3位组成,每一位代表一种三原色,浏览器会自动对每一位进行重复扩充,仍然按照长十六进制解析
例:#000 #fff #f00
- 长十六进制:每两位为一组,代表一种三原色;每位的取值范围09,af
八、背景属性
1. 背景颜色
background-color: red;
2. 背景图片相关
1) 设置背景图片
background-image : url("路径");
设置背景图片,指定图片路径,如果路径中出现中文或空格,需要加引号
2) 设置背景图片的重复方式
默认背景图片从元素的左上角显示,如果图片尺寸与元素尺寸不匹配时,会出现以下情况:
- 如果元素尺寸大于图片尺寸,会自动重复平铺,直至铺满整个元素
- 如果元素尺寸小于图片尺寸,图片默认从元素左上角开始显示,超出部分不可见
background-repeat:repeat/repeat-x/repeat-y/no-repeat
取值 :
repeat 默认值,沿水平和垂直方向重复平铺
repeat-x 沿X轴重复平铺
repeat-y 沿Y轴重复平铺
no-repeat 不重复平铺
3) 设置背景图片的显示位置
默认显示在元素左上角
background-position:x y;
取值方式 :
1. 像素值
设置背景图片的在元素坐标系中的起点坐标
2. 方位值
水平 :left/center/right
垂直 :top/center/bottom
注:如果只设置某一个方向的方位值,另外一个方向默认为center
3. 百分比
类似于方位值,根据百分比计算背景图片的显示坐标。
计算方式:
横坐标 = (元素宽度 - 背景图片宽度)* x%
纵坐标 = (元素高度 - 背景图片高度) * y %
特殊值:
0% 0% 左上角
100% 100% 右下
50% 50% 居中显示
精灵图技术 :为了减少网络请求,可以将所有的小图标拼接在一张图片上,一次网络请求全部得到;借助于background-position进行背景图片位置的调整,实现显示不同的图标
4)设置背景图片的尺寸
background-size:width height;
取值方式 :
1. 像素值
1. 500px 500px; 同时指定宽高
2. 500px; 指定宽度,高度自适应
2. 百分比
百分比参照元素的尺寸进行计算
1. 50% 50%; 根据元素宽高,分别计算图片的宽高
2. 50%; 根据元素宽度计算图片宽高,图片高度等比例缩放
3. 背景属性简写
background:color url("") repeat position;
- 注意 :
- 如果需要同时设置以上属性值,遵照相应顺序书写
- background-size 单独设置
九、文本属性
1. 字体相关
1) 设置字体大小
font-size:20px;
2)设置字体粗细程度
font-weight:normal;
- 取值 :
normal(默认值)等价于400
bold (加粗) 等价于700
3)设置斜体
font-style:italic;
4) 设置字体名称
font-family:Arial,"黑体";
- 取值 :
1. 可以指定多个字体名称作为备选字体,使用逗号隔开
2. 如果字体名称为中文,或者名称中出现了空格,必须使用引号
例 :
font-family:Arial;
font-family:"黑体","Microsoft YaHei",Arial;
5)字体属性简写
font : style weight size family;
注意 :
1. 如果四个属性值都必须设置,严格按照顺序书写
2. size family 是必填项
2. 文本样式
1)文本颜色
color:red;
2) 文本装饰线
text-decoration:none;
取值 :
underline 下划线
overline 上划线
line-through 删除线
none 取消装饰线
3)文本内容的水平对齐方式
text-align:center;
取值 :
left(默认值) 左对齐
center 居中对齐
right 右对齐
justify 两端对齐
4)行高
line-height:30px;
使用 :
文本在当前行中永远垂直居中,可以借助行高调整文本在元素中的垂直显示位置
line-height = height 设置一行文本在元素中垂直居中
line-height > height 文本下移显示
line-height < height 文本靠上显示
特殊 :
line-height可以采用无单位的数值,代表当前字体大小的倍数,以此计算行高
5) font属性简写2
font : size/line-height family;