CSS选择器的常见用法

CSS：层叠样式表

功能：能够对网页中元素位置的排版进行像素级精确控制。实现美化页面的效果，做到页面的样式和结构分离。

CSS要写到style标签中（后面还会介绍其他写法）

style标签一般放在head标签内

CSS中的注释方法是使用 /* */

一般使用选择器执行CSS，基本的结构如下：

 

一、CSS的引入方式：

1.内部样式表：写在style标签中，嵌入到html内部，一般放在head标签中。

2.行内样式表（内联样式）：通过style属性，不用写选择器，来指定某个标签的样式，这种写法优先级在三者中最高，会覆盖其他样式。

3.外部样式：先创建一个CSS文件，再使用ｌｉｎｋ标签引入CSS。

二、代码风格：推荐 展开式风格

三、选择器

１、选择器的功能：

　 选中页面中指定的标签元素。

２、选择器的种类：

１）基础选择器：

ａ．标签选择器

特点：能快速为同一类型的标签都选择出来；但是不能差异化选择。（效果如图，对应标签元素被对应的标签选择器选中）

ｂ．类选择器

特点：差异化表示不同的标签；可以让多个标签都使用同一个选择器。（如图所示，通过class标签对类选择器进行使用，多个类选择器同时使用时，中间用空格分隔开，定义类选择器时，前面需要添加．，但在使用时，不需要添加，之接调用名字即可）

类选择器的优先级高于标签选择器。

ｃ．id选择器

由于每一个HTML中id是唯一的，所以id选择器，具有唯一性，不可能被多个标签使用。（开头使用＃，表示id选择器）

id选择器的优先级高于类选择器。

优先级排序：id选择器>类选择器>标签选择器

ｄ．通配符选择器

使用＊表示，通配符选择器特殊情况用来选中页面中的所有元素。

２）复合选择器

ａ．后代选择器

元素１　元素２　．．．｛样式声明｝

（元素之间用空格分隔，也可以和基础选择器组合使用，儿子孙子，只要是后代都可以选）

ｂ．子选择器

元素１＞元素２｛样式声明｝

（使用大于号分割，只选儿子，不能选其他）

ｃ．并集选择器

元素１，元素２　｛样式声明｝

表示同时选中元素１和２。

ｄ．链接伪类选择器

 

四、常见元素属性

１、字体属性：

１）设置字体：

 ２）设置大小：

 ３）设置粗细：

 ４）文字样式：

 

２、文本属性：

１）文本颜色：

２）文本对齐：

控制文字水平方向的对齐

ｔｅｘｔ－ａｌｉｇｎ：ｃｅｎｔｅｒ／ｌｅｆｔ／ｒｉｇｈｔ；

对于行内元素不能设置，因为行内元素的宽不能改变。

３）文本装饰：

ｔｅｘｔ－ｄｅｃｏｒａｔｉｏｎ：值；

４）文本缩进：

ｔｅｘｔ－ｉｎｄｅｎｔ：值；

５）行高：

ｌｉｎｅ－ｈｅｉｇｈｔ：值；

行高＝上边距＋下边距＋字体大小

３、背景属性：

１）背景颜色：

ｂａｃｋｇｒｏｕｎｄ－ｃｏｌｏｒ：颜色；

２）背景图片：

 ３）背景平铺：

 ４）背景位置：

 ５）背景尺寸：

 

五、圆角矩形

１、基本用法：

２、生成圆形：

让ｂｏｒｄｅｒ－ｒａｄｉｕｓ的值为正方形边长的一半，或者５０％

３、生成圆角矩形：

值设为ｈｅｉｇｈｔ的一半

 

六、块级元素和行内元素

 

七、盒模型

每一个HTML元素就相当于一个矩形的＇盒子＇

由边框，内容，内边距，外边距构成

１、边框：

１）基础属性：

 

２、边框会撑大盒子：

正常情况下，在设置了边框后，盒子的面积就等于原始面积＋边框面积

我们可以通过box－sizing属性，修改浏览器的行为，是边框不再撑大盒子。（利用通配符选择器）

 

３、内边距：padding设置内容和边框之间的距离

(只是单纯设置内容和边框的距离，不像边框可以设置粗细，风格，颜色）

 

４、外边距：

注：

外边距还有一个特殊的用法：

设置元素水平居中：margin： 0 auto；

规定只能设置水平居中，不能设置垂直居中，只有0 auto一种写法。

八、弹性布局

添加父盒子display：flex属性，来控制子盒子的位置和排列方式。添加后元素失去原有的块级元素或行内元素的性质，变为弹性元素。

加上display：flex，对于行内元素而言，行内元素变为弹性元素，宽度生效，高度就默认和父元素一样高了，也可以手动指定高度和宽度。

常见的属性：

１、justify－content

 ２、align－items（描述侧轴上的排列方式）（侧轴是和主轴垂直的方向）