css 基础--颜色,字体,文本

in css with 0 comment views: 93 times

颜色

color

取值:颜色名称,HEX格式,RGB格式,RGBA格式,HSL格式,HSLA格式,transparent

.colorname p{color:green;}
.hex p{color:#ff0000;}
.rgb p{color:rgb(0,0,0);}
.rgba p{color:rgba(0,0,0,.5);}
.hsl p{color:hsl(240,50%,50%);}
.hsla p{color:hsla(240,50%,50%,.5);}
.transparent p{color:transparent;}

opacity 不透明度

默认 1,取值为[0,1]

字体

font 字体

font-style 指定元素的文本是否为斜体

font-variant: 定义元素文本是否为小型的大写字母

font-weight 字体粗细

font-size 字体大小

font-family 字体名称

font-stretch 定义元素的文字是否横向拉伸变形

文本

text-transform 元素的文本如何转换大小写

white-space 指定元素是否保留文本间的空格、换行;指定文本超过边界时是否换行

tab-size 制表符长度

word-break 文本字间与字符间的换行行为

break-all会在文本内容遇见边界时,强制将文本打断换行,而不考虑单词是否是完整的一个单位,break-word同样也会在文本内容遇见边界时,强制将文本打断换行,不同的在于它会考虑单词是否完整,如果当前行无法放下需要被打断的单词,为了保持完整性,会将整个单词放到下一行进行展示

word-wrap, overflow-wrap 是否换行

CSS3中将word-wrap改名为overflow-wrap

text-align 水平对齐方式

image

word-spacing 指定单词之间的额外间隙

letter-spacing 指定字符之间的额外间隙

text-indent 定义块内文本内容的缩进

vertical-align 定义行内元素在行框内的垂直对齐方式

line-height 行高

文本装饰

text-decoration 简写属性。定义元素文本装饰

text-decoration-line 元素文本装饰线条位于文本的哪个位置

text-decoration-color 装饰线条的颜色

text-decoration-style 文本装饰线条的形状

text-decoration-skip

元素文本装饰线条必须跳过内容中的哪些部分

text-underline-position

元素装饰线的位置

direction

Responses