0
点赞
收藏
分享

微信扫一扫

文本、字体、段落、行 的属性

Aliven888 2022-03-12 阅读 88
css3

文本属性

color

设置文本内容的前景色

表示法

英语单词、十六进制、rgb()、rgba()等

英语单词

color: red;
缺点:不精确

十六进制

所有设计软件都通用的颜色表示法
每种颜色分量是0~255的数字:十六进制ff就是十进制的255
#aabbcc形式,可简写为#abc

常见颜色:
黑色是#000
白色是#fff
灰色有#CCC、#333、#2f2f2f等

rgb()

 color: rgb(25500);

rgba()

从IE9开始兼容

color: rgba(25500.65);

最后一个参数:透明度;其范围0-1,0表示纯透明,1表示纯实心

font-size

单位通常为px。还有em、rem等单位

font-size:30px;

网页文字正文字号通常是16px,浏览器最小支持10px字号

font-weight

示例 意义
font-weight: normal; 正常粗细,与400等值
font-weight: bold; 加粗,与700等值
font-weight: lighter; 更细,大多数中文字体不支持
font-weight: bolder; 更粗,大多数中文字体不支持

font-style

设置字体的倾斜
示例 意义
font-style: normal; 取消倾斜,比如可以把天生倾斜的i、em等标签设置为不倾斜
font-style: italic; 设置为倾斜字体(常用)
font-style: oblique; 设置为倾斜字体(用常规字体模拟,不常用)

text-decoration

于设置文本的修饰线外观的(下划线、删除线)
示例 意义
text-decoration: none; 没有修饰线
text-decoration: underline; 下划线
text-decoration: line-through; 删除线

字体属性

font-family

设置字体

font-family: "微软雅黑";

字体可以是列表形式,英语字体放前面,后面的字体是“后备”字体

font-family: serif,"Times New Roman""微软雅黑";

字体必须已安装好
未安装,就需要定义字体

定义字体

需要有字体文件,加载网页的同时下载字体文件

@font-face {
    font-family: '字体名称';
    font-display: swap;
    src: url('eot字体文件地址');
    /* IE 9 */
    src: url('eot字体文件地址') format('embedded-opentype')/* IE6-IE8 */
        ur1('woff2字体文件地址') format('woff2')ur1('woff字体文件地址') format('woff')/* chrome\firefox */
 ur1('ttf字体文件地址') format('truetype')/* chrome、 firefox、 opera、 Safari, Android, iOS 4.2+*/
        ur1('svg字体文件地址') format('svg');
    /*  iOS4.1- */
}

阿里巴巴普惠体

网址https://www.iconfont.cn/webfont
优点:不用下载字体

段落属性、行属性

text-indent

定义首行文本内容缩进量

text-indent: 2em;/* em表示字符宽度 */

line-height

定义行高
单位:
1)px为单位的数值

 line-height: 30px;

2)没有单位的数值,表示字号的倍数

line-height: 1.5;

3)百分数,表示字号的倍数

line-height: 150%;

文本垂直居中

行高=盒子高

文本水平居中

 text-align: center;
谁要居中水平竖直
文本text-align:center;line-height=盒子高height
盒子margin:0 auto;(如下代码)
父亲{
position:relative;
}
元素{
position: absolute;
top: 50%;
margin-top: -自己高度一半;
}

font

合写font-style,font-weight,font-size/line-height、font-family

倾斜 加粗 字号/行高 字体

font: italic bold 20px/1.5 Arial,"微软雅黑";

继承性

因为文字相关属性有继承性,所以通常会设置body标签的字号、颜色、行高等,这样就能当做整个网页的默认样式了

就近原则

有继承,选择器权重失效

<div id="box1" class="box1">
    <div id="box2" class="box2">
        <div id="box3" class="box3">
            <p>我是文字</p>
        </div>
    </div>
</div>
  /* p标签继承该样式*/
  #box1 #box2 #box3 {
      color: red;
  }

直接选中的权重更大,继承权重看作0

p {
    color: green;
}
 #box1 #box2 {
     color: red;
 }
 #box1 #box3 {
     color: blue;
 }
举报

相关推荐

0 条评论