文本属性

文本格式化属性

    3.字体样式  <i></i>

        1.属性

            font-style:

        2.取值

            1.normal(默认的)  正常显示

            2.italic   斜体

<style>p{
font-style: italic;
/*font-style默认、;normal(正常显示无特殊作用)*/

}
p{
font-style: normal;

}
</style>
斜体样式:<p>这段文字用css展现斜体。hello,html!</p>
正常显示:<div>这是段正常显示的字体</div>

文本属性

    1.文本颜色

        color:颜色值;

p{
color: pink;


}
</style> 
</head>
<body>
文本颜色:<p>这段文字颜色会变成骚粉色!</p>
</body>

    2.文本的排列

        text-align:水平对齐方式

        取值

            left/center/right

<style>
.p1{

text-align: center;

}
.p2{

text-align: right;

}
.p3{

text-align: left;

}
</style>

    3.文本的修饰(a u s)

        text-decoration:值;

        取值

            none  代表没有修饰线

            underline  下划线

            overline    上划线

            line-through 删除线

#p1{
text-decoration:none;/*正常显示*/
}
#p2{
text-decoration:underline;/*underline下划线*/
}
#p3{
text-decoration: overline;/*overline上划线*/
}
#p4{
text-decoration: line-through; /*line-through删除线*/
}
正常显示 <p id="p1">正常显示的文字</p>
下划线<p id="p2">这是展示下划线</p>
上划线 <p id="p3">这是展示上划线</p>
删除线 <p id="p4">这是展示删除线</p>

4.首行缩进

        text-indent:2em;

#p5{
text-indent:2em;/*空出2个字体空间*/
}

    5.文本阴影

        box-shadow:0 0 blur color;

        text-shadow:0 0 blur color;

#p6{
text-align: center;
font-size: 30px;
text-shadow:1px 1px 1px red;
/*文本阴影。表示 水平阴影 垂直阴影 模糊距离 模糊颜色*/
}

  注意:text-shadow(文本阴影):第一个值表示水平阴影 第二个垂直 第三模糊距离第四个模糊像素

常用取值:0 0 模糊距离 模糊颜色。

取值情况。水平大于0右偏移,垂直大于0向下偏移,负值相反!

  6.行高

        line-height:值;

        当行高和块元素的高度一致的时候,

         文字垂直居中

div{
width:800px;
height:320px;
background-color: orange;
border: 1px solid purple;
line-height:320px;/*当行高和元素块的高一致时,元素内文字将居中显示
其他的将会显示在元素块之外。line-height的取值表示在元素块一个宽度满之后,换行后与前一行的距离*/

}

行高和元素块一致的结果图像

行高的作用效果:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 计算属性的setter和getter

            刚才通过计算lastName和firstName获取了整个姓名,当时我们只是通过一直的data对象中属性进行合成的,这个也就是计算属性(comp...

    十月梦想
  • Express框架实现GET和POST请求

    GET请求在原生node中我们使用了path.query等查询方式,在express框架提供了极其简单的方式(req.query)就简单获取到了传递的内容;

    十月梦想
  • Vue入门详解之计算属性,方法和侦听器

    对于存在一个姓氏和名字,我们通过Vue计算出姓名有三种方式,计算属性,方法(methods)和侦探器三种方式!

    十月梦想
  • 快速学习-电影推荐系统设计(实时推荐模块)

    cwl_java
  • 如何确保云安全?新数据指出一条明路

    在云端部署更多的IT基础设施在某种程度上比内部部署的数据中心更加安全。例如,企业可以清楚了解系统正在运行的最新版本,并及时提供适当的补丁。云计算服务提供商也正在...

    静一
  • 如何在Kubernetes里创建一个Nginx service

    Jerry之前的文章如何在Kubernetes里创建一个Nginx应用,已经使用kubectl命令行创建了Pod,但是在kubernetes中,Pod的IP地址...

    Jerry Wang
  • 工信部下周发布可信云认证名单 或为政采前奏

    7月10日下午消息,阿里云透露,工信部将于下周发布可信云认证名单,阿里云已进入该名单。这是国内权威机构首次开展云计算领域的资质认证,也被认为是中国政府即将大规模...

    静一
  • [入门]云计算、边缘计算、雾计算傻傻分不清

    随着近年来互联网产生数据量前所未有的增加,各种计算也是层出不穷,什么网格计算、边缘计算、云计算、雾计算、霾计算等,还TM有霾计算,即使身在IT行业,也很容易被这...

    木禾wen
  • Spring Cloud组件那么多超时设置,如何理解和运用?

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://louluan.blog.c...

    亦山
  • 服务器厂商推出弹性定价挑战云计算提供商

    由于越来越多的企业采用云服务,IT硬件厂商正在采取一种避免企业大量资本支出的长期支付计划。硬件供应商正在推出“即用即付”的模式,这与云计算提供商提供的服务模式有...

    静一

扫码关注云+社区

领取腾讯云代金券