CSS - 常用样式属性（字体、文本、背景相关、鼠标）

本文链接：https://blog.youkuaiyun.com/weixin_48728769/article/details/127494355

🌈个人主页：王子玉博客

🔆 收录专栏：HTML&CSS

❤️ 分享网站：《Python自学网》👉👉基础入门到逐步深入 | 适合新手入门到精通

体系课程：web开发、爬虫、自动化运维、自动化测试、GUI图形界面化
~~
🙏 如果觉得博主文章对你有所帮助的话，还望大家多多支持呀！关注 | 点赞 | 收藏 | 评论

HTML& CSS系列文章类目

内容序列	文章链接
HTML& CSS（1）	HTML与HTML5 知识点梳理总结
HTML& CSS（2）	CSS - 初识 css（DOM树、引入方式、书写规则）
HTML& CSS（3）	CSS - 选择器（一文了解全部选择器及用法）
HTML& CSS（4）	CSS - 深入了解（三大特性、css权重、属性值计算过程）

字体样式属性

font-size：字号大小

属性值可以是绝对单位，使用频率高，如px。也可以使用相对单位，如em，使用频率较少。

单位	解释说明
绝对单位：px	像素单位，以像素点为基础的（最常用）
相对单位：em	相对于当前对象内文本的字体尺寸

例子：

<div style="font-size: 16px">绝对单位：px</div>
<div style="font-size: 1em;">相对单位：em</div> 
/* 由于浏览器一般默认的字体大小是16px,所以.em的父元素body的字体大小是16px,name .em的1em相对于父元素body就是16px,所以.px和.em的字体大小一致 */

网页效果：

在这里插入图片描述

font-style：字体风格

正常（默认值）、斜体，倾斜

属性值：

属性值	解释说明
normal	默认值，标准的（不倾斜）
italic	斜体
oblique	倾斜，让没有斜体字的字体发生倾斜

注意：除了css实现字体斜体，还有标签i和em之外，但css是没有语义的

例子：

<div>默认：normal，可不设置 </div>
<div style="font-style: italic;">斜体：italic </div>
<div style="font-style: oblique;">倾斜：oblique </div>

网页效果：

在这里插入图片描述

font-weight：字体粗细

定义字体的粗细，属性值有normal、bold、lighter、bolder、100~900（100的整数倍）

属性值：

属性值	解释说明
normal	默认值，标准的（不加粗）
bold	加粗
lighter、bolder	细、粗（相对于父元素来说，一般不用）
数值：100-900 （100的整数倍）	100 - 400正常（400=normal ） 500-900加粗（700=bold) 习惯用数值表示

注意：字体加粗除了css外，还有标签b和strong，但是css是没有语义的

例子：

<div>默认：normal，可不设置 </div>
<div style="font-weight: bold;">加粗：bold </div>
<div style="font-weight: lighter;">细：lighter</div>
<div style="font-weight: bolder;">粗：bolder</div>
<div style="font-weight: 400;">数值：400</div>
<div style="font-weight: 700;">数值：700</div>

网页效果：

在这里插入图片描述

font-family：字体

1/正常使用

网页中常用的字体有宋体、微软雅黑、黑体、Arial 、 Helvetica 、 sans-serif等，为了照顾不同电脑的字体安装问题，尽量只使用宋体和微软雅黑字体。

Arial ：无衬线体
Helvetica：是西方最常用的一种字体
sans-serif 是一种通用字体族，末尾都加上它，保证前面设置的字体, 没找到时, 可以使用这个字体族的字体，每个人电脑上都是有的

一般网页字体设置大概这样：

font-family: "Microsoft YaHei",SimSun,SimHei,Arial,Helvetica,sans-serif

注意事项：

网页中正文字体一般使用14px+，尽量使用偶数字号，ie6老式浏览器支持奇数会有bug
中文字体名要加英文引号（单引号双引号都可），英文字体一般不加引号，如果需要同时设置英文字体和中文字体，那么英文字体必须在中文之前
如果字体中包含空格、#、$等特殊符号，那么字体就必须加引号，如 font-family: "Times New Roman"
在 CSS 中设置字体名称，尽量用英文字体名称或者Unicode编码，以免出现不匹配时的乱码错误，xp系统是不支持中文字体名称的
可以同时指定多个字体，之间用逗号隔开，表示如果浏览器不支持第一个字体就尝试下一个，直到找到合适的字体
尽量使用系统默认字体，保证用户在任何浏览器中都能正常显示

一般字体有：

字体名称	英文名称	Unicode编码
宋体	SimSun	\5B8B\4F53
新宋体	NSimSun	\65B0\5B8B\4F53
微软雅黑	Microsoft YaHei	\5FAE\8F6F\96C5\9ED1
黑体	SimHei	SimHei
楷体_GB2312	KaiTi_GB2312	\6977\4F53_GB2312
隶书	LiSu	\96B6\4E66

使用Unicode编码：font-family: "\5B8B\4F53"，表示设置字体为宋体。

例子：

<div style="font-family: 'Microsoft YaHei', SimSun，LiSu;">多个字体</div><!-- 双引号里面用单引号 -->
<div style="font-family: SimSun, '微软雅黑';">中英文字体</div>
<div style="font-family: SimSun;">宋体</div>
<div style="font-weight: 'Microsoft YaHei';">微软雅黑</div>
<div style="font-family: \5B8B\4F53;">Unicode编码：宋体</div>

网页效果：

在这里插入图片描述

2/ @font-face 自定义字体

需要的材料和步骤：字体文件、定义、使用

1、字体文件，如：my-font.ttf

2、定义：

@font-face {
	font-family: 'waykey';   /*  起个自己的字体名称，调用的是起的waykey名字*/
    src: url("./fonts/my-font.ttf");   /*指定字体文件的源路径*/
}

3、使用：

body{font-family: "waykey","sans-serif";}

3/ font：综合设置字体样式（重点）

用font综合设置字体的样式，属性值应按以下次序书写：

选择器{font: font-style font-weight font-size/line-height font-family;}

注意：

简写时，每个属性值之间用空格分开
样式和粗细可以交换，不影响
font-size和line-height只能通过斜杠/组成一个值，不能分开写
顺序不能改变.这种简写方法只有在同时指定font-size和font-family属性时才起作用

例子：

p{
    /* 单个写法： */
    font-size: 30px; /* 字号 */
    line-height: 1.6; /* 行高 */
    font-style: italic; /* 字体风格 */
    font-weight: bold; /* 字体粗细 */
    font-family: SimSun;  /* 字体 */

    /* 整体写法： */
    font: italic  bold  30px/1.6  SimSun;
    font: bold  30px  SimSun;
    font: 30px SimSun; 
}

文本样式属性

color：文本颜色

取值方式：

取值方式	及时说明
预定义颜色值	如：red、green、pink等英文单词
rgb()	三基色红绿蓝， r代表Red（红色），g代表Green（绿色），b代表Blue（蓝色），取值 0 - 255 ，用逗号分开。如，红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)
rgba()	带透明度，rgb同上，a代表不透明度，取值范围 0 - 1（css属性）
十六进制	如：##FFFFFF、##ff8822、#a6582a等十六进制缩写：#aaaaaa = #aaa，#aabbcc = #abc、#aabbbb = #abb
透明色：transparent	自己当前没有颜色，是一个透明色，可以穿透背景色

例子：

p{
    /* 颜色单词 */
    color:red; 

    /* rgb */ 
    color: rgb(0, 0, 0);     /* 黑色 */
    color: rgb(255, 0, 0);     /* 红色 */
    color: rgb(0, 255, 0);     /* 绿色 */
    color: rgb(0, 0, 255);     /* 蓝色 */
    color: rgb(255, 255, 255);     /* 白色 */


    /* rgba */ 
    color: rgb(0, 0, 0);   /* 完全透明 */
    color: rgba(0, 0, 0, 0.5);  /* 半透明 */
    color: rgba(0, 0, 0, 1);  /* 完全不透明  */

    /* #fffff  16进制   和   简写 */ 
    color: #000000;   /*  #000  */ 
    color: #ffaa66;   /*  #fa6  */
    color: #ee33ee;   /*  #e3e  */    
    color: #bbeeee;   /*  #bee; */ 

    /* 透明色  ：transparent */ 
    background-color: red;
    color: transparent; 
}

line-height：行间距

行与行之间的距离，也就是字符的垂直间距，一般叫做行高。

注意：

取值单位一般有三种：px 、% 、em
一般情况下，行距比字号大7 8像素左右就可以了

例子：

p{
    line-height: 20px;
    line-height: 1.6%; /*百分号可以省略 line-height: 1.6 */
    line-height: 2em;
}

text-align:水平对齐方式

设置文本内容的水平对齐，相当于html中的align对齐属性

属性值：

属性值	说明
left	左对齐，（默认值）
right	右对齐
center	居中

注意：

有足够的宽度才可以居中
行级元素不能水平居中，因为行级元素空间是用内容撑起来的没有多余空间（比如a元素 span元素）

例子：

p{
    text-align: left;
    text-align: right;
    text-align: center;
}

text-indent:首行缩进

设置首行文本的缩进

属性值单位：不同单位的数值、不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%。

注意：

允许使用负值
建议使用em作为单位（1em 就是一个字的宽度，如果是汉字的段落， 1em 就是一个汉字的宽度）

text-decoration：文本装饰

通常用于给链接修改装饰效果

属性值：

属性值	说明
none	默认，定义标准的文本（清除所有 text-decoration 样式）
overline	上划线
underline	下划线
line-through	中划线

注意：

清除超链接文本的下划线： text-decoration:none;
多个值可以使用空格拼接

例子：

p{
    text-decoration: underline; 
    text-decoration:  overline underline; 
}

背景相关属性

background-color：背景色

属性取值和上面定的color一样，这里不在说明，直接看上面就行

语法：

background-color : hex(16进制) | rgb |rbga...

注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响

background-image：背景图片（css3属性）

语法：

background-image : none | url (图片地址路径)

属性值：

属性值	说明
none	无背景图（默认的）
url()	使用绝对或相对地址指定背景图像

注意：如果背景图片太小, 不够标签尺寸，默认会自动复制图片进行完全填充

background-size：背景图片尺寸（css3属性）

语法：

background-size: length|percentage|cover|contain;

取值单位： px、 %、或通过cover和contain来对图片进行伸缩

参数：

length：第一个值width 、第二个值height 分别设置背景图片宽度和高度
percentage：以父元素的百分比来设置背景图像的宽度和高度
cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域
contain：把背景图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

注意：

第一个值设置宽度，第二个值设置高度
如果只设置一个值，则第二个值会被设置为 “auto”，图片会等比缩放

例子：

background-size:auto;        /* 默认值，不改变背景图片的高度和宽度 */
background-size:100px 50px;  /* 第一个值为宽，第二个值为高，当设置一个值时，将其作为图片宽度来等比缩放*/
background-size:10%;         /* 0％~100％之间的任何值，将背景图片宽高按百分比显示，当设置一个值的时也将其作为图片宽度来等比缩放 */
background-size:cover;       /* 将背景图片等比缩放填满整个容器 */
background-size:contain;      /* 将背景图片等比缩放至某一边紧贴容器边缘 */

background-repeat：背景平铺（是否重复图片, 以填充元素）

语法：

background-repeat : repeat | no-repeat |repeat-x | repeat-y

属性值：

属性值	说明
repeat	背景图片在纵向和横向上平铺（默认的）
no-repeat	背景图片不平铺
repeat-x	背景图片在横向上平铺
repeat-y	背景图片在纵向上平铺

注意：设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素

例子演示：

/*统一css代码，改变repeat属性值*/
div{
    width: 600px;
    height: 200px;
    background-size: 100px;
    background-color: pink;
    background-image: url(./1.jpg);
    /* background-repeat: no-repeat; */
}

默认平铺：图片尺寸小于容器尺寸

在这里插入图片描述

不平铺：no-repeat

在这里插入图片描述

横向上平铺：repeat-x

在这里插入图片描述

纵向上平铺：repeat-y

在这里插入图片描述

background-position：定位背景位置

语法：

background-position : x || y

属性值单位：数值、百分比%、方位名词

参数：

坐标	属性值
x坐标（水平方位名词）	left 、center 、right
y坐标（垂直方位名词）	top 、 center、 bottom

注意：

position 后面是x坐标和y坐标。可以使用方位名词或者精确单位
值为负数往反方向移动（如雪碧图定位值可以为负值）
如果只指定了一个值，该值将用于横坐标，纵坐标将默认为50%或canter
如果精确单位和方位名字混合使用，则必须是x坐标在前，y坐标后面
实际工作用的最多的是背景图片居中对齐

例子演示：

/*统一css代码，改变position属性值*/
div{
    width: 600px;
    height: 200px;
    background-size: 100px;
    background-color: pink;
    background-image: url(./1.jpg);
    background-repeat: no-repeat;
   /* background-position: right 50%; */
}

左上，默认：background-position: left top

在这里插入图片描述

左中：background-position: left center 或 left 50%

在这里插入图片描述

左下：background-position: left bottom

在这里插入图片描述

右上：background-position: right top

在这里插入图片描述

右下：background-position: right bottom

在这里插入图片描述

右中：background-position: right center 或 right 50%

在这里插入图片描述

居中：background-position：center 或 50%

在这里插入图片描述

background-attachment ：背景附着

语法：

background-attachment : scroll | fixed

参数：

scroll : 背景图片随着页面的滚动而滚动，这是默认的
fixed : 背景图片不会随着页面的滚动而滚动
local：背景图片会随着元素内容的滚动而滚动

background：背景简写

background属性的值的书写顺序官方并没有强制标准，为了可读性，建议顺序如下：

background: 背景图片地址背景平铺背景滚动背景位置/背景大小背景颜色

例子：

如下可写成：background: url(./1.jpg) no-repeat right 50%/400px pink;

div{
    width: 600px;
    height: 400px;
    background-size: 400px;
    background-color: pink;
    background-image: url(./1.jpg);
    background-repeat: no-repeat;
    background-position: right 50%;
}

注意：

遇到位置和尺寸大小都写的话，位置在前(先横后纵）/ 尺寸在后
属性值之间用空格隔开

cursor：鼠标样式属性

cursor:鼠标

属性值：很多… pointer 最常用

属性值合集

属性值	说明
url	需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由URL 定义的可用光标。
default	默认光标（通常是一个箭头）
auto	默认，浏览器设置的光标
crosshair	此光标呈现为十字线
pointer	此光标指示链接的指针（一只手）
move	此光标指示某对象可被移动
text	此光标指示文本
e-resize	此光标指示矩形框的边缘可被向右（东）移动
n-resize	此光标指示矩形框的边缘可被向上（北）移动
s-resize	此光标指示矩形框的边缘可被向下移动（南）
w-resize	此光标指示矩形框的边缘可被向左移动（西）
ne-resize	此光标指示矩形框的边缘可被向上及向右移动（北/东）
nw-resize	此光标指示矩形框的边缘可被向上及向左移动（北/西）
se-resize	此光标指示矩形框的边缘可被向下及向右移动（南/东）
sw-resize	此光标指示矩形框的边缘可被向下及向左移动（南/西）
wait	此光标指示程序正忙（通常是一只表或沙漏）
help	此光标指示可用的帮助（通常是一个问号或一个气球）
zoom-in	放大镜（兼容性问题，目前除了ie其他都支持）
zoom-out	放小镜（兼容性问题，目前除了ie其他都支持）
grab	抓手型（适合拖拽移动，兼容性问题，目前除了ie其他都支持）
grabbing	小抓手型（兼容性问题，目前除了ie其他都支持）