CSS:层叠样式表(cascading style sheet)
1、结构和表现分离
(1)html只负责展示内容,搭建网页的基本结构。不用标签的属性设置样式
(2)所有的样式都由CSS来进行设置
2、应用CSS的方法:
(1)页面嵌入式:
<style type="text/css">
Css的样式规则
</style>
(2)行内嵌入式:
给标签加入style属性,设置样式
(3)先创建独立的样式文件(.css),然后在页面中导入样式文件
A、第一步:创建样式文件(.css)
B、第二步:在页面文件中导入样式文件
<link href="样式文件的地址" type="text/css" rel="stylesheet" />
3、CSS样式规则:
选择器{
样式属性1:值1;
样式属性2:值2;
......
}
例如:
p{
font-size: 35px;
color: blue;
font-family: '隶书';
}
4、CSS选择器:
是CSS的核心
(1)标签名选择器
标签名{
样式属性:值;
样式属性:值;
}
(2)id选择器:
给标签带上id属性,id的属性值不能重复
#id属性值{
样式属性:值;
样式属性:值;
}
(3)类选择器:
给标签带上class属性,class属性值可以重复
.class属性值{
样式属性:值;
样式属性:值;
}
5、颜色的表示方式:
(1)颜色名:如red、blue
(2)十六进制:#rrggbb(r,g,b是三原色,十六进制取值在0~f)
#aadd45
(3)函数方式:rgb(r,g,b) r,g,b是三原色,十进制取值在0~255之间.
rgba(red,green,blue,alpha) 'alpha'表示颜色透明度
6、尺寸的表示方式:
尺寸 | Value |
---|---|
em | 相对的长度单位。1em = 16px |
px | 相对的长度单位.像素 |
in | 英寸,绝对长度单位 1in = 2.54cm |
cm | 厘米,绝对长度单位 |
mm | 毫米,绝对长度单位# 7、图像的表示方式: |
7、图像的表示方式:
图像名 | Value |
---|---|
.png | 体积小,适合网络传输 |
.jpg(.jpeg) | 体积大,不适合网络传输 |
.gif | 小动画、支持透明 |
url(‘图像的全名’)
8、文本的样式属性
(1)字型:font-family: '宋体';
(2)字体加粗:font-weight: bold;
(3)字体样式:font-style: italic;
(4)字母间距: letter-spacing: 0px;
(5)单词间距:word-spacing: 10px;
(6)行高:line-height: 50px;
(7)水平对齐方式:text-align
(8)控制英文字符的大小:text-transform
(9)设置文本的下划线、上划线、删除线:text-decoration
(10)首行文本的缩进:text-indent
(11)文本添加阴影效果:text-shadow:水平阴影距离 垂直阴影距离 模糊半径 颜色