Css基础总结——常见样式声明

常见样式声明

1. color

元素内部的文字颜色

预设值：定义好的单词

三原色，色值：光学三原色（红、绿、蓝），每个颜色可以使用0-255之间的数字来表达，色值。

rgb表示法：
rgb(0, 255, 0)
hex（16进制）表示法：
#红绿蓝

淘宝红：#ff4400, #f40
黑色：#000000，#000
白色：#ffffff, #fff
红：#ff0000, #f00
绿：#00ff00, #0f0
蓝：#0000ff, #00f
紫：#f0f
青：#0ff
黄：#ff0
灰色：#ccc

2. background-color

元素背景颜色

3. font-size

元素内部文字的尺寸大小

1）px：像素，绝对单位，简单的理解为文字的高度占多少个像素
2）em：相对单位，相对于父元素的字体大小
每个元素必须有字体大小，如果没有声明，则直接使用父元素的字体大小，如果没有父元素（html），则使用基准字号。

user agent，UA，用户代理（浏览器）

4. font-weight

文字粗细程度，可以取值数字，可以取值为预设值

strong，默认加粗。

5. font-family

文字类型

必须用户计算机中存在的字体才会有效。

使用多个字体，以匹配不同环境

sans-serif，非衬线字体

衬线字体 打印好看
非衬线字体 sans-serif 显示好看

6. font-style

字体样式，通常用它设置斜体

i元素，em元素，默认样式，是倾斜字体; 实际使用中，通常用它表示一个图标（icon）

7. text-decoration

文本修饰，给文本加线。

a元素
del元素：错误的内容
s元素：过期的内容

8. text-indent

首行文本缩进

9. line-height

每行文本的高度，该值越大，每行文本的距离越大。

设置行高为容器的高度，可以让单行文本垂直居中

行高可以设置为纯数字，表示相对于当前元素的字体大小 ▲

10. width

宽度

11. height

高度

12. letter-space

文字间隙

13. text-align

① 元素内部文字的水平居中排列方式

② 行盒、行块盒 居中

更多的样式

1. 透明度
   1.） opacity，它设置的是整个元素的透明，它的取值是0 ~ 1
   2.） 在颜色位置设置alpha通道(rgba )
   3.）hex

2.鼠标
使用cursor设置

3. 盒子隐藏

4. display:none，不生成盒子

5. visibility:hidden，生成盒子，只是从视觉上移除盒子，盒子仍然占据空间。

4.背景图

1.）和img元素的区别

img元素是属于HTML的概念
背景图属于css的概念

当图片属于网页内容时，必须使用img元素
当图片仅用于美化页面时，必须使用背景图

2.）涉及的css属性

① background-image

② background-repeat

默认情况下，背景图会在横坐标和纵坐标中进行重复

③ background-size

预设值：contain、cover，类似于object-fit
数值或百分比

④ background-position

设置背景图的位置

预设值：left、bottom、right、top、center

数值或百分比

雪碧图（精灵图）（spirit）

⑤ background-attachment

通常用它控制背景图是否固定

---

Learning form 渡一