HTML中的CSS超详细使用(附代码图文示例)【干货】

2023-12-15 21:29:38

?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。

超链接伪类:

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

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

  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?鼠标单击未释放的超链接样式
三、超链接伪类的动画示例

四、超链接伪类代码演示
<!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们不要吝啬亲爱的👍哟(^U^)ノ~YO!!如有问题,欢迎评论区批评指正😁

文章来源:https://blog.csdn.net/Jin_Xiang123/article/details/135023559
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。