前端 HTML&CSS 学习笔记3（基于尚硅谷教学视频）
二十一集（css语法）
1.在标签中的内容不属于HTML，应该都采用css语法（例如：注释为/* */）
选择器
1.通过选择器可以选中页面中指定的元素
2.并且可以将声明块中的样式应用到选择器对应的元素中
声明块
1.声明块紧跟在选择器后面，使用一对{ }括起来，
2.声明块中实际上就是一组一组的名值对结构（也称为声明）
3.声明的样式名和样式值之间用：隔开，
4.声明块中可以写多个声明，声明之间用；隔开
例如下面p为选择器，{ }中为声明块
二十二集（安装HBulider）
列位看官自行研究
二十三集（内联元素和块元素）
块元素
1.所谓块元素就是会独占一行的元素，无论内容有多少都会独占一行
2.本身并没有任何语义，就是一个纯粹的块元素，并且不会为他里面的内容设置任何默认样式
3.主要用于页面布局
4.块元素还有 等
内联元素(行内元素)
1.所谓行内元素指的是只占自身空间大小的元素，不会占一行
2.没有任何语义，专门用来选中文字，并为文字设置样式
（例如：想为网页中的文字 “面对你，我永远是个二傻子” 设置样式，必须先将其放于一个标签中，
然而他本身又不属于任何标签，则可以写为面对你，我永远是个二傻子）
3.常见的内联元素：![]()
1.一般只会使用块元素包含内联元素
例如：
2.元素可以包含任意元素，除了他本身
3.元素中不可以包含任何块元素
二十四集（常用选择器）
元素选择器
1.选中对应的所有元素
2.语法：元素名{ }
例如：p{
font-size:20px;
}
id选择器
1.通过元素的id值选中唯一的那个元素
2.语法：#id属性值{ }
例如：#p1{
font-size:20px;
}
类选择器
1.通过元素的class属性值选择一组元素
2.语法：.class属性值{ }
例如：.p2{
font-size:20px;
}
选择器分组（并集选择器）
1.可以同时选中多个选择器对应的元素
2.语法：选择器1，选择器2，选择器n{ }
例如：h1,#p1,.p2{
font-size:20px;
}
通配选择器
1.选中页面中所有的元素
2.语法：*{ }
例如：*{
font-size:20px;
}
复合选择器（交集选择器）
1.用来选中 同时满足多个选择器 的元素
2.语法：选择器1选择器2选择器n{ }
例如：h1#p1.p2{
font-size:20px;
}
二十五集（子元素和后代元素选择器）
元素关系
1.父元素
2.子元素
3.祖先元素
4.后代元素
后代元素选择器
1.选中指定元素的指定后代元素
2.语法：祖先元素 后代元素{ }
例如：div span{
font-size:20px;
}
3.注：上例中在不同情况下，也可以灵活更改，如
只选中id为 div1 下的span元素
#div1 span{
font-size:20px;
}
选中 div 下的 p1 下的 span 元素
div p1 span{
font_size:20px;
}
子元素选择器
1.选中指定父元素的指定子元素
2.语法：父元素 > 子元素{ }
例如：div > span{
font-size:20px;
}
3.IE6及以下的浏览器不支持子元素选择器
4.写代码时要考虑代码的兼容型问题，要问清楚兼容哪些平台，哪些浏览器
二十七集（伪类选择器）
1.伪类专门用来表示元素的一种特殊的状态，比如：访问过的链接，普通的链接（未访问的链接），获取焦点的文本框......
2.当我们需要为处在这些特殊状态的元素设置样式时，便可以使用伪类
为没访问过的链接设置为绿色
:link 表示普通的链接（没访问过的链接）
例如
a:link{
color:green;
}
为访问过的链接设置为红色
:visited 表示访问过的链接
例如：
a:link{
color:red;
}
注：浏览器是通过历史记录来判断是否访问过，由于涉及用户隐私，只能设置字体颜色
设置被鼠标移入的链接为蓝色
:hover 表示鼠标移入状态
例如：
a:hover{
color:blue;
}
设置被鼠标点击的链接为黑色
:active 表示被鼠标点击的状态
例如：
a:active{
color:black;
}
注：“:hover”和“:active”也能设置超链接以外的元素（不过在IE6中无效）
例如：设置段落元素
p:hover{
color:black;
}
p:active{
color:black;
}
文本框获取焦点
:focus 获取焦点
例如：文本框获取焦点后背景颜色变为黄绿色
input:focus{
background-color:greenyellow;
}
注：文本框元素
为选中内容设置样式
::selection 为选中内容设置样式
例如：设置段落标签中被选中的内容 背景颜色为橘黄色
p::selection{
background-color:orange;
}
二十八集（伪元素）
1.伪元素：使用伪元素表示元素中的一些特殊位置
例如：
为段落元素的第一个字母设置颜色
p:first-letter{
color: yellow;
}
为段落元素中的第一行设置背景颜色
p:first-line{
background-color: yellow;
}
:before 表示元素最前面的部分
例如：
p:before{
content:"我大概，就是个二傻子叭";
color:red;
}
:after 表示元素最后面的部分
p:after{
content:"我大概，就是个二傻子叭";
color:green;
}
注：一般before和after都需要结合content样式一起使用，通过content可以向before和after中添加一些内容，且这些内容在网页中无法被选中
二十九集（属性选择器）
title属性：可以指定给任何元素，当鼠标移到该元素上时，title属性值将会作为提示文字出现
例如：我是个二傻子
属性选择器：可以根据元素中的属性或者属性值来选取指定元素
语法：[属性名]选取含有指定属性的元素
例如：为具有title属性的p元素设置背景颜色为黄色
p[title]{
background-color:green;
}
语法：[属性名=“属性值”]选取含有指定属性值的元素
例如：为title值为hello的p元素设置背景颜色为绿色
p[title="hello"]{
background-color:green;
}
也可以写为
p[title=hello]{
background-color:green;
}
语法：[属性名^=“属性值”]选取属性值以指定内容开头的元素
例如：为所有title属性值中开头是we的元素 设置背景颜色为绿色
p[title^="we"]{
background-color:green;
}
语法：[属性名$=“属性值”]选取属性值以指定内容结尾的的元素
例如：为所有title属性值结尾是i的元素 设置背景颜色为绿色
p[title$="i"]{
background-color:green;
}
语法：[属性名*=“属性值”]选取属性值包含指定内容的元素
例如：为所有title属性值中包含sad的元素 设置背景颜色为绿色
[title*="sad"]{
background-color:green;
}
三十集（子元素的伪类）
:fist-child 可以选中第一个子元素
例如：为子元素是p标签（且还要是第一个子元素）设置背景颜色为绿色
p:first-child{
background-color:green;
}
:last-child 可以选中第一个子元素
例如：为子元素是p标签（且还要是最后一个子元素）设置背景颜色为绿色
p:last-child{
background-color:green;
}
:nth-child 可以选中任意位置的子元素
例如：为子元素是p标签（且还要是第三个子元素）设置背景颜色为绿色
p:nth-child(3){
background-color:green;
}
注：括号中除了数字外，还可以填even(选中偶数位置的子元素),odd(选中奇数位置的子元素)
:first-of-type
:last-of-type
:nth-of-type
这三种和前三种非常类似，只不过child是在所有的子元素中排列选择，而type是在当前类型元素中排列选择
用法如下：
p:first-of-type{
background-color:green;
}