css基础&布局样式&问题

CSS字体文本样式

2019-05-23  本文已影响0人  小唱同学

样式的继承:字体的样式可以被继承,不做设置,继承样式才会生效(优先级比选择器低)


font-family :字体的样式   中文字体名称需要用 引号包裹

                                          可以设置多个字体备选  使用逗号隔开

font-size: 字体的大小      chrome 默认大小16px

                                        font-size: 20px;

                                        1em = 默认字体的1倍(继承来的字体大小)

                                        font-size: 2em;

                                        100% = 1em

                                        font-size: 200%;

font-color: 字体的颜色   #十六进制 || rgb()  ||  english   推荐使用16进制

font-weight: 设置字体粗细

                                    默认:normal

                                     加粗:bold  bolder

                                     变细    light  lighter

                                    100-900  整数

font-style:字体倾斜

                                     font-style: normal;

                                     font-style: italic; 使用字体的自带倾斜效果

                                     font-style: oblique;   强制字体倾斜

font属性简写:

font:   style→weight→size/line-height→family              值之间用空格隔开,注意书写顺序


文本样式:

text-align:在块元素上(有宽度的容器上),是内部的文本,内联元素,内联块元素对齐 */

水平对齐:  text-align

                   在块元素上(有宽度的容器上),是内部的文本,内联元素,内联块元素对齐

                    left:左对齐  right:右对齐   center:居中   justify:两端对齐

                    text-align: center;

行高:line-height

没有高度,px 行高 可以决定 元素的高度

当行高是一个数字时,元素的高度是 字体乘以行高

line-height: 2= line-height:2em

text-indent: 首行缩进     内联元素不可设置首行缩进

                    缩进  2个字体

                    text-indent: 2em;

                    容器宽度的%

                    text-indent: 50%;

                   可以设置为负值

text-decoration:文本修饰线

                    underline:下划线

                    overline:上划线

                    line-through:贯穿线

                    blink:定义闪烁的文本

                    none: 没有

letter-spacing:字符之间的间隙:

                         单位:px  em  负值      letter-spacing: 10px;

word-spacing:单词间隙

                           word-spacing: 20px;

vertical-align:垂直对齐   针对于行内行内块元素


baseline | sub | super | top|text_top | middle | bottom | text_bottom  (长度||百分比)


vertical-align不针对块级元素,子集(多行文本)要垂直居中,先设置父级display:table 子级display:table-cell在后在设置vertical-align:middle

单行文本直接设置line-height与父元素相同高度即可

图片与文字一同的需全部设置高度与line-height


水平对齐方式:text—align 是针对块级元素起作用的


上一篇 下一篇

猜你喜欢

热点阅读