CSS系列之美化网页/span标签和div标签/字体样式/文本样式

最新推荐文章于 2024-06-13 23:29:27 发布

DOGIOOH

最新推荐文章于 2024-06-13 23:29:27 发布

阅读量7.5k

点赞数 5

分类专栏： CSS 文章标签： JavaWeb

本文链接：https://blog.csdn.net/yinyanyao1747/article/details/92851494

版权

CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

CSS系列之美化网页/span标签和div标签/字体样式/文本样式

01 span标签和div标签

span标签的作用
- 能让几个文字或者某个词语凸显出来
- 属于行内元素
div标签
- 属于块级元素

程序示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>span标签</title>

    <style>
        #a{
            font-size: 40px;
            color: red;
            font-weight: bold;
        }
        .b{
            font-size: 20px;
            color: black;
            font-weight: bold;
        }
        #c{
            font-size: 30px;
            color: red;
            font-weight: bold;
        }
        #d{
            font-size: 30px;
            color: red;
            font-weight: bold;
        }





    </style>


</head>
<body>

<p>
     <span class="b">你要批评指点四周风景，</span> <span id="a">你首先要爬上屋顶</span>
</p>

<div class="b">不以<span id="c">物</span>喜，不以<span id="d">己</span>悲</div>


</body>
</html>

运行结果

02 字体样式

常用字体样式设置

属性名	含义	举例
font-family	设置字体类型	font-family:“隶书”;
font-size	设置字体大小	font-size:12px;
font-style	设置字体风格	font-style:italic;
font-weight	设置字体的粗细	font-weight:bold;
font	在一个声明中设置所有字体	font:italic bold 36px “宋体”;

03 文本样式

常用文本样式设置

属性	含义	举例
color	设置文本颜色	color:#00C;
text-align	设置元素水平对齐方式	text-align:right;
text-indent	设置首行文本的缩进	text-indent:20px;
text-decoration	设置文本的装饰	text-decoration:underline;
vertical-align	设置文本对齐	vertical-align ：middle；
line-height	设置文本的行高	line-height:25px;

04 文本阴影

text-shadow属性在CSS2.0中出现，但迟迟未被各大浏览器所支持，因此在
CSS2.1中被废弃，如今在CSS3中得到了各大浏览器的支持
格式：

text-shadow：color（阴影颜色）x-offset(阴影水平位移) y-offset(阴影垂直位移) blur-radius(阴影模糊半径)

程序示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*用后代选择器给基础代码添加字体样式和文本样式*/
        .demo a{
            float: left; /*设置浮动*/
            display: block;/*设置元素的显示属性 block 元素会被显示为块级元素*/
            height: 50px;/*设置元素高度*/
            width: 50px;/*设置元素宽度*/
            border-radius: 10px;/*设置圆角边框*/
            background: antiquewhite;/*设置背景颜色*/
            color: white;/*设置文本颜色*/
            text-align: center;/*设置文本居中*/
            line-height: 50px;/*设置文本行高*/
            text-decoration: aliceblue;/*设置文本装饰*/
            margin: 5px;/*设置外边距*/
            font-family: "Courier New";/*设置字体类型*/
        }

    </style>


</head>
<body>


<p class="demo">

    <a href="" >1</a>
    <a href="" >2</a>
    <a href="" >3</a>
    <a href="" >4</a>
    <a href="" >5</a>
    <a href="" >6</a>
    <a href="" >7</a>
    <a href="" >8</a>
    <a href="" >9</a>

</p>


</body>
</html>

运行结果

DOGIOOH

关注

5
点赞
踩
22

收藏

觉得还不错? 一键收藏
0
评论
CSS系列之美化网页/span标签和div标签/字体样式/文本样式

CSS系列之美化网页/span标签和div标签/字体样式/文本样式01 span标签和div标签span标签的作用能让几个文字或者某个词语凸显出来属于行内元素div标签属于块级元素程序示例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"...
复制链接

扫一扫

专栏目录