CSS相关修改样式、伪类样式

一、css颜色

1.颜色表示法：

直接以单词来表示颜色，如red，green。

2.十六进制表示法：（常用）

以#开头的6位十六进制数，如#000000（#000）。

3.RGB三原色表示法：（常用）

使用rgb（）函数，范围0-255，如rgb（255,255,255），分别表示红，绿，蓝。

二、背景样式

1.background-color：标签背景颜色，值为三种颜色表示法。

2.background-image：标签背景图片，使用url（）函数，引入文件地址。文件地址用“ ”或' '。

3.background-repeat:背景图片平铺方式，值repeat重复填充，no-repeat不重复。

（不平铺的效果）

动态图片不能用来当背景。

4.background-size：背景图片在标签中的大小，若图片比标签大，部分图片会缺失。

值用空格隔开，分别设置x，y方向的相对位置。

contain：y轴高度占满；cover：x轴宽度占满。

5.background-position：背景图片在标签中的相对位置，

值用空格隔开，分别设置x，y方向的相对位置。（%单位仅在background-size:auto时有效）

三、精灵图

精灵图就是把很多的小照片合并到一张较大的图片里。

/* 指定精灵图宽度为30px，位置在标签的最右边 */
background-image: url("./../imgs/sprite.png");
background-size: 30px auto;
background-postion: 100% 0;

四、边框样式

1.border-style：指定标签边框样式，不指定就会看不到

①none：无边框

②solid：实线

③dotted：虚线

2.border-width：设置边框宽度。

3.border-color：设置边框颜色。

4.border-radius:边框圆角。指定50%时，设置成一个圆。

/* 指定四个角 */
border-radius: 10px;
/* 指定左上、右上角，其余角与其对角相同 */
border-radius: 10px 15px;
/* 指定左上、右上、右下角，其余角与其对角相同 */
border-radius: 10px 15px 20px;
/* 分别指定4个角 */
border-radius: 10px 15px 20px 25px;
/* 指定一个圆 */
border-radius: 50%;

五、字体样式

1.font-family:指定文本的字体。

2.font-size：指定文本的字体大小，单位为px。

3.font-weight：字体的粗细。700=bold

六、文本样式

1.text-decoration：文本装饰

①underline：下划线（a-href标签自带下划线）

②line-through：中划线

③overline：上划线

2.text-align：文本水平对齐方式

①text-align：left左对齐

②text-align：center居中

③text-align：right右对齐

3.text-index：文本首行缩进

px：以1像素为单位缩进；em：以1字为单位缩进。

4.line-height：文本行高默认值1.2倍比文字高度，会增大行间距。

若设置的高度和标签高度相同，会有垂直居中的效果。

七、伪类

1.选择器：hover，鼠标悬浮来指定样式。

使用格式：.btn:hover{
    background-color:blue;
}

2.选择器：active，鼠标点击时指定样式。

.btn:active{
    background-color:blue;
}

使用hover或active来更改其他元素样式时，

若为父子关系，则用空格隔开；若为相邻关系，则用+或～

（前面元素来改后面元素，不能由后面元素来更改前面元素）

代码如下：

实现效果：

3.选择器nth-child（)：通过简单数字公式，正序只更改选择器匹配中的元素。

值：①数字：设置指定位置元素的样式。

②n+a：设置第a个元素的样式。

③an+b：设置符合表达式元素的样式。如奇数序号2n+1；偶数序号2n-1。

/* 设置第二个起标签样式 */
div:nth-child(n + 2){
    color:blue;
}

/* 设置奇数个样式 */
div:nth-child(2n + 1){
    color:blue;
}

 实现效果：

4.选择器nth-last-child（）：逆序更改元素。

八、伪元素

1.选择器before：可以在标签前添加内容

2.选择器after：在文本后添加内容

格式如下：

实现效果：