Day03 css语法、引入、边框显示三角形、link和@import区别、css选择器

css（Cascading Style Sheets）

CSS (Cascading Style Sheets) 层叠样式表，是一个用于修饰文档（可以是标记语言HTML，也可以是XML或者SVN）的语言

1 css语法：

    1.规则集：选择器{} {声明块} 一个属性就是一个声明
    2.声明块规则：属性名和属性值之间：隔开 多对属性之间使用;隔开 最后一对属性可以不加;建议加
    3.注释:/**/
    4.速记写法: border:width style color

2 用边框显示一个三角形？

    width：0;
    height：0;
    border：100px solid transparent;
    border-top:100px solid red;
    思考：已经设置了border：100px solid transparent;
      为什么border-top中还要设置100px solid
      答：优先级的问题且border-style的默认值是none

3 引入css的方式

    1.行内样式 内联样式 style属性
    2.内部样式表 style标签
    3.外部样式表
        1.使用link标签引入css文件
        2.使用@import引入 不建议使用
    优先级：行内样式>内部样式表/外部样式表(就近原则：内部样式表在文档中的位置和外部样式表在文档中引入的位置)

4 link和@import区别：

        所属范围：link属于html标签 @import属于css
        加载：link同时加载html  和  css @import优先加载css
        兼容性：link无兼容性 @import支持ie5+

5 CSS选择器

5.1 标签选择器

作用: 根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性
格式:
标签名称{
	属性:值;
	}
注意点:
1.标签选择器选中的是当前界面中所有的标签, 而不能单独选中某一个标签
2.标签选择器无论标签藏得多深都能选中
3.只要是HTML中的标签就可以作为标签选择器(h/a/img/ul/ol/dl/input....)

5.2 id选择器

作用: 根据指定的id名称找到对应的标签, 然后设置属性
格式:
#id名称{
	属性:值;
	}
注意点:
1.每个HTML标签都有一个属性叫做id, 也就是说每个标签都可以设置id
2.在同一个界面中id的名称是不可以重复的
3.在编写id选择器时一定要在id名称前面加上#
4.id的名称是有一定的规范的
	4.1 id的名称只能由字母/数字/下划线，a-z 0-9 _ 
	4.2 id名称不能以数字开头
	4.3 id名称不能是HTML标签的名称，不能是a h1 img input ...
5.在企业开发中一般情况下如果仅仅是为了设置样式, 我们不会使用id ,因为id是留给js使用的

5.3 类选择器

作用: 根据指定的类名称找到对应的标签, 然后设置属性
格式:
.类名{
	属性:值;
	}
注意点:
1.每个HTML标签都有一个属性叫做class, 也就是说每个标签都可以设置类名
2.在同一个界面中class的名称是可以重复的
3.在编写class选择器时一定要在class名称前面加上.
4.类名的命名规范和id名称的命名规范一样
5.类名就是专门用来给CSS设置样式的
6.在HTML中每个标签可以同时绑定多个类名
格式:
<标签名称 class="类名1 类名2 ...">
错误的写法:

  <p class="para1" class="para2">

5.4 后代选择器

作用: 找到指定标签的所有特定的后代标签, 设置属性
格式:
标签名称1 标签名称2{
	属性:值;
	}
先找到所有名称叫做"标签名称1"的标签, 然后再在这个标签下面去查找所有名称叫做"标签名称2"的标签,然后在设置属性
例如：div p{}
注意点:
1.后代选择器必须用空格隔开
2.后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代
3.后代选择器不仅仅可以使用标签名称, 还可以使用其它选择器
4.后代选择器可以通过空格一直延续下去

5.5 子元素选择器

作用: 找到指定标签中所有特定的直接子元素, 然后设置属性
格式:
标签名称1>标签名称2{
	属性:值;
	}
注意点:
1.子元素选择器只会查找儿子, 不会查找其他被嵌套的标签
2.子元素选择器之间需要用>符号连接, 并且不能有空格
3.子元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器
4.子元素选择器可以通过>符号一直延续下去
5.后代选择器和子元素选择器之间的区别?
		后代选择器使用空格作为连接符号
		子元素选择器使用>作为连接符号
		后代选择器会选中指定标签中, 所有的特定后代标签, 也就是会选中儿子/孙子..., 只要是被放到指定标签中的特定标签都会被选中
		子元素选择器只会选中指定标签中, 所有的特定的直接标签, 也就是只会选中特定的儿子标签
6.后代选择器和子元素选择器之间的共同点
		后代选择器和子元素选择器都可以使用标签名称/id名称/class名称来作为选择器
		后代选择器和子元素选择器都可以通过各自的连接符号一直延续下去
7.如何选择
如果想选中指定标签中的所有特定的标签, 那么就使用后代选择器
如果只想选中指定标签中的所有特定儿子标签, 那么就使用子元素选择器

5.6 交集选择器

作用: 给所有选择器选中的标签中, 相交的那部分标签设置属性
格式:
选择器1选择器2{
	属性:值;
	}    
注意点:
1.选择器和选择器之间没有任何的连接符号
2.选择器可以使用标签名称/id名称/class名称
3.交集选择器仅仅作为了解, 企业开发中用的并不多

5.7并集选择器

作用: 给所有选择器选中的标签设置属性
格式:
选择器1,选择器2{
属性:值;
}
注意点:
1.并集选择器必须使用,来连接
2.选择器可以使用标签名称/id名称/class名称

5.8兄弟选择器

1. 相邻兄弟选择器 CSS2

作用: 给指定选择器后面紧跟的那个选择器选中的标签设置属性
格式:
选择器1+选择器2{
	属性:值;
	}
注意点:
1.相邻兄弟选择器必须通过+连接
2.相邻兄弟选择器只能选中紧跟其后的那个标签, 不能选中被隔开的标签

2. 通用兄弟选择器 CSS3

作用: 给指定选择器后面的所有选择器选中的所有标签设置属性
格式:
选择器1~选择器2{
	属性:值;
	}
注意点:
1.通用兄弟选择器必须用~连接
2.通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签, 无论有没有被隔开都可以选中

5.9 伪类选择器

伪类以":"开头，用在选择器后，用于指明元素在某种特殊的状态下才能被选中

5.9.1 序选择器（结构伪类选择器）

CSS3中新增的选择器最具代表性的就是序选择器
1.同级别中的第几个
:first-child 			选中同级别中的第一个标签
:last-child 			 选中同级别中的最后一个标签
:nth-child(n) 		 选中同级别中的第n个标签
:nth-child(odd) 	选中同级别中的所有奇数
:nth-child(even)    选中同级别中的所有偶数
:nth-child(xn+y)    x和y是用户自定义的, 而n是一个计数器, 从0开始递增
例如(3n+1)分别对应1,4,7.....
:nth-last-child(n)   选中同级别中的倒数第n个标签
:only-child 			 选中父元素仅有的一个子元素E。仅有一个子元素时生效
注意点: 不区分类型
2.同级别同类型中的第几个
	:first-of-type 选中同级别中同类型的第一个标签
	:last-of-type  选中同级别中同类型的最后一个标签
	:nth-of-type(n) 选中同级别中同类型的第n个标签
	:nth-last-of-type(n)  选中同级别中同类型的倒数第n个标签
	:only-of-type 选中父元素的特定类型的唯一子元素

5.9.2 动态伪类选择器

E:link（链接伪类选择器）：选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接		描点上	
E:visited（链接伪类选择器 ）：选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于		链接描点上
E:active（用户行为选择器）：选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上
E:hover （用户行为选择器）： 选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持		a:hover

5.9.3 a标签的伪类选择器

1.通过我们的观察发现a标签存在一定的状态
	1.1默认状态, 从未被访问过
	1.2被访问过的状态
	1.3鼠标长按状态
	1.4鼠标悬停在a标签上状态
2.格式
	:link 修改从未被访问过状态下的样式
	:visited 修改被访问过的状态下的样式
	:hover 修改鼠标悬停在a标签上状态下的样式
	:active 修改鼠标长按状态下的样式
3.注意点
	3.1 a标签的伪类选择器可以单独出现也可以一起出现
	3.2 a标签的伪类选择器如果一起出现, 那么有严格的顺序要求
	默认状态:link->被访问状态:visited->鼠标悬停状态:hover->鼠标长按状态:active
	编写的顺序必须要遵守爱恨原则 love hate
    3.3 a:link、a:visited都是可以省略的，简写在a标签里面。也就是说，a标签涵盖了link、visited的状态（前提是都具有了相同的属性） 例如：

.nav ul li a{
			display: block;
			width: 120px;
			height: 50px;
			text-decoration: none;
			background-color: purple;
			color:white;
		}
		.nav ul li a:hover{
			background-color: orange;
		}

5.9.4 否定伪类

作用：可以从已选中的元素中剔除出某些元素
语法：:not(选择器)
例如:
	p:not(.hello){
		background-color: yellow;
		}

5.9.5 伪元素选择器

使用伪元素来表示元素中的一些特殊的位置
::after
	表示元素的最后边的部分
	一般需要结合content这个样式一起使用，通过content可以向after的位置添加一些内容
::before
	表示元素最前边的部分
	一般需要结合content这个样式一起使用，通过content可以向before的位置添加一些内容     
::first-letter
	为第一个字符来设置一个样式
::first-line    
	为第一行设置一个样式

5.9.6 属性选择器

作用: 根据指定的属性名称找到对应的标签, 然后设置属性
格式:
[attribute=value]
作用: 找到有指定属性, 并且属性的取值等于value的标签, 然后设置属性
！最常见的应用场景, 就是用于区分input属性

input[type=password]{}
<input type="text" name="" id="">
<input type="password" name="" id="">

属性的取值是以什么开头的：
	[attribute|=value] CSS2
	[attribute^=value] CSS3

两者之间的区别:
	CSS2中的只能找到value开头,并且value是被-和其它内容隔开的
	CSS3中的只要是以value开头的都可以找到, 无论有没有被-隔开
	
属性的取值是以什么结尾的
	[attribute$=value] CSS3

属性的取值是否包含某个特定的值
	[attribute~=value] CSS2
	[attribute*=value] CSS3
	
两者之间的区别:
CSS2中的只能找到独立的单词, 也就是包含value,并且value是被空格隔开的
CSS3中的只要包含value就可以找到

5.9.7 通配符选择器

作用: 给当前界面上所有的标签设置属性
格式:
	*{
		属性:值;
	}

5.9.8 组合选择器

多个选择器组合使用，例如 "div.one" 表示class为one的div元素