HTML CSS 学习4

前言

如何添加CSS文件/样式？

• 加入在头元素中加入style元素，可以在里面加入CSS代码，也可以直接给html的代码添加样式。

• 可以直接给一类元素添加样式
  如 h1{color:red; background-color:lightblue;text-aglign: center;}这个代码就是一个CSS规则
  CSS规则=选择器+声明块

选择器

定义：选中元素，是选择了这一类元素 。

• ID选择器

但id通常失为js服务

• 元素选择器
• 类选择器

ID范围小 元素选择大 类选择器最常见
只要class属性的指相同，可以将所有的元素变成相应的样式
可以选择不同元素,也可以让同一个元素拥有多个类（两个类名之间加空格）！应用灵活广泛
使用方法.类名{样式}
声明块中包含很多声明（属性），每个声明代表一个声明规则。
书写格式 名称：样式类型；

CSS代码书写位置

1. 内部样式表

书写在style元素中，相对外部样式少一个文件，提高响应速度，如果代码再200行以内，就可以使用内部。

2. 内联样式表（元素样式表）

写在元素的style中，直接书写声明，不用使用选择器。 不推荐。

3. 外部样式表[推荐]

将样式书写到独立的css文件中。开发中在常用的方法。即在通常情况下在和HTML同级的位置创建一个index.css文件，在里面写入相应的样式。如：

.red-big-center{
 color=red;
 font-size=5em;
Text-align=center;
}

然后在HTML的head标签内假如link，将css文件连接到HTML文件中。
即：

<link rel="stylesheet" href="./index.css">

rel属性的stylesheet表示的是一个样式表
href表示的是一个地址，当然也可以写绝对路径或者是相对路径。当然link里面的用途不止于此。

外部样式表优点

1. 可以解决多页面样式重复的问题
   小技巧：按住ctrl再点击链接处就可以再新页面中打开网页。
   两个页面相同有相同的地方，可以引用相同的CSS文件 。
2. 有利于浏览器缓存，从而提高页面的相应速度
   且再读取CSS文件的同时，会将CSS文件缓存起来，下次使用不会再读取这个文件，直接使用缓存的数据，从而提高了效率。相同情况，如果用内部样式每次都要重新读取，响应速度相对较慢。
3. 有利于代码分离。
   更容易阅读和维护。

一个页面可能包含多个CSS文件。

常见样式声明

1.color

文字颜色
小技巧：如果需要调试，查看样式的样子，可以再页面上按F12或者右击查看源代码。切换到Elements，找到要调试的元素，再elements.style中添加相应的属性，只要一刷新就会消失的。
Ø 预设值：定义好的单词,其实在真是的项目中用的不懂
Ø 三原色，色值：光学三原色（红，绿，蓝），每个颜色可以使用0-255之间的数字来表示。0是完全不掺杂的颜色，255完全掺杂的颜色。所以可以取256种元素。有两种书写方式
1. rgb表示法：rgb（0，255，0）就是完全的绿色。在网页种点击颜色就是一个调色版，也可以借此找到合适的颜色。
2. hex表示法（16进制）表示法：#008c8c 就是马尔斯绿，红绿蓝每种颜色对应两位数字。
常见颜色：#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：相对元素，相对于父元素的字体大小，如2em，就是相对于父元素元素大小的几倍。但其实最终都会换算成像素单位。

在网页中computed可以显示计算后的元素大小之类的东西。假如一个元素没有大小，他就默认是父元素的字体大小。假如没有父元素那就使用基准字号，即为浏览器中设置的大小。
>user agent UA,用户代理（浏览器）

4. font-weight 文字粗细程度。取值可以为数字，可以为预设值。

预设值 normal，blod（加粗）
一般使用的都是预设值的两种状态。

5. font-family 字体类型。前提，用户的电脑上必须存在这种字体，否则就会用默认的显示。可以使用多个字体来匹配。

font-family： consolas，偏 偏体，微软雅黑；可以让中文和英文显示特定的字体。
特别的当对于一些比较古老的电脑 sans-serif，非衬线字体，是一个总类，字体的边缘没有经过修饰。因此在打印的时候更适合用衬线字体。

6. Font-style 给网页的字体添加样式。通常用于设置斜体

Font-style: italic，倾斜。i元素也是倾斜，但是是浏览器给元素附加的性质，影响语音阅读，实际使用的时候用它表示一个图标。 strong、em元素的样式都是加粗，但是strong表示重要的不能忽略的内容，em表示强调的内容（也是同时斜体）。

7. text-decoration。文本修饰，给文本加线。 如其中的line-through是给文字的中间加一条线，overline是给文字的上面加一条线 ，underline，给文字的下面加一条线，特殊举例：

Ø a元素，赋予超链接的文字下面会加一条线。当然也可以利用这个属性取消a元素的线，就是让text-decoration的属性值变成none。
Ø del元素，表示错误的内容，默认样式是line-through，但是也可以通过将属性改为none的方法来改变样式。
Ø s元素,表示过期的内容，默认样式line-through

8. line-height，行高。表示的是每行文本的高度，改值越大，每行文本的距离越大。设置行高为容器的高度，可以让文字追至居中。

如 给p元素的高度 即height设置为50px，也同样给单行文本的行高 line-height设置为50px，即可设置为垂直居中。
Ø 注意在行数很多的时候，最好不要设置绝对的像素为单位，应该将行高设置为纯数字，表示相对于当前元素的字体大小。

9. width，元素的宽度。

10. Height，元素的高度。

11. Text-indent。首行文本缩进。它的值表示缩进的长度，可以使用px或者em为单位。

12. Leter-spacing，表示每个文字之间间隔的长度，如果是1em，那就是每个字体之间间隔一个字体的大小 。当然也可以使用px。

13. Text-align，表示元素中文字相对于当前元素的对齐方式。center，right，left。

简单选择器

选择器定义

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

1. ID选择器

*{ } 代表选中了所有得元素

2. 元素选择器

3. 类选择器

4. 通配符选择器

5. 属性选择器

根据属性名和属性值选中元素。例如：
1）选中所有具有href属性得元素
[href]{
Color=red;
}
也可以有特指
[href="http://sinlang.com"]{}

也如：



其他方法

6. 伪类选择器【重要】

选中某些元素的某种状态

1） hover

鼠标移动上去的状态，鼠标悬停的状态，用法距离如下：
：hover{
}
上述代码没有选中任何元素，就是选择了所有的元素
效果如下
鼠标没有放在网页上

	鼠标悬停在网页上
	
	神奇！
	通常都会使用在a元素中，如：
	a:hover

2） active

激活状态。即鼠标的按下状态。
CSS代码：

如假如百度的超链接，在鼠标按下以前

在鼠标按下后（松手后就变成访问后的颜色了）

3） link

超链接未访问时的状态。

4） visited

超链接访问之后的状态。

写代码时可以将4元素按照此顺序书写(爱恨法则)：
link visited hover active 

7. 伪元素选择器

1）before

2）after

![在这里插入图片描述](https://img-blog.csdnimg.cn/2020021001184961.png)

最终显示效果

选择器的组合

1. 并且——.

2. 后代元素——空格

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200210011305426.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY4NTYxOQ==,size_16,color_FFFFFF,t_70)

假如说选择以某id的后代元素，要在id名前加#，如果是以class为某名的元素的后代元素的话，要在class名前加.
精准选择特别举例：
选择类名为abc的后代元素中类名为cde的元素。

选中某类别下的所有子代元素

3. 子元素——>，后代元素的用途更广，这个只能指它的子代元素。

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200210011534411.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY4NTYxOQ==,size_16,color_FFFFFF,t_70)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200210011540589.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY4NTYxOQ==,size_16,color_FFFFFF,t_70)

4. 相邻后方的兄弟元素——+

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200210011203600.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY4NTYxOQ==,size_16,color_FFFFFF,t_70)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200210011550327.png)

5. 后面出现的所有的兄弟元素——~
   
   

选择器的并列

多个选择器，用逗号分割。
语法糖，某些语法不会改变他的本质，但是可以减轻写语法的负担。例如：两个选择器的代码内容一样。