#前端学习笔记#day3
27-35
网页三个部分
结构（html）
表现（CSS）
行为 (JavaScript)
Css 层叠样式表，css可以用来设置网页中元素的样式
-style内联样式
this is my web
-将样式写到head中的style标签中，给所有的p标签设置颜色（内部样式表，只能用在一个网页）
-外部样式表（最佳使用方式）
可以将css样式编写到一个外部的css文件中
通过link标签引入(link写在head内)，只要想使用这个样式的网页都可以对其进行引用，使得样式可以在不同页面中复用。
Style.css中
p{
color: blue;
font-size: 80px;
}
文档中
这句话在other中
-css语法
Style区域无法用平时的注释方法，这里和普通的html不同，需要遵守css的语法
这里注释需要/* */
Css选择器
-元素选择器
根据标签名来选择指定元素
标签名{}
-id选择器
根据元素的id属性选中一个元素
#id属性值{}
#box{} 表示选择id为box的
笑问客从何处来
不要设置多个相同Id
-类选择器
.class属性
如果选择多个id设置一样的样式，可以使用class标签，他和id类似，不同的是class可以重复使用
可以通过class属性为元素分组
可以同时为一个元素指定多个Class属性
表示h1有两个属性，abc和blue
-通配选择器
选择页面中所有元素
*{}
复合选择器
-交集选择器
同时选择符合多个条件的元素
选择器1选择器2选择器3{}
交集选择器中如果有元素选择器，必须选择元素选择器开头。
将class为red的div字体大小设置为30px (div red)相当于一个元素选择器加类选择器
div.red{font-size: 40px;}
.a.b.c{} 既是a类也是b类也是c类
-并集选择器(选择器分组),用时选择多个选择器对应的元素
选择器1，选择器2{}
h1,div{font-size: 44px;}
-关系选择器
父元素
直接包含子元素的元素
子元素
直接被父元素包含的元素
祖先元素 （比父元素范围更大，直接或者间接）
直接或者间接包含后代元素的元素
一个元素的父元素也是它的祖先元素
后代元素
直接或者间接被祖先元素包含的元素
兄弟元素
拥有相同父元素的元素
子元素选择器
作用：选中指定父元素的指定子元素（选子元素）
语法：父元素>子元素{}
后代元素选择器
作用：选中指定元素内的指定后代元素
语法：祖先 后代 （中间空格）
兄弟元素选择器
作用：选择下一个兄弟
语法：前一个+下一个
作用：选择下边所有兄弟
语法：兄~弟
属性选择器
作用：选择含有指定属性的元素
语法：[属性名]
作用：选择含有指定属性的元素
语法：[属性名=属性值]
作用：选择含有属性值以指定值开头的元素
语法：[属性名^=属性值]
作用：选择含有属性值以指定值结尾的元素
语法：[属性名$=属性值]
作用：选择属性值中含有某值的元素
语法：[属性名*=属性值]
伪类选择器（伪类：不存在的类，特殊的类）
ul表示无序列表，li表示列表项
输入ul>li，回车后会自动生成。
ul>li*5会生成五个列表项，摁tab键自动切换到下一个中间
-伪类用来描述一个元素的特殊状态
比如：第一个子元素、被点击的状态、鼠标移入的元素。。
-伪类一般情况下都是使用：开头
:first-child 第一个子元素
:last-child最后一个子元素
:nth-child(n) 选中第n个子元素 n的范围:0-无穷
2n或者even 表示选中偶数位的元素
odd 或者2n+1表示奇数位的元素
:first-of-type
:last-of-type
:nth-of-type
-这几个伪类的功能和上述的类似，不同的是他们在同元素中进行排序
ul>li:nth-of-type(1){color: darkorange;}
-:not() 否定伪类 将符合条件的元素从选择器中去除
ul>li:not(:first-child){color: darkorange;}
a的伪类
:link表示没有访问过的链接(不可以单独调整像素)
:visited 表示访问过的链接
:hover 用于表示鼠标移入的状态(可以调整像素)