1.2 CSS文本属性 |
您所在的位置：网站首页 › css文本缩进使用哪个属性打开 › 1.2 CSS文本属性 |
|
CSS Text(文本)属性： 定义文本外观，颜色，装饰，缩进，行间距来修饰文本 文本样式 文本缩进 text-indent文本水平对齐方式：text-align文本修饰：text-decoration行高 line-height CSS文本颜色属性color 颜色表示方式表示含义属性值关键词预设定义的颜色名red，green，blue，yellowrgb表示法红绿蓝三原色，每项取值:0-255rgb(0,0,0）,rgb(255,255,255),rgb(255,0,0)rgba表示法红绿蓝三+a表示透明度，取值范围:0-1rgba(255,255,255，0.5）,rgba(255,0,0,0,3)十六进制表示法#开头,将数字转换成十六进制表示#000000，#ff0000,#e92322 常见颜色 默认取法 基本色skyblue：天蓝色pink：粉色 rgb表示法 rgb(255,0,0) : 红色rgb(0,255,0) : 绿色rgb(0,0,255) : 蓝色rgb(0,0,0)：黑色rgb(255,255,255)：白色 透明度aa的取值范围:0-1 完全不透明：1完全透明: 0举个栗子 .blue { /* 文本颜色属性color */ color: blue; } .red { /* 文本颜色也可以用十六进制定义 # + 6位 */ /* 颜色一般不用记忆，一般都是用吸管工具吸取 */ color: #f10c0c; /*color: #ff00ff 可以写成 color: #f0f*/ } /* 文本颜色也可以用RGB代码定义 rgb（100,25,67）/rgb(20%,15%,26%) */ .yellow { color: rgb(201, 245, 7); } 我是蓝色 我是红色 我是黄色 CSS文本对齐taxt-align 基本介绍text-align属性用于设置元素内文本内容的水平对齐方式 元素文本对齐方式text-align属性 text-align的对齐方式有 right,left,center 注意：如果想让哪一个标签内的文本水平居中，text-align直接加入文本的父类元素，也就是上一级元素 举个栗子 .p1 { /* text-align的对齐方式有right,left,center */ /* text-align设置元素文本居中对齐 */ text-align:center; /* text-align:left; */ /* text-align:right; */ } .p2 { text-align: right; } .p3 { text-align: left; } 我是居中p标签 我是向右p标签 我是向左p标签 text-align能使哪些元素水平居中 文本span标签，a标签input标签，img标签 如果这些是子元素，那么将属性设置在父类标签 CCS文本修饰线属性 text-deccorationtext-decoration属性规定添加到文本的修饰，可以给文本添加下划线，删除线，上划线 开发中会使用text-decoration：none，清除a标签默认的下划线 1.下划线 text-decoration: underline 最常用 2.取消下划线text-decoration: none 最常用 3.上划线text-deccoration: overline 4.删除线text-decoration: line-through 举个栗子 .p1 { /* 下划线 */ text-decoration: underline; } /* 一般网页链接都没下划线，所以直接标签选择器a 在css设置去线就行 */ .p2 { /* 去掉下划线 */ text-decoration: none; } .p3 { /* 上划线 */ text-decoration: overline; } .p4 { /*删除线 */ text-decoration: line-through; } 我是p标签,我有下划线 我是a标签,我要去掉下划线 我是p标签,我有上划线 我是p标签,我有删除线 CSS文本首行缩进text-indent(em)注： text-indent 属性用于指定文本的第一行的缩进，一般指段落的首行缩进h1-h6，p标签都不缩进 em是一个相对单位，就是当前元素（font-size）,1个文字的大小,如果当前元素没有设置字体大小，则按照父元素的1个文字大小举个栗子 /* 此时定义首行缩进20px（像素） */ .p1 { text-indent: 20px ; } /* 此时可以设置数值em单位 */ .p2 { text-indent: 2em; } /* 向左突出20像素 */ .p3 { text-indent: -20px; } 我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签 我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px 我是p标签,我要缩进2em,我是p标签,我要缩进2em,我是p标签,我要缩进2em,我是p标签,我要缩进2em,我是p标签,我要缩进2em,我是p标签,我要缩进2em,我是p标签,我要缩进2em,我是p标签,我要缩进2em,我是p标签,我要缩进2em,我是p标签,我要缩进2em,我是p标签,我要缩进2em,我是p标签,我要缩进2em,我是p标签,我要缩进2em,我是p标签,我要缩进2em,我是p标签,我要缩进2em,我是p标签,我要缩进2em 我是p标签,我要向左突出20像素,我是p标签,我要向左突出20像素,我是p标签,我要向左突出20像素,我是p标签,我要向左突出20像素,我是p标签,我要向左突出20像素,我是p标签,我要向左突出20像素,我是p标签,我要向左突出20像素,我是p标签,我要向左突出20像素,我要向左突出20像素,我是p标签,我要向左突出20像素,我是p标签,我要向左突出20像素,我是p标签,我要向左突出20像素,我是p标签,我要向左突出20像素,我是p标签,我要向左突出20像素,我是p标签,我要向左突出20像素 CSS的行高 line-height行高的作用： 控制一行的上下间距 应用： ?使单行文本垂直居中可以设置line-height：文字父元素高度网页精准布局时，会设置line-height，可以取消上下间距特点： 行高指的是文字占有的实际高度可以通过line-height来设置行高行高经常用来设置文字的行间距取值： 数字+px/em单个数字（倍数，当前标签font-size的倍数）举个栗子 .p1 { line-height: 16px; } .p2 { font-size: 30px; line-height: 60px; } div class="p1">我是div标签,我的行高是16px,字体是16px,我是div标签,我的行高是16px,字体是16px,我是div标签，我的行高是16px,字体是16px,我是div标签,我的行高是16px,字体是16px,我是div标签，我的行高是16px,字体是16px, 我是div标签，我的行高是60px，字体大小是30pxx 我是正常div标签,我是正常div标签,我是正常div标签,我是正常div标签,我是正常div标签,我是正常div标签,我是正常div标签,我是正常div标签,我是正常div标签,我是正常div标签,我是正常div标签,我是正常div标签,我是正常div标签,我是正常div标签 总结 属性表示注意点color文本颜色我们通常用十六进制，比如color： #fff123text-align文本对齐方式暂无text-indent文本首行缩进注意：只能设置首行缩进, 比如：text-indent：2pxtext-decoration文本的修饰一般只用于链接去下划线text-decoration：noneline-height行高行高=上边距+字体高度+下边距,上边距=下边距 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |