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)

三、字体样式图片示例：

四、代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #font_p1{
            font-family:"楷书";
        }
        #font_p2{
            font-size:35px;
        }
        #font_p3{
            font-style:italic;
        }
        #font_p4{
            font-weight:bold;
        }
        #font_p5{
            font: italic bold 40px "宋体";
        }
    </style>
</head>
<body>

<p id="font_p1">字体类型&#45;&#45;font-family</p>
<p id="font_p2">字体大小&#45;&#45;font-size</p>
<p id="font_p3">字体风格&#45;&#45;font-style</p>
<p id="font_p4">字体粗细&#45;&#45;font-weight</p>
<p id="font_p5">字体样式&#45;&#45;设置所有字体样式</p>

</body>
</html>

文本样式：

一、文本样式的概念及使用

①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	设置文本的装饰（下划线、上划线、删除线）

三、文本样式图片示例：

四、代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #text_p1{
            color:chartreuse;
        }
        #text_p2{
            text-align:center;
        }
        #text_p3{
            vertical-align:middle;
        }
        #text_p4{
            text-indent:20px;
        }#text_p5{
            line-height:100px;
         }
        #text_p7{
            text-decoration:none;
        }
        #text_p8{
            text-decoration:underline;
        }
        #text_p9{
            text-decoration:overline;
        }
        #text_p10{
            text-decoration:line-through;
        }

    </style>
</head>
<body>

<p id="text_p1">color--文本颜色</p>
<p id="text_p2">text-align--水平对齐方式</p>
<p id="text_p3">vertical-align--垂直对齐方式</p>
<p id="text_p4">text-indent--文本缩进</p>
<p id="text_p5">line-height--文本行高</p>
<p id="text_p6">text-decoration--以下是文本装饰：</p>
<p id="text_p7">text-decoration:nono--文本装饰-默认值</p>
<p id="text_p8">text-decoration:underline--文本装饰-下划线</p>
<p id="text_p9">text-decoration:overline--文本装饰-上划线</p>
<p id="text_p10">text-decoration:line-through--文本装饰-删除线</p>

</body>
</html>

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	鼠标单击未释放的超链接样式

三、超链接伪类的动画示例

四、超链接伪类代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*未单击访问时超链接样式*/
        p:link{
            color: chartreuse;
        }
        /*单击访问后超链接样式*/
        p:visited{
            color: pink;
        }
        /*鼠标悬浮其上的超链接样式*/
        p:hover{
            color:red;
        }
        /*鼠标单击未释放的超链接样式*/
        p:active{
            color: darkorange;
        }
    </style>
</head>
<body>

<p>超链接伪类</p>
</body>
</html>

列表样式：

一、列表样式的概念及使用

css：标签名{list-style：值}
五种值的表示方式：

①none：无标记符号
②disc：实心圆,默认类型
③circle：空心圆
④square：实心正方形
⑤decimal：数字

二、列表样式总结

列表样式	描述
none	无标记符号
disc	实心圆,默认类型
circle	空心圆
square	实心正方形
decimal	数字

三、列表样式图片示例

四、列表样式代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #list-style_ul1{
            list-style:nono;
        }
        #list-style_ul2{
            list-style:disc;
        }
        #list-style_ul3{
            list-style:circle;
        }
        #list-style_ul4{
            list-style:square;
        }
        #list-style_ul5{
            list-style:decimal;
        }
    </style>
</head>
<body>
<ol>
    <li id="list-style_ul1">list-style:nono--无标记符号</li>
    <li id="list-style_ul2">list-style:disc--默认类型（实心圆）</li>
    <li id="list-style_ul3">list-style:circle--空心圆</li>
    <li id="list-style_ul4">list-style:square--实心正方形</li>
    <li id="list-style_ul5">list-style:decimal--数字</li>
</ol>
</body>
</html>

网页背景：

一、网页背景的概念及使用

背景颜色：
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们不要吝啬亲爱的👍哟(＾Ｕ＾)ノ~ＹＯ！！如有问题，欢迎评论区批评指正😁