1+x前端初级---css（1）（操作题，选择题，多选题）

这一章不难，容易出多选题，选择题，眼睛得认识

一、css介绍

css全称为Cascading Style Sheets 翻译过来叫层叠样式表

作用：设置网页的文字（大小，颜色，字体风格，对齐方式等）图片和排版等，简单点说就是给网页化妆

语法

1.构建css的运行环境：在头部加入style标签

2.选择对应的目标元素，使用大括号

3.语法：属性：值; 键值对

css字体、文本属性

1.字体属性

a) font-size 设置字体的大小

取值方式：数字 + 像素单位px（像素就是一个长度单位）

多学一招：

（1）取值用偶数

（2）默认是16px大小

（3）字体有多大，看字体的高度

b) font-weight 设置字体的粗细

取值：

normal 正常的（400）、

bold加粗（700）、

bolder(900) 、

100 - 900（字体的粗细没有那么精细，所以很少使用数字）

在实际工作中 用的最多的就是normal （不加粗）和bold（加粗）

c) font-style 设置字体的风格

取值：normal 默认 显示标准的字体样式 italic 字体倾斜

d) font-family 设置不同的字体

取值： 宋体、微软雅黑、黑体、。。。等等

多学一招：

1.不推荐使用一些冷门字体，因为一些冷门字体很多电脑里面默认没有安装，这个时候就会显示不出来。所以实际工作中，默认都是一些主流字体 如宋体 微软雅黑 等。。。

2.字体可以写多组，中间用逗号隔开，显示不了第一个，就找第二个显示

3.字体名称中如果有空格 # $ 这种特殊字符的时候需要添加上引号 中文字体也需要添加引号

2.文本属性

a) 文本修饰

语法：text-decoration:值

取值：

（1）underline下划线

（2）overline上划线

（3）line-through删除线

（4）

b) 文本转换

语法：text-transform:值

取值：

（1）uppercase转换成大写

（2）lowercase转换成小写

（3）capitalize首字母大写

c) 文本对齐方式

语法：text-align:值

取值：

（1）left左对齐---------------------默认

（2）center居中对齐

（3）right右对齐

d) 首行缩进

语法：text-indent:值

取值：可以是像素，但是当文字大小发生改变后，也需要重新改变，可以使用em代替，代表字符，会随着文字大小的改变而自动调整

多学一招：默认的文字大小是16px

.字体颜色

语法：color:"颜色值"

三、css注释

---

语法：/*注释的内容*/

四、css基本选择器

---

1.标签选择器

通过标签来选择元素，标签{css样式}

2.id选择器

通过id属性来选择元素，#id名{css样式}

注意：id选择要保证页面中的唯一性，这是语义

3.class类选择器

通过class属性选择元素，.类名{css样式}

多学一招：一个元素可以有多个类名

4.复合选择器

a) 标签选择器和类选择器一起使用

需求：给下面的类名叫box的p标签设置字体颜色为绿色

b) 用多个类名选择一个元素

c) 给多个元素设置同一种样式，每个元素中间用 ， 隔开:元素1，元素2{css样式}

五、常用选择器

1.通配选择器（了解）

给所有标签添加样式，*{css样式}

多学一招：通常只是用来去掉所有代码的边距，因为每个浏览器的边距不同，有的8个像素，有的7个像素，所以干脆会全部去掉，重新设置，保证浏览器的每个边距都一致

2.后代选择器（掌握）

选择元素里面的元素，外层元素和内层元素中间用空格隔开：外层 内层{css样式}

3.子元素选择器（掌握）

选择元素的直接子元素，父和子之间用 > 隔开：父元素>子元素{css样式}

4.相邻元素选择器（掌握）

选择相邻的元素，两个元素中间用 + 隔开：元素1 + 元素2{css样式}

5.伪类

元素:link 正常连接时候的状态

元素:visited 点击以后的状态

元素:hover 当鼠标移动上去的状态-------重点、常用

元素:active 当鼠标按下去时候的状态

注意：不是所有元素都支持这4种写法，超链接支持4种，工作中用的hover比较多，别的可以做个了解

六、伪类选择器和类选择器一起使用

八、属性选择器[多选常考]

1.[属性名]

选择具有该属性的元素

2.[属性=值]（重点）

选择具有该属性且等于该值的元素

3.[属性~=值]（了解）

选择具有该属性，且值中包含该值的元素

多学一招：元素属性的值可以有多个

注意：这种场景适用于一个属性名对应多个属性的值

4.[属性|=字符]（了解）

选择由连字符连接多个单词组成的属性值中的第一个单词

注意：这种场景适用于一个属性的值由连字符连接多个单词组成，且选择的是第一个

5.[属性*=值]（了解）

选择属性的值中包含当前的值的元素

九、css尺寸、行高属性

1.尺寸属性

a) 宽度

语法：width:值

取值：数字 + px/百分比/em -------------------------px代表像素，百分比代表浏览器宽度的百分比，em代表字符数

注意：1.div设置宽度为100%，其实和没设一样2.span标签设置宽度无效

b) 高度

语法：height:值

用法和宽度一样

注意：div不设高度，默认是0

2.行高

行高控制的是文字与文字之间的上下距离 （行距）

语法：line-height:值

多学一招：如果将标签的高度和行高设置成一样，那么这个标签里面的文字可以在这个标签里面垂直居中，两者结合使用可以让单行文字在标签内部水平垂直居中，工作中经常用于让文字垂直居中（将行高设为盒子的高度）

###font简写

font: font-style font-weight font-size/line-height font-family不建议修改顺序 并且不需要设置的属性可以不写 但是font-size和font-family必须指定，否则将不起作用