CSS文本字体与背景样式

1. 字体样式

**字体大小：**font-size: px / % / em / rem;

设置的是字体的高度

单位：

px 像素相对于显示屏分辨率而言的，浏览器默认的字体大小都是16px
em，根据的是父元素的字体大小计算的
百分比：根据的是父元素的字体大小计算的
rem：根据的是根元素的字体大小计算的

<style>html {font-size: 18px;}div {font-size: 20px;}p {/*font-size: 2em;*//*font-size: 300%;*/font-size: 2rem;}
</style><div><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut consectetur cupiditate dolore laboriosam non odit quae totam veniam. Alias blanditiis earum est eveniet, iste quia sapiente sequi! Culpa, nostrum nulla.</p>
</div>

**字体颜色：**color:英文单词 / 十六进制 / rgb ;
- 设置的是字体的颜色
- 默认情况下文字渲染的是黑色，链接除外（链接默认是蓝色）
- 颜色的英文单词：
  - red
  - green
  - blue
  - yellow
  - pink
  - skyblue
- rgb函数表示法：
  - r red
  - g green
  - b blue
  - 三原色
- 十六进制值 #rrggbb #rbg
**字体类型：**font-family: 字体名称 ;
- 用来设置字体的：宋体微软雅黑
**字体粗细：**font-weight: 值; 值可以为：

| 值 | 说明 |
| :-----: | :----------------: |
| bold | 定义粗的字体 |
| bolder | 定义更粗的字体 |
| lighter | 定义更细的字体 |
| normal | 定义正常的字体大小 |

100-900的整百数数值

400正常 700加粗

**字体斜体：**font-style: 值; 值可以为：

值	说明
normal	正常
italic	斜体，换成一种斜体字体

行高： line-height: px%\倍数；
- 控制的是没一行文字的高度，文字会在这个行高内垂直居中显示
- 当我们给文本设置字体大小的时候会按照字体大小的1.32这个比例给文字设置行高
- 行高 = 文字的大小 + 上下的行间距两个文字之间的上下间距

2. 文本样式

文本缩进： text-indent

文本水平对齐方式： text-align

值	说明
left	居左对齐
center	居中对齐
right	局右对齐
justify	两端对齐

**文本修饰：**text-decoration

值	说明
none	没有文本线
underline	下划线
line-through	中划线
overline	上划线

下划线样式：text-decoration: wavy 波浪线
**下划线颜色：**text-decoration: red 红色
**单词间距：**word-spacing单词间距
字间距： letter-spacing每一个字符之间的间隙
溢出显示方式： text-overflow
- 当盒子规定了超出隐藏后：
  
  clip 默认，裁剪文本
  
  ellipsis 显示省略符号来代表被修剪的文本

3. 背景样式

background-color：设置元素的背景颜色；
- 取值：颜色的英文名 rgb 十六进制
- 背景颜色不会影响我们盒子的大小在开发阶段我们可以使用背景颜色去看清盒子的位置和大小
background-image：设置元素的背景图像；
- 背景图片仅仅是给盒子起到一个装饰的效果类似于背景颜色是不能撑开盒子的
- 如果元素的尺寸是大于图片的图片默认是水平和垂直方向平铺的
- 如果元素的尺寸是小于图片的图片默认是从做上角开始显示超出的部分不可见
background-repeat：控制背景图像是否重复；
- repeat 水平和垂直方向都平铺
- no-repeat
- repeat-x 沿水平方向平铺
- repeat-x 沿垂直方向平铺
background-position：控制背景图像在元素中的位置；
- background-position: 水平方向的设置垂直方向的设置
- 水平: left center right
- 垂直：top center bottom
- 数字

前端-CSS文本字体与背景样式相关推荐

CSS文本字体与背景样式
1.字体样式字体大小:font-size:30px/%/em/rem; 设置的是字体高度单位: px 像素相对于显示屏分辨率而言的,浏览器默认的字体大小都是16px rem:根据的是根元素的字体 ...
CSS 文本字体颜色设置方法。
这篇文章主要介绍了CSS 文本字体颜色设置方法(CSS color),需要的朋友可以参考下一.认识CSS 颜色(CSS color) 这里要介绍的是网页设置颜色包含有哪些:网页颜色规定规范. 1.常 ...
CSS 文本字体颜色设置方法(CSS color)
转自:微点阅读 https://www.weidianyuedu.com 这篇文章主要介绍了CSS 文本字体颜色设置方法(CSS color),需要的朋友可以参考下一.认识CSS 颜色(CSS c ...
CSS 文本字体怎么设置颜色
这篇文章主要介绍了CSS 文本字体颜色设置方法(CSS color),需要的朋友可以参考下一.认识CSS 颜色(CSS color) 这里要介绍的是网页设置颜色包含有哪些:网页颜色规定规范. 1.常 ...
css文本字体形状_使用CSS更改文本字体
css文本字体形状 In the last module, we discussed text formatting. By now, you already know how to work wit ...
phpexcel中文教程-设置表格字体颜色背景样式、数据格式、对齐方式、添加图片、批注、文字块、合并拆分单元格、单元格密码保护
转载连接:http://www.cnblogs.com/huangcong/p/3687665.html phpexcel中文教程-设置表格字体颜色背景样式.数据格式.对齐方式.添加图片.批注.文字块 ...
CSS浮动定位与背景样式
CSS浮动定位与背景样式 1.浮动与定位 1.1 浮动的基本概念本质功能 : 实现块元素并排布局使用要点 : 1.要浮动,并排的盒子都要设置浮动2.父盒子宽度足够,否则会被迫换行3.子盒子会按顺序 ...
CSS为字体设置背景
CSS为字体设置背景 <h1 class="div">洛阳处处是月明</h1> .div{ width: 20rem; height:20rem; back ...
html font设置字号,CSS font-size字体文字大小样式属性
CSS font-size字体文字大小样式属性-字体大小样式篇: 本节DIVCSS5为大家介绍通过CSS样式设置文字字体大小知识,涉及CSS样式单词font-size. 一.设置字体大小CSS单词与语 ...

前端-CSS文本字体与背景样式

CSS文本字体与背景样式

1. 字体样式

2. 文本样式

3. 背景样式

前端-CSS文本字体与背景样式相关推荐

最新文章

热门文章