🌈个人主页：王子玉博客
🔆 收录专栏：HTML&CSS
❤️ 分享网站： 《Python自学网》👉👉基础入门到逐步深入 | 适合新手入门到精通
体系课程：web开发、爬虫、自动化运维、自动化测试、GUI图形界面化
~~
🙏 如果觉得博主文章对你有所帮助的话，还望大家多多支持呀！关注 | 点赞 | 收藏 | 评论
HTML& CSS系列文章类目
文章目录
字体样式属性font-size：字号大小font-style：字体风格font-weight：字体粗细font-family：字体1/正常使用2/ @font-face 自定义字体3/ font：综合设置字体样式（重点） 文本样式属性color：文本颜色line-height：行间距text-align:水平对齐方式text-indent:首行缩进text-decoration：文本装饰 背景相关属性background-color：背景色background-image：背景图片（css3属性）background-size：背景图片尺寸（css3属性）background-repeat：背景平铺（是否重复图片, 以填充元素）background-position：定位背景位置background-attachment ：背景附着background：背景简写 cursor：鼠标样式属性属性值合集自定义光标字体样式属性
font-size：字号大小
属性值可以是绝对单位，使用频率高，如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：字体风格
正常（默认值）、斜体，倾斜
属性值：
注意：除了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的整数倍）
属性值：
注意：字体加粗除了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编码：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：文本颜色
取值方式：
例子：
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对齐属性
属性值：
注意：
有足够的宽度才可以居中行级元素不能水平居中，因为行级元素空间是用内容撑起来的没有多余空间（比如a元素 span元素）
例子：
p{text-align: left;text-align: right;text-align: center;}
text-indent:首行缩进
设置首行文本的缩进
属性值单位：不同单位的数值、不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%。
注意：
允许使用负值建议使用em作为单位（1em 就是一个字的宽度 ，如果是汉字的段落， 1em 就是一个汉字的宽度）
text-decoration：文本装饰
通常用于给链接修改装饰效果
属性值：
注意：
清除超链接文本的下划线 ：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 (图片地址路径)
属性值：
注意：如果背景图片太小, 不够标签尺寸 ， 默认会自动复制图片进行完全填充
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
属性值：
注意：设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素
例子演示：
/*统一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
属性值单位： 数值、百分比%、方位名词
参数：
注意：
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 最常用
属性值合集
自定义光标
创建的鼠标文件格式是.cur或.ico，通过cursor属性来调用，格式如下：
cursor:url(路径地址);
注意：
当浏览器不支持光标图片或光标文件不能正常加载时，大多数浏览器要求必须指定一个备用的光标，否则cursor属性无效。如：
cursor:url(路径地址),pointer;
