学习目标
- 能说出什么是css
- 能够使用css基础选择器
- 能够设置字体样式
- 能够设置文本样式
- 能够说出css三种引入方式
目录
- css简介
- css基础选择器
- css字体属性
- css文本属性
- css的引入方式
- 综合案例
- chrome调试方式
1.css简介
css主要用于美化网页,页面布局
1.1html的局限性
html只关注内容的语义
1.2css网页的美容师
css是层叠样式表(Cascading Style Sheets)的简称,主要用于设置html页面中的文本内容,图片的外形,和版面的布局和外观显示样式
1.3css语法规范
css规则由两个主要的部分构成:选择器以及一条或者多条声明。格式:选择器 {属性:值 属性:值;}
2.css基础选择器
选择器分为基础选择器和符合选择器
基础选择器由单个选择器组成,包含:标签选择器,类选择器,id选择器和通配符选择器
2.1标签选择器是指用HTML标签名称作为选择器的css样式
语法:
标签名 {属性1:属性值1;属性2:属性值2;...}
标签选择器可以把某一类标签全部选择出来,能为页面中同类型的标签统一设置样式,但是不能设计差异化样式。
2.2类选择器可以实现差异化样式
语法:
.类名{属性1:属性值1;...}
口诀:样式点定义,结构类调用,一个或多个,开发最常用。不能用标签名字作为类名
类选择器可使用多类名方式,各个类名中间用空格隔开
2.3id选择器可以为标有特定id的html元素指定特定的样式
语法:
#id名{属性1:属性值1;...}
- 类选择器好比人的名字,一个人可以有多个名字,一个名字也可被多个人使用
- Id选择器好比身份证,不可重复
- 类选择器和id选择器最大不同在于使用次数上
- 类选择器在修改样式中用的最多,id选择器一般用于页面唯一性的元素上,常和js使用
2.4通配符选择器,表示选取页面中所有元素,用“*”定义,一般特殊情况下才用,例如清楚内外边距
3.css字体属性
css字体属性用于定义字体系列,大小,粗细,文字样式
3.1字体系列
css使用font-family属性定义文本的字体系列
css使用font-size属性定义字体大小,可以给body指定整个页面文字的大小
css使用font-weight属性设置文本字体的粗细
属性值 | 描述 |
---|---|
normal | 默认值(不加粗) |
bold | 定义粗体(加粗) |
100-900 | 400等于narmal,700等于bold,这个数字后面不跟单位,实际开发我们更喜欢用数字表示粗细 |
css使用font-style属性设置文本的风格,normal为显示标准的字体样式,italic会显示斜体,平时很少设斜体,一般给斜体标签(em,i)改为不倾斜字体
字体复合属性,可以写在一起,必须按,字体系列,大小,粗细,文字样式顺序写,不需要设置的属性可以省略,但是必须保留font-size和font-family
4.css文本样式
4.1文本颜色
color用于定义文本颜色,开发中常用十六进制
text-align设置元素内文本内容的水平对齐方式,属性值有left,right,center
text-decoration属性规定添加到文本的修饰。
属性值 | 描述 |
---|---|
none | 默认,没有装饰线(常用) |
underline | 下划线,链接a自带下划线(常用) |
overline | 上划线(几乎不用) |
line-through | 删除线(不常用) |
text-indent属性用来指定文本的第一行的缩进,通常是将段落的首行缩进,常用2em,em是个相对单位
line-height属性用于设置行间距,可以控制文字行与行之间的距离