css样式（字体样式/文本样式/超链接伪类/列表样式/背景样式

第五章

一、字体样式

1、font-family字体的类型(一般不设置，默认为微软雅黑)

2、font-size 设置字体的大小

 px  字体默认为16px

em  父元素字体的大小*n 3em 就是设置的字体的大小（如果父元素是24 那2em就是48px）

rem  根元素字体的大小*n 3em 就是设置的字体的大小（ 一般根元素字体不是body而是html）

3、 font-style 设置字体的类型 （ 一般常用的有两个 normal 正常 和 italic 倾斜）

4、font-weight 设置字体的粗细 （ bold 加粗 数字用700表示）

简写方式

font 字体风格 字体粗细 字体大小 字体类型(其中风格，粗细可以省略)

一般都是设置字体大小

二、文本样式

1、color 设置字体颜色

 1、直接英语   red blue
 2、直接写16进制
 3、rgb 用于定义颜色的红、绿、蓝三种颜色的强度。每种颜色的值通常在 0 到 255 之间。   `rgb` 不包含透明度信息。
 4、rgba   rgba` 在 `rgb 的基础上增加了一个透明度（Alpha）值，用于定义颜色的透明      度。Alpha 值的范围是从 0 到 1，其中 0 代表完全透明，1 代表完全不透明。
 
一般直接qq截图，粘贴就行（ctrl+alt+a）

2、text-align 文本居中对齐

left right center

3、text-indent 首行缩进 （一般不用，不好看，使用内外边距设置最好）

4、line-height 设置文本行高（当文本行高和 原本行高一致时会居中）

height:50px
line-height :50px

5、text-decoration 设置文本装饰（一般使用在去除a标签的下划线）

照片和文本对齐只需要修改照片的
vertical-align属性：middle、top、bottom
选middle会进行对齐

6、文本阴影

text-shadow : color  x-offset  y-offset  blur-radius;
        color 颜色    x轴（用px）y轴（用px） 模糊半径（0-1）

三、超链接伪类

一、hover

当鼠标悬浮式显示出来的样式（用的最多）

  a:hover {
        color: #da0c0c; /* 棕红色 */
		text-decoration: underline; 悬浮时添加下划线

    }
还可以 li:hover span{
   color: #da0c0c; /* 棕红色 */
		text-decoration: underline; 悬浮时添加下划线
} 当鼠标悬浮在li时span的样式会怎么变化

四、列表样式

​ 最有用的就是list-style-type：none 去除ul、ol的样式

五、背景样式

一、background-color

设置背景的样式 颜色选择跟color的一样4种方式

二、背景图片

1、background-image

background-image: url(../img/jd/banner.png);

2、background-repeat (背景图片平铺不平铺)

repeat：沿水平和垂直两个方向平铺
no-repeat：不平铺，即只显示一次
repeat-x：只沿水平方向平铺
repeat-y：只沿垂直方向平铺
一般都是不平铺

3、background-position 背景定位

background-position背景定位 
X   Y可以写百分比50%
或left、center、right，
top、center、bottom


li{
    background-image: url(../img/beida/submenu.gif);
    background-repeat: repeat-y;
    background-position: center;
    background-size: 210px;
    border-bottom-style: solid;
    border-color: #9accf5;
}

4、background-size 背景图片大小

一般都不使用，因为会改变图片的比例

一般使用
background-size：100%
或者background-size：cover

5、简写方式

background: 颜色 图片路径 定位 平铺不平铺
没有特定的顺序，但是要符合逻辑
background-size不参与简写

6、线性渐变linear-gradient

linear-gradient ( position,  color1,  color2,…)
可以左到右、上到下 、左对角线到右下对角线
background: linear-gradient(to bottom,#a6a6f4,#F5F5FF );
 不同的浏览器需要考虑兼容性

( position, color1, color2,…)
可以左到右、上到下 、左对角线到右下对角线
background: linear-gradient(to bottom,#a6a6f4,#F5F5FF );
不同的浏览器需要考虑兼容性

[外链图片转存中...(img-Cys2DP7D-1723283152569)]