网站建设及安全管理,乐清站在那儿,专业seo推广,拖拽式网站开发CSS Text(文本)属性#xff1a; 定义文本外观#xff0c;颜色#xff0c;装饰#xff0c;缩进#xff0c;行间距来修饰文本 文本样式
文本缩进 text-indent文本水平对齐方式#xff1a;text-align文本修饰#xff1a;text-decoration行高 line-height
CSS文本颜色属性… CSS Text(文本)属性 定义文本外观颜色装饰缩进行间距来修饰文本 文本样式
文本缩进 text-indent文本水平对齐方式text-align文本修饰text-decoration行高 line-height
CSS文本颜色属性color
颜色表示方式表示含义属性值关键词预设定义的颜色名redgreenblueyellowrgb表示法红绿蓝三原色每项取值:0-255rgb(0,0,0,rgb(255,255,255),rgb(255,0,0)rgba表示法红绿蓝三a表示透明度取值范围:0-1rgba(255,255,2550.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)白色
透明度a a的取值范围:0-1 完全不透明1完全透明: 0
举个栗子 .blue {/* 文本颜色属性color */color: blue; }.red {/* 文本颜色也可以用十六进制定义 # 6位 *//* 颜色一般不用记忆一般都是用吸管工具吸取 */color: #f10c0c;/*color: #ff00ff 可以写成 color: #f0f*/}/* 文本颜色也可以用RGB代码定义 rgb100,25,67/rgb(20%,15%,26%) */.yellow {color: rgb(201, 245, 7);} p classblus我是蓝色/pp classred我是红色/pp classyellow我是黄色/pCSS文本对齐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 classp1我是居中p标签/pp classp2我是向右p标签/pp classp3我是向左p标签/ptext-align能使哪些元素水平居中
文本span标签a标签input标签img标签 如果这些是子元素那么将属性设置在父类标签
CCS文本修饰线属性 text-deccoration
text-decoration属性规定添加到文本的修饰可以给文本添加下划线删除线上划线
开发中会使用text-decorationnone清除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 classp1我是p标签,我有下划线/pa href# classp2我是a标签,我要去掉下划线/ap classp3我是p标签,我有上划线/pp classp4我是p标签,我有删除线/pCSS文本首行缩进text-indent(em) 注 text-indent 属性用于指定文本的第一行的缩进一般指段落的首行缩进h1-h6p标签都不缩进 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标签/pp classp1我是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/pp classp2我是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/pp classp3我是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像素/pCSS的行高 line-height 行高的作用 控制一行的上下间距 应用
?使单行文本垂直居中可以设置line-height文字父元素高度网页精准布局时会设置line-height可以取消上下间距
特点
行高指的是文字占有的实际高度可以通过line-height来设置行高行高经常用来设置文字的行间距
取值
数字px/em单个数字倍数当前标签font-size的倍数
举个栗子
.p1 {line-height: 16px;}.p2 {font-size: 30px;line-height: 60px;}div classp1我是div标签,我的行高是16px,字体是16px,我是div标签,我的行高是16px,字体是16px,我是div标签我的行高是16px,字体是16px,我是div标签,我的行高是16px,字体是16px,我是div标签我的行高是16px,字体是16px,/divdiv classp2我是div标签我的行高是60px字体大小是30pxx/divdiv我是正常div标签,我是正常div标签,我是正常div标签,我是正常div标签,我是正常div标签,我是正常div标签,我是正常div标签,我是正常div标签,我是正常div标签,我是正常div标签,我是正常div标签,我是正常div标签,我是正常div标签,我是正常div标签/div总结
属性表示注意点color文本颜色我们通常用十六进制比如color #fff123text-align文本对齐方式暂无text-indent文本首行缩进注意只能设置首行缩进, 比如text-indent2pxtext-decoration文本的修饰一般只用于链接去下划线text-decorationnoneline-height行高行高上边距字体高度下边距,上边距下边距
