HTML中的CSS超详细使用（附代码图文示例）【干货】
Hi i,m JinXiang
⭐ 前言 ⭐
本篇文章主要介绍HTML中的CSS详细使用（附代码图片示例）以及部分理论知识
🍉欢迎点赞 👍 收藏 ⭐留言评论 📝私信必回哟😁
🍉博主收将持续更新学习记录获，友友们有任何问题可以在评论区留言
目录
⭐为什么使用CSS：
⭐CSS中的样式使用
🍧字体样式：
一、字体样式的概念及使用
二、字体样式总结
三、字体样式图片示例：
四、代码示例：
🍧文本样式：
一、文本样式的概念及使用
二、文本样式总结
三、文本样式图片示例：
四、代码示例
🍧CSS中的文本阴影：
🍧超链接伪类：
一、超链接伪类的概念及使用
二、超链接伪类总结
三、超链接伪类的动画示例
四、超链接伪类代码演示
🍧列表样式：
一、列表样式的概念及使用
二、列表样式总结
三、列表样式图片示例
四、列表样式代码示例
🍧网页背景：
一、网页背景的概念及使用
二、网页背景总结
为什么使用CSS：
CSS（层叠样式表）是一种用来描述网页上元素样式的技术。使用CSS的主要原因包括以下几点：
①有效的传递页面信息②使用CSS美化网页使网页漂亮、美观、吸引用户③可以很好的突出页面的主题内容，使用户第一眼可以看到页面主要内容④具有良好的用户体验
CSS中的样式使用
字体样式：
一、字体样式的概念及使用
①font-family：设置字体类型/举例：font-family："楷书"②font-size：设置字体大小(单位：px(像素)、em、rem、cm、mm、pt、pc)/举例：font-size：12px③font-style：设置字体风格(normal(默认标准)、italic(倾斜)和oblique(倾斜))/举例：font-style：italic④font-weight：设置字体的粗细
normal：默认值,定义标准字体bold：粗体字体bolder：更粗的字体lighter：更细的字体100、200……900(步长100)：定义由细到粗的字体,400等同于normal,700等同于bold举例：font-weight：bold⑤foot：在一个声明中设置所有字体属性
字体属性的顺序：字体风格->字体粗细->字体大小->字体类型
举例： foot：italic bold 12px "楷书";
二、字体样式总结
字体样式描述font-family设置文本的字体类型("楷书")font-size设置文本的字体大小（单位：px、em、rem、cm）font-style设置字体风格(normal(默认标准)、italic(倾斜)和oblique(倾斜))font-weight设置文本的字体粗细（默认(normal)、粗体(bold)、更细(lighter)、步长(400)）foot风格(style)、粗细(weight)、大小(size)、类型(family)
三、字体样式图片示例：
四、代码示例：
字体类型--font-family
字体大小--font-size
字体风格--font-style
字体粗细--font-weight
字体样式--设置所有字体样式
文本样式：
一、文本样式的概念及使用
①color：设置文本颜色②text-align：设置元素水平对齐方式
left：左对齐,默认值right：右对齐center：居中justify：实现两端对齐文本效果③vertical-align：设置元素垂直对齐方式
top：顶部middle：中部bottom：底部③text-indent：设置首行文本的缩进(单位px或em)/举例：text-indent:20px④line-height：设置文本的行高(单位px)/举例：line-height:25px⑤text-decoration：设置文本的装饰
none：默认值,定义的标准文本underline：设置文本的下划线overline：设置文本的上划线line-through：设置文本的删除线
二、文本样式总结
文本样式描述color设置文本颜色text-align设置元素水平对齐方式（左、右、居中、两端）vertical-align设置元素垂直对齐方式（顶部、中部、底部）text-indent设置首行文本的缩进(单位px或em)line-height设置文本的行高(单位px)text-decoration设置文本的装饰（下划线、上划线、删除线）
三、文本样式图片示例：
四、代码示例
color--文本颜色
text-align--水平对齐方式
vertical-align--垂直对齐方式
text-indent--文本缩进
line-height--文本行高
text-decoration--以下是文本装饰：
text-decoration:nono--文本装饰-默认值
text-decoration:underline--文本装饰-下划线
text-decoration:overline--文本装饰-上划线
text-decoration:line-through--文本装饰-删除线
CSS中的文本阴影：
text-shadow：color(阴影颜色) x-offset(X轴位移,用来指定阴影水平位移量) y-offset(Y轴位移,用来指定阴影垂直位移量) blur-radius(阴影模糊半径,代表阴影向外模糊的模糊范围)/X轴、Y轴和半径单位都为px。
超链接伪类：
一、超链接伪类的概念及使用
标签名:伪类名{声明;} 伪类样式：
-标签：link 未单击访问时超链接样式/示例：标签:link{color:#eaadea/pink}-标签：visited 单击访问后超链接样式/示例：标签:visited{color:#eaadea/pink}-标签：hover 鼠标悬浮其上的超链接样式/示例：标签:hover{color:#eaadea/pink}-标签：active 鼠标单击未释放的超链接样式/示例：标签:active{color:#eaadea/pink}
设置伪类的顺序：link > visited > hover > active
二、超链接伪类总结
伪类样式描述link未单击访问时超链接样式visited单击访问后超链接样式hover鼠标悬浮其上的超链接样式active 鼠标单击未释放的超链接样式
三、超链接伪类的动画示例
四、超链接伪类代码演示
超链接伪类
列表样式：
一、列表样式的概念及使用
css：标签名{list-style：值} 五种值的表示方式：
①none：无标记符号②disc：实心圆,默认类型③circle：空心圆④square：实心正方形⑤decimal：数字
二、列表样式总结
列表样式描述none无标记符号disc实心圆,默认类型circle空心圆square实心正方形decimal数字
三、列表样式图片示例
四、列表样式代码示例
- list-style:nono--无标记符号
- list-style:disc--默认类型（实心圆）
- list-style:circle--空心圆
- list-style:square--实心正方形
- list-style:decimal--数字
网页背景：
一、网页背景的概念及使用
背景颜色： background-color：颜色值背景图像： 标签名{background-image: url("图像路径")}背景重复方式： 标签名{background-image: url("图像路径");background-repeat: 属性} 四种属性表示方式：
①repeat：沿水平和垂直两个方向平铺②no-repeat：不平铺，即只显示一次③repeat-x：只沿水平方向平铺④repeat-y：只沿垂直方向平铺
背景定位： 标签名{background-image: url("背景图像.png");background-position: 值 值} 三种值表示方式：
①X Y：单位：px，Xpos表示水平位置，Ypos表示垂直位置②X% Y%：使用百分比表示背景的位置③X、Y方向关键词：X水平方向的关键词：left、center、right;Y垂直方向的关键词：top、center、bottom
设置背景属性样式简写： 标签名{background: 背景颜色 背景图像 背景重复方式 背景定位} 示例：#id{background: pink url("背景图像.png") no-repeat center center}背景尺寸： 标签名{background-image: url("背景图像.png");background-size：值}
四种值表示方式：
①auto：默认值，使用背景图片保持原样②percentage：当使用百分值时，不是相对于背景的尺寸大小来计算的，而是相对于元素宽度来计算的③cover：整个背景图片放大填充了整个元素④contain：让背景图片保持本身的宽高比例，将背景图片缩放到宽度或者高度正好适应所定义背景的区域
背景渐变(线性渐变)： 标签名{background: linear-gradient(渐变方向, 第一种颜色,第二种颜色……)} 示例：{background: linear-gradient(to left, blue,red)}
二、网页背景总结
网页背景样式描述background-color背景颜色background-image: url("图像路径")背景图像background-repeat 背景重复方式
background-position背景定位（X Y、X% Y%、X、Y方向关键词）background-size背景尺寸（默认、百分百、放大填充、自适应比例）linear-gradient背景渐变（线型渐变）
总结不易，希望uu们不要吝啬亲爱的👍哟(＾Ｕ＾)ノ~ＹＯ！！如有问题，欢迎评论区批评指正😁