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。

超链接伪类：

一、超链接伪类的概念及使用

    标签名:伪类名{声明;}
    伪类样式：

1. -标签：link        未单击访问时超链接样式/示例：标签:link{color:#eaadea/pink}
2. -标签：visited     单击访问后超链接样式/示例：标签:visited{color:#eaadea/pink}
3. -标签：hover       鼠标悬浮其上的超链接样式/示例：标签:hover{color:#eaadea/pink}
4. -标签：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们不要吝啬亲爱的哟(＾Ｕ＾)ノ~ＹＯ！！如有问题，欢迎评论区批评指正