文本属性

文本格式化属性

    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 条评论
登录 后参与评论

相关文章

来自专栏小樱的经验随笔

Android布局属性详解

RelativeLayout用到的一些重要的属性: 第一类:属性值为true或false android:layout_centerHrizontal 水平居...

3233
来自专栏小工匠技术圈

[Java小工匠]CSS背景1-概述

background-image 属性为元素设置背景图像。 元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距。 默认地,背景图像位于元素的左上角...

742
来自专栏一“技”之长

Bootstrap响应式前端框架笔记二——排版标签与类

    Bootstrap中对h标签的字体和字号进行了微调,开发者除了可以直接使用这些标签进行标题的修饰外,还可以使用.h1到.h6类来将其他元素的字体进行修饰...

962
来自专栏小工匠技术圈

[Java小工匠]CSS盒子模型-概述

  在HTML文档中任何元素,都可以看作是一个盒子,因此理解盒子模型非常重要。一个盒子包含 盒子的内容、盒子内边距、盒子的边框、盒子的外边距。

1171
来自专栏知道一点点

echarts动态数据获取展示(地图,折线图)

1.8K2
来自专栏进击的君君的前端之路

CSS3背景

2193
来自专栏闵开慧

table边框设置

table边框设置 一、表格的常用属性 基本属性有:width(宽度)、height(高度)、border(边框值)、cellspacing(表格的内宽,即...

3415
来自专栏前端知识分享

第48天:垂直滚动条

921
来自专栏一个小程序员的成长笔记

CSS3弹性盒布局

使用自适应的窗口弹性盒布局 可以使div总宽度等于浏览器宽度,而且可以随着浏览器的改变而改变。 1 <!DOCTYPE html> 2 <html la...

5547
来自专栏Java成神之路

Android基础_2 Activity线性布局和表格布局

在activity的布局中,线性布局和表格布局是最简单的,这次分别从线性布局,表格布局以及线性布局和表格混合布局做了实验,实验中只需要编写 相应的xml的代码,...

732

扫码关注云+社区

领取腾讯云代金券