HTML学习笔记（5）-CSS选择器补充

CSS

选择器补充

通用选择器
E,F{  /*E和F通用的样式*/

}

div,p,h1,h2,h3,h4,.box,#wrap,.box div{
	color:red;
}

CSS3伪元素

在css3中，通过css伪元素能够为每一个标签设置前缀和后缀。

E::before{ /*标签的前缀*/
    content:''; /*content属性不能省略*/
}

E::after{ /*标签的后缀*/
    content:'显示的文本';
}

伪元素默认是一个内联元素。

常见的布局标签

<div></div>
<span></span>

这种常见的布局标签不包含任何样式，所有的样式都需要用户自己定义。
唯一的区别：

1. div标签会独占一行排列，div标签能设置宽高
2. span标签默认横向排列，span标签宽高为auto*auto,由内容撑起高度

1. 字体样式

大多数浏览器中，默认字体大小为16px，主流浏览器默认字体类型为微软雅黑，如果mac系统，则字体默认为果平方，低版本的IE浏览器默认字体为宋体。

对字体设置：字体大小，字体类型，字体粗细，字体风格

• font-size

  字体大小，单位有：px，em,rem等。大多数浏览器默认的字体大小为16px，因此1em=16px。
  如果开发的页面只在PC中访问，就用px；
  如果开发的页面既能在PC访问，也能在手机访问，就用rem
  在开发微信小程序时，人家有特有的rpx,和rem类似。

• font-weight
  字体粗细，normal 和 bold是常用值，normal为默认，bold加粗显示

• font-style
  字体风格，italic，字体倾斜显示。默认为normal，字体正常显示

• font-family

  字体类型，主流浏览器默认字体为微软雅黑。IE浏览器默认为宋体。

选择器{
    font-size:16px;/*大多数浏览器默认的字体大小为16px*/
    font-weight:bold; /*字体加粗，等价于<strong></strong>*/
    font-style:italic; /*字体倾斜显示<em></em>*/
    font-family:"time new roman","微软雅黑";
}

2. 文本样式

属性	含义	举例
color	设置文本颜色	color:#00C;
text-align	设置元素水平对齐方式	text-align:right;
text-indent	设置首行文本的缩进	text-indent:20px;
line-height	设置文本的行高	line-height:25px;
text-decoration	设置文本的装饰	text-decoration:underline;

color

表示字体颜色。有多种表示方式

color: darkred; /*简单的颜色，用英文单词表示*/
color: #A5FA5F; /*复杂的颜色用十六进制表示，0-9,A-F，*/
color: rgb(235,5,25); /*通过三原色表示。0-255,0-255,0-255*/
color: rgba(235,5,25,0.5);/*通过三原色加透明度表示，透明度取值范围：0-1  1代表不透明   0代表完全透明*/

text-align

文本水平对齐方向；

text-align:left; /*默认值，文本靠左对齐*/
text-align:center; /*文本居中对齐*/
text-align:right; /*文本靠右对齐*/
text-align:justify;/*多行文本时，文本靠两侧对齐*/

text-indent

设置文本首行缩进，正数靠右缩进，负数靠左缩进。

text-indent: 20px; /*文本首行缩进20像素*/

line-height

行高。行高代表每行文本所占的高度。

line-height:21px; /*当字体为16px时，行高默认为21px。*/

text-decoration

文本修饰；文本下划线，上横线，删除线。

text-decoration:none; /*去除文本修饰，比如a标签去除下划线*/
text-decoration:overline; /*上横线*/
text-decoration:linethrough;/*删除线*/
text-decoration:underline; /*下划线*/

/*去除所有a标签的下划线*/
a{
    text-decoration:none;
}

vertical-align

设置垂直对齐方式；top上对齐，middle垂直居中，bottom底部对齐。当图片和文本没有垂直居中显示时，可以通过这个属性实现。

vertical-align:top;
vertical-align:middle;
vertical-align:bottom;

text-shadow

为文本设置阴影；阴影的分布分为垂直方向和水平方向；

/*
	x-offset: 阴影在水平方向的偏移量；正数阴影向右，负数向左
	y-offset: 阴影在垂直方向的偏移量；正数向下，负数向上
	blur： 阴影模糊范文
	color： 阴影颜色
*/
text-shadow:x-offset y-offset blur color;
text-shadow:1px -1px 3px rgba(0,0,0,0.5);

3. 伪类样式

早期，为了使超链接标签能够提供更多的用户体验，出现了伪类样式。

伪类名称	含义	示例
a:link	未单击访问时超链接样式	a:link{color:#9ef5f9;}
a:visited	单击访问后超链接样式	a:visited {color:#333;}
a:hover	鼠标悬浮其上的超链接样式	a:hover{color:#ff7300;}
a:active	鼠标单击未释放的超链接样式	a:active {color:#999;}

选择器:hover{/*hover为悬浮的意思，为这个选择器对应的标签添加鼠标悬浮的样式*/
    
}

4. 列表样式

有序列表以及无序列表的列表项默认是具有项目符号的。通过列表样式可以修改列表的项目符号。

list-style-type

设置列表项目符号的种类。相当于标签中的type属性。

list-style-type:none;/*去除项目符号*/
/*简写*/
list-style:none;

list-style-image

使用图标作为列表的项目符号

list-style-image:url(路径);

list-style-position

使项目符号显示在列表内还是在列表外;

list-style-position:outside; /*默认值*/
list-style-position:inside; /*项目符号显示在列表之内*/

5. 背景

通过背景样式可以设置背景颜色，背景图片，背景图片偏移量，背景图片重复方式。与背景相关的还包括背景尺寸。

background-color

背景颜色。

background-color:gray;
background-color:#000;
background-color:rgb(0,0,0);
background-color:rgba(0,0,0,0.5);

background-image

设置背景图片

background-image:url(路径);
background-image:url(images/hello.jpg);

background-repeat

控制背景图片重复方式。当背景图片比盒子小时，背景图片默认会沿着水平方向以及垂直方向重复显示。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UCxhmMGZ-1624786305313)(images/1.png)]

background-repeat:repeat; /*默认值，默认沿着水平已经垂直方向重复显示*/
background-repeat:repeat-x; /*仅横向重复显示*/
background-repeat:repeat-y; /*仅纵向重复显示*/
background-repeat:no-repeat; /*不重复显示*/

background-position

背景图片显示位置。
背景图片默认顶着盒子的左上方显示。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lkiYTe5E-1624786305317)(images/2.png)]

通过background-position可以让图片显示在页面中任意的位置。
水平方向：left ,center,right
垂直方向：top,center,bottom

/*
x-offset:图片在水平方向的显示位置
y-offset:图片在垂直方向的显示位置
background-position:x-offset y-offset;
*/
background-position:right center;/*水平靠右，垂直居中*/
background-position:center; /*正中央显示*/
background-position:50%; /*等价于center*/
background-position:100px 100px; /*通过像素精确定位位置*/

background-size

定义背景大小。

属性	描述
auto	默认值，背景图片会按照其原始大小显示
percentage	自定义百分比显示图片大小
cover	优先使背景图片填充整个盒子，背景图片可能被裁切（填满盒子）
contain	（显示完整的背景图片）

background-size:cover;
background-size:contain;
background-size:100%; /*背景图片显示比例。*/
background-size:100px 200px;/*宽度显示100px，高度显示200px*/

6. 渐变

css3中，为背景色添加了渐变色的能力。
渐变分为线性渐变和径向渐变两种。渐变除了实现颜色的渐变以外，也能够利用它来绘制特殊图形。

线性渐变

background-image:linear-gradient(方向,颜色1，颜色2，颜色n);
.box1{
    /*从左往右进行背景色的渐变*/
    background-image: linear-gradient(to right,#000,red,yellow);
    background-image: linear-gradient(90deg,#000,red,yellow);/*等价于to right*/
}

径向渐变

以辐射的方式向外扩散背景色。

radial-gradient(ellipse|cicle,颜色1，颜色2，颜色n);

und-image:linear-gradient(方向,颜色1，颜色2，颜色n);
.box1{
/从左往右进行背景色的渐变/
background-image: linear-gradient(to right,#000,red,yellow);
background-image: linear-gradient(90deg,#000,red,yellow);/等价于to right/
}

### 径向渐变

以辐射的方式向外扩散背景色。

```css
radial-gradient(ellipse|cicle,颜色1，颜色2，颜色n);