04.CSS基础知识01

学习目标

• 能说出什么是css
• 能够使用css基础选择器
• 能够设置字体样式
• 能够设置文本样式
• 能够说出css三种引入方式

目录

1. css简介
2. css基础选择器
3. css字体属性
4. css文本属性
5. css的引入方式
6. 综合案例
7. 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属性用于设置行间距，可以控制文字行与行之间的距离

5.css引入方式

5.1内部样式表，放在style标签内，一般放在head标签中

5.2行内样式表，在元素标签内部的style属性中设定样式

5.3外部样式表，新建一个后缀名为.css的样式文件，用link标签引入link rel="stylesheet" herf="css文件路径"