HTML + CSS 宝典（五. CSS基础----更多的样式）

Posted 2023-04-15

参考技术A

使用cursor设置

也可以设置图片cursor:url()，图片格式必须为.ico或.cur。

可以用visibility来控制图标或字体的闪烁

img元素是属于html的概念

背景图属于css概念

所以img和背景图的使用主要取决于内容

默认情况下，背景图会在横坐标和纵坐标中进行重复

预设值：contain、cover，类似于object-fit

数值或百分比

设置背景图的位置

预设值：left、bottom、right、top、bottom

数值或百分比：数字可以是负数

雪碧图（精灵图）（spirit）: 需要小图标合并成一张大图片，大图片就是雪碧图

通常用它控制背景图是否固定。

fixed: 此时背景图是相对于视口的

五、css基础(二)

参考技术A

1.文本类属性

① 字体类型

语法：font-family:字体1,字体2,字体3...;

设置多个字体时，浏览器会优先识别字体1，找不到则识别字体2，都无法识别时，显示浏览器默认字体。

② 字体大小

语法：font-size:数值+单位;

字体大小单位有px、em、rem、pt；浏览器默认大小为16px；字体大小一般设置为偶数值；谷歌浏览器识别最小字体为12px。

③ 字体加粗

属性值：normal常规、bold加粗、bolder更粗、100-900数值

数值100-900字体加粗程度不同，其中100-500为常规字体，600-900为加粗字体。

④字体颜色

颜色值写法有三种：直接写颜色单词，如red；十六进制写法，如color:#000；rgb写法 ，color:rgb(0,0,0);

⑤字体倾斜

⑥复合写法

font:字体大小/行高 字体类型;

⑦行高

语法: line-height:数值+单位;

数值不能为负值

⑧水平对齐方式

语法：text-align:left; 左对齐

text-align:center 居中

text-align:right 右对齐

text-align:justify 两端对齐，只对英文起作用

⑨文本修饰

text-decoration:none; 去掉文本修饰，可去掉超链接(对a标签使用)的下划线

text-decoration:underline; 下划线

text-decoration:overline; 上划线

text-decoration:line-through; 删除线

文本缩进

text-indent:数值+单位;

数值为正向后缩进，负值向前缩进

强制在一行显示

white-space:nowrap;

长单词换行

word-warp:break-word;

2.背景类属性

语法：background-color:颜色值;

属性值同字体颜色属性值相同用法

语法：background-image:url(图片路径);

语法：background-position:left；

水平方向：left、center、right

垂直方向：top、center、bottom

属性值为数值时，水平方向向右为正，向左为负，垂直方向向下为正，向上为负。水平和垂直方向都居中时可写background-position:center;

background-attachment:scroll;

属性值：scroll 默认值；fixed 固定

当容器出现滚动条时，背景图固定不滚动，可设置为fixed。

语法：background-repeat:repeat;

属性值：repeat平铺；no-repeat；repeat-x横向平铺；repeat-y纵向平铺。

background:背景图 背景平铺 背景位置

background:url(13211.jpg) no-repeat right bottom;

3.列表属性

语法：list-style-type:disc;

属性值：disc实心圆；circle空心圆；square实心方块；decimal数字；none去除列表符号。

4.伪类选择器

语法： 选择符:hover属性:属性值;

超链接a标签的四个状态：

a) a:link 超链接的初始状态，链接没有被访问过时的状态

b) a:visited 链接访问过后的状态

c) a:hover 鼠标悬停在超链接上的状态（鼠标滑过）

d) a:active 超链接被激活时的状态（鼠标按下）