CSS字体文本样式

作者: 小唱同学 | 来源:发表于2019-05-23 21:30 被阅读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 是针对块级元素起作用的


相关文章

  • 从零开始学CSS - 样式

    样式 CSS 背景属性 CSS 文本属性 CSS 字体属性 链接 常见的链接样式,text-decorat...

  • 九、CSS字体属性与文本属性

    一、CSS字体属性与文本属性 1、CSS字体属性 CSS Fonts(字体)属性用于定义、大小、粗细、和文字样式(...

  • CSS-Style样式

    CSS 样式 背景 文本 字体 链接 列表 表格 轮廓 end

  • day03

    A今天学了什么? 1.CSS基本样式讲解 1.1css背景样式 1.2CSS文本 1.3CSS字体 1.4.css...

  • day03 css基本样式 + 表格table + 轮廓 + 透

    1.css基本样式 1.1 css背景 1.2 css文本 1.3 css字体 1.4 css链接 1.5 css...

  • css 01

    css 初识 css 通常称为css样式或层叠样式表(级联样式),主要用于设置html页面中的文本内容(字体,大小...

  • day03

    A今天学到了什么 1.css基本样式 1.css背景 2.css 文本 3.css 字体 4.css 列表样式...

  • python Css选择器

    一、常用的应用文本的css样式 1.1、文本的css样式其实也就是给一段文本设置 字体大小、颜色、背景色、是否加粗...

  • Python HTML和CSS 4:CSS常用文本样式与样式选择

    一、常用的应用文本的css样式 1.1、文本的css样式其实也就是给一段文本设置 字体大小、颜色、背景色、是否加粗...

  • day03

    今天学的内容 一、css 样式的讲解 1.1 css 背景 1.2 css 文本 1.3 css 字体 1.4 c...

网友评论

    本文标题:CSS字体文本样式

    本文链接:https://www.haomeiwen.com/subject/fqrizqtx.html