实训第三天所学记录

为网页添加样式

术语解释

    h1{
        color:red;
        background-color: navy;
        text-align:center;
    }

CSS规则 = 选择器 + 声明块

选择器

选择器：选中元素

1. ID选择器：选中的是对应ID值的元素

2. 元素选择器

3. 类选择题

声明块

出现在大括号中，声明块中包含很多声明（属性），每一个声明（属性）表达了某一方面的样式。

CSS代码书写位置

1. 内部样式表

书写在style元素中
2. 内联样式表，元素样式表
3. 外部样式表（推荐）
将样式书写到独立的css文件中
一、外部样式可以解决多页面样式重复的问题。
二、有利于浏览器缓存，从而提高页面响应速度。
三、有利于代码分离（HTML代码和CSS代码）,更容易阅读和维护

常见样式声明

1. color
   预设值:定义好的单词.
   三原色,色值:光学三原色(红绿蓝),每个颜色可以使用0~255之间的数字来表达,色值.

rgb表示法：
rgb(0,255,0)
hex(16进制)表示法：

#红绿蓝

淘宝红：#ff4400
马尔斯绿：#008c8c
黑色：#000000
白色：#ffffff
红：#ff0000
绿：#00ff00
蓝：#0000ff
紫色：#ff00ff
青色：#00ffff
灰色：#cccccc
2. background-color

元素背景颜色
3. font-size
元素内部文字的尺寸大小
一、px：像素，简单的理解为文字的高度占多少个像素
二：em：相对单位，相对于父元素的字体大小。
每个元素必须有字体大小，如果没有声明，则直接使用父元素的字体大小，如果没有父元素，则使用基准字号

user agent,ua,用户代理（浏览器）
4. font-weight

文字粗细程度，可以取值数字，可以取值为预设值
strong，默认加粗。
5. font-family
文字类型
必须用户计算机中存在的字体才会有效。
使用多个字体，以匹配不同环境。
sans-serif,非衬线字体
6. font-style
字体样式，通常用它设置斜体
i，em元素，默认样式是倾斜字体;实际使用中通常用它表示一个图标
7. text-decoration

文本修饰，给文本加线

a元素
del元素：错误的内容
s元素：过期的内容
8. text-indent
表示首行文本缩进
9. line-height
表示每行文本的高度，该值越大，每行文本的距离越大。
设置行高为容器的高度可以让单行文本垂直居中。
行高可以设置为纯数字，表示相对于当前元素的字体大小
10. width
宽度
11. height
高度
12. letter-spaceing
文字间隙：
13.text-align
元素内部文字的水平排列方式

选择器

选择器：帮助你精准的选中想要的元素

简单选择器

1. ID选择器
2. 元素选择器
3. 类选择器
4. 通配符选择器

*，选中所有元素
5. 属性选择器
根据属性名和属性值选中元素
6. 伪类选择器
选中某些元素的某种状态
1 link:超链接未被访问时的状态
2 vistid：超链接访问过后的状态
3 hover：鼠标悬停状态
4 active：激活状态（鼠标按下状态）
爱恨法则：love lv hate ha
7. 伪元素选择器
before::
after::

元素的组合

1. 并且
2. 后代元素 —— 空格
3. 子元素 —— >
4. 相邻兄弟元素 —— +
5. 后面出现的所有兄弟元素 —— ~

选择器的并列

多个选择器 用逗号分隔
语法糖