|
目录
1、CSS简介
①语法规范
②代码风格
2、css选择器
①作用：
②分成两大类：
③基础选择器
3、css字体属性
①作用
②字体系列
③字体大小
④字体粗细
⑤文字样式
⑥字体复合属性
4、文本属性
①作用
②文本颜色
③对齐文本
④装饰文本
⑤文本缩进
⑥行间距
1、CSS简介
①语法规范
CSS规则主要由两个主要的部分构成：选择器和一条或多条声明；CSS都写在head标签的style标签里:
选择器 {
样式1;
样式2;
...
}
选择器用于指定CSS样式，花括号内是对该对象设置的具体形式；属性和属性值以”键值对“形式出现，“属性:属性值”；多个“键值对”之间用;区分。
②代码风格
紧凑格式：
h3 {color: pink; font-size: 20px;}
展开格式：
h3 {
color: pink;
font-size: 20px;
}
展开格式更推荐，更直观；推荐全部使用小写字母书写，特殊情况除外；属性值前面、冒号后面保留一个空格；选择器和大括号之间保留一个空格；
2、css选择器
①作用：
根据不同需求把不同的标签选出来；
②分成两大类：
选择器分为基础选择器和复合选择器两大类；
③基础选择器
由单个选择器组成的；基础选择器又包括标签选择器、类选择器、id选择器、通配符选择器；
--标签选择器：
用HTML标签名称作为选择器语法：
标签名{
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
...
}
应用：
/*css*/
p {
color: aquamarine;
}
div {
color: brown;
}
男生
男生
男生
女生
女生
女生
标签选择器把一类标签全部选择出来，能快速为页面中同类型的标签统一设置样式，但不能设计差异样式。
--类选择器：
单独选一个或者几个标签差异设计；使用的最多；语法：
/*css:先定义一个类*/
.类名{
属性1: 属性值1;
...
}
...
多类名：可以给一个标签指定多个类名；多类名使用方式：在标签class属性中写多个类名，多个类名之间用空格隔开；
...
应用：
/*css*/
.red {
color: red;
}
.font35 {
font-size: 35px;
}
水煮牛肉
炒三丝
鱼香肉丝
变红色
不能用标签名作类名；不要使用纯数字、中文等命名，尽量用英文字母；命名最好有意义，顾名思义；有基本的命名规范：Web前端开发规范手册.doc。
--课堂案例：
/*css*/
.red {
background-color: red;
}
.green {
background-color: green;
}
.size {
width: 100px;
height: 100px;
}
--id选择器：
在html中通过id属性设置id选择器，在css中id选择器以“#”定义；类选择器像人的名字，一个人能有多个名字，一个名字能被多人使用；id选择器像身份证，唯一 ；一般与js搭配使用；应用：
/*css*/
#pink {
color: pink;
}
我爱丸子妹~
--通配符选择器：
在css中，使用*定义，表示选取页面中所有元素（标签）；特殊情况下才使用；语法：
* {
属性1: 属性值1;
...
}
应用：
/*css*/
* {
color: pink;
}
0
1
2
3
4
5
3、css字体属性
①作用
Fonts（字体）属性用于定义字体系列、大小、粗细和文字样式；
②字体系列
css使用font-family定义文本的字体系列；字体名称可写中文，但推荐英文；当字体名称是单个单词可直接写，当字体名称是词组时，用单/双引号包住，两个字体名称之间用逗号隔开；尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示；常见字体：'Microsoft Yahei',tahoma,arial,'Hiragino Sans GB';识别代码时，按顺序检测用户系统是否有对应字体包，有的话直接使用该字体，没有则往下一个继续找，所以设置多个字体，兼容性会更好；可以给整个body指定整个页面的字体；语法：
p {
font-family: "微软雅黑";
}
div {
font-family: Arial, 'Microsoft Yahei', '微软雅黑', Times , serif;
/*当字体名称是单个单词可直接写，当字体名称是词组时，用单引号包住，两个字体名称之间用逗号隔开*/
}
应用：
/*css*/
a {
font-family: 'Microsoft YaHei';
}
默认字体
微软雅黑
③字体大小
css使用font-size属性定义字体大小；语法：
p {
font-size: 20px;
}
px（像素）是网页最常用的单位；不同浏览器默认显示字号可能不一样，尽量给一个明确值大小，不用默认大小；可以给整个body指定整个页面的大小，但标题标签特殊，要单独指定文字大小；
④字体粗细
css使用font-weight属性定义字体粗细；语法：
p {
font-weight: normal | bold | bolder | lighter | number;
}
属性值：
normal：默认值，相当于number为400；bold：粗体，相当于number为700；bolder：特粗体 lighter：细体 number：100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 实际开发中推荐使用数字（不用加单位）；
⑤文字样式
css使用font-style属性定义文字样式，如斜体；语法：
p {
font-weight: normal | italic | oblique;
}
属性值：
normal : 默认值，正常的字体；italic : 斜体，对于没有斜体变量的特殊字体，将应用oblique oblique : 倾斜的字体 一般很少给文字加斜体，反而要给斜体标签（em、i）改为正常字体；
⑥字体复合属性
语法：
p {
font : font-style font-weight font-size/line-height font-family
}
属性值顺序不能变换，各个属性值之间用空格隔开；不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性；应用：
/*css*/
div {
font: italic 700 16px 'Microsoft yahei';
}
112233445566
112233445566
4、文本属性
①作用
可定义文本的外观，如文本的颜色、对齐文本，装饰文本、文本缩进等；
②文本颜色
定义文本颜色；语法：
div {
color: red;
}
属性值：
预定义的颜色值：red、bule、green等；十六进制：#FFFFFF、#000000等;RGB代码：rgb(255,0,0)、rbg(100%,0%,0%)等；
③对齐文本
text-align用于设置元素内文本内容的水平对齐方式；语法：
div {
text-align: center;
}
属性值：
left：左对齐，默认值；right：右对齐；center：居中对齐；
④装饰文本
text-decoation属性规定添加到我文本的装饰，可以给文本添加下划线、删除线等；语法：
div {
text-decoration: underline;
}
属性值：
none：默认值，没有装饰线，常用；underline：下划线，常用，链接a自带；overline：上划线；line-through：删除线；text-decoration: none; 可以取消链接a自带的下划线；
⑤文本缩进
text-indent属性用来指定文本的第一行的缩进；语法：
div {
text-indent: 10px;
}
属性值可以取负值，文字往左缩进；em是一个相对单位，1个em就是当前文字一个的大小，中文缩进缩两位可直接用2em；
⑥行间距
line-height属性用于设置行间的距离（行高），可以控制文字行与行之间的距离；
p {
line-height: 26px;
}
行间距包括上间距、文本高度、下间距；测量行间距：从第一行的下沿测量到第二行的下沿；测量工具FSCapture。
|