前端css某些文本属性

css文本属性

文本指的是一段文字，文本属性控制了我们的文本的展现形式，

诸如：文本样式、文本间距、文本对齐方式、首行缩进等效果。了解文本属性，能够让我们的网页排版更美观。

文本属性

• 文本装饰

可以通过样式text-decoration属性与改变文字的样式，例：上划线（overline），下划线（underline），删除线（line-through）。

线的种类可以是实线（solid  实线 在网页中实线用的最多），虚线（dashed），点线（dotted），双实线（double）等

选择器 {
  text-decoration: 线的种类 线的样式 线的颜色;
}

虽然属性样式很多，但是一般我们用到这个属性的时候只是为了把a标签的下划线给去掉。

因为下划线和文字之间的距离过近，并且不能设置，所以我们一般不用下划线。未来在网页中看到的下划线大部分都是下边框

•  文本间距

可以使用letter-spacing和word-spacing，后者一般不用，因为只对单词生效，汉字被当成一个字母。

选择器 {
  letter-spacing: 10px;
  word-spacing: 10px;
}

这两个属性用的很少，在表单的描述信息对齐上需要使用。

单独给 “密”添加span标签。单独给span设置letter-spacing

•  文本对齐

使用text-align可以实现文本对齐操作。这个属性只能给块元素（div、p、hx、li）加，给行内添加没效果。

让块元素内部的文本或者行内元素居中。（该属性会继承）

属性值：

• center 居中 最常用
• left 默认值
• right 右对齐
• justify 两端对齐

继承：

　　在CSS中有很多属性可以继承，比如：颜色、字体大小等

 

• 缩进

   

首行缩进与悬挂缩进       text-indent

　　

选择器 {
  text-indent: 2em;
}

• 字母大小写转换

text-transform

转换英文字母

• 纯小写 lowercase
• 纯大写 uppercase
• 首字母大写 capitalize

这个属性我们基本上不会使用，只对英文生效。

 变量

在CSS中现在已经支持变量了，但是IE浏览器不支持，如果我们未来做的项目不需要兼容IE浏览器，那我们就可以使用变量了。

变量的好处在于修改使用数量较多的相同的值比较方便。不需要再一个一个修改

声明css变量，用 --* （*是自定义的名字 ）

 

:root {
  /* --自定义名字: 值; */
  --color-1: red;
  --color-2: blue;
  --color-3: green;
}

使用变量时要用 var()， 在var()括号中加入变量名（很多css标签上都会有这个属性）

div {
  color: var(--color-1);
}

计算操作

calc()函数可以用来动态的计算我们的相关的值。（很多css标签上都会有这个属性）

calc中可以写一些运算方法 + - * / 但是符号两边要有空格，并且支持多次运算

选择器 {
  width: calc(100px + 1em);
}

选择器优先级问题

• 当选择器相同时，属性靠后，优先级更高

p {
  color: red;
  color: blue;
}

颜色为blue

p {
  color: red;
}
p {
  color: blue;
}

颜色为blue

• 选择器不同时，不同选择器有不同的优先级

• 选择器权重（权重值为一个比喻）

选择器	权重
标签	1
类	10
id	100
行内样式	1000
!important	10000

id选择器 > 类选择器 > 标签选择器。

权重是可以相加的，意思就是 两个类选择器要比一个类选择器权重高。

例如：

#text span 权重是101

span 权重 1

.box span 11

内填充

选择器 {
  padding: 值;
}

值有多种写法

• 一个值 四个方向都相同都是同一个值
• 两个值 第一个表上下 第二个表左右
• 三个值 上 左右 下
• 四个之 上 右 下 左

padding也支持单独设置方向上的值

• padding-方向

方向有top、bottom、left、right

• padding-top
• padding-bottom
• padding-left
• padding-right

写padding的目的，是为了让内部的元素里边框远点。

padding不要给行内元素加，给块元素添加才是正确的操作

  网址推荐

• 优设导航

App设计、网页设计等全方位设计师网站导航指引。是优设网旗下最全面的设计师导航