css3_day01

以下内容是自己看视频边学习边做的笔记，有点多，杂，但均是自己认为的主要的东西。

1.css样式表组成

1）css样式表由规则组成，规则由选择器+声明块组成，声明块由一条条的声明组成，声明由css属性+css属性值组成的键值对组成。比如：css的内联样式表。

2.内联样式

1. *{ 代码 } ;
   " * " 是选择器， “{”和“｝”是声明块。

3.优先级是声明的，而不是选择器的，但选择器会对他产生影响

4.个别基本选择器及其拓展

4.1. 后代选择器： div ul{ };

后代包括儿子和孙子等等。

4.2. 子元素选择器（也叫直接后代选择器）： div>ul{ };

只包括儿子。

4.3相邻兄弟选择器：选择器1 + 选择器2{ };

选择器2是选择器的兄弟选择器，且紧跟着选择器1，是选择器1的下一个相邻的选择器，不包括相邻的上一个选择器。

4.4通用兄弟选择器：选择器1 ~ 选择器2{ };

只要是它的兄弟即可，相不相邻无所谓。

5.一般看一个属性的样式，先看他的默认值和是否继承

一般选择不可继承的样式进行测试。

6.以后查API去MdN查

7.属性选择器

7.1.存在属性选择器：div[name] { } ;

div中只要有name属性的就满足这个选择器的筛选条件。

7.2.值选择器

7.2.1子串值选择器

7.2.1.1 div[name|=val]{ };

所有div的name值是val或着以val-开头的元素。

7.2.1.2 div[name^=val]{ };

“^”是托字符，div的name值以val开头的元素。

7.2.1.3 div[name$=val]{ };

div的name值以val结尾的元素。

7.2.1.4 div[name*=val]{ };

div的name值包含val的元素。

8.链接伪类（也叫锚点伪类）

1）伪类属性

a:link{ };——访问前的状态
a:visited{ };——访问后的状态
a:hover{ };——鼠标放上去链接时的状态
a:active{ };——鼠标点击链接时的状态

link、visited两个属性涵盖了hover和active，所以link和visited都放在hover和active之前。

2）uri就是浏览器输入网址栏里面#后面的值，一般与target属性一起使用

举例：

<style type="text/css">
	#div1{
		display:none;
	}
	:target{
		display:block;
	};
</style>
<a href="#div1">div1</a>
<div id="div1">div1</div>

本来链接“div1”下面没有文字，
但点击链接“div1”，链接“div1”下面会显示出div1这段文字。

9.动态伪类

1）

hover
active

2）注意：

1. 隐私与：visited选择器
   只有下列属性才能被应用到已访问的链接：
   color、background-color、border-color
   这是规定。

10.表单伪类

1）
:enabled 匹配可编辑的表单
:disable 匹配被禁用的表单
:checked 匹配被选中的表单
:focus 匹配聚焦的表单
如： input:enabled{ background-color:red }; 可被编辑的表单的背景颜色变成红色。

11.overflow属性

overflow控制内容溢出元素框时，如何处理。
若值取hidden，则溢出的内容会被隐藏。

12.border-radius:50%会使边框变成圆形，但是实际区域还是width和height决定

如可能出现如下情况，如图：

13.结构性伪类

13.1.nth-child系列

1）定义：#wrap div:nth-child(1){ }:

找到id为wrap的所有子元素，且找到第一个子元素，该子元素如果是div的话，执行声明域里的样式。“1”是索引，且索引是从1开始的。

2）first-child：

第一个子元素，且包括他自己。如：#wrap p:first-child{ color:red}; 相当于#wrap div:nth-child(索引){ color:red} 里面的索引为1。

3）last-child：

最后一个子元素，且包括他自己。如：#wrap p:last-child{ color:red}; 相当于#wrap div:nth-child(索引){ color:red} 里面的索引为最后一个。

4） only-child：

有且仅有一个元素。如：#wrap p:only-child{color:red}; id为wrap的元素子元素有且仅有一个，且该元素是p标签，所以p标签里面的字体变成红色。

13.2.nth-of-type系列

1）定义：#wrap div:nth-of-type(索引){ }:

找到id为wrap的元素的第一个为div的子元素，并执行声明域里的样式。

2） first-of-type：

第一个元素。如：#wrap p:first-of-type{ }; id为wrap的第一个p标签。

3） last-of-type：

最后一个元素。如：#wrap p:last-of-type{ }; id为wrap的最后一个p标签。

4） only-of-type：

唯一一个元素。如：#wrap p:only-of-type{ }; id为wrap的唯一一个p标签。

5）注意：nth-of-fype以元素为中心

意思是当 .wa:nth-of-type{ }; 是，所有class是wa的元素都会使用这个样式，只有div:nth-of-type才三只是第一个div元素才使用该样式。

6)最后一个不加右边框的问题（not(:last-of-type)）

div > a:not(:last-of-type) { } ; div里面的子元素的所有a标签中除了最后一个外，其他都使用该样式。

13.3.empty

div:empty{ } 当div内容为空时就使用这个样式，哪怕有一个空格，这个内容也不算是空的。

14.伪元素选择器

1）定义:DOM以外的元素，由CSS生成。

2）伪元素选择器有：before、after、first-letter、first-line、selection

     一般这样使用： div::befoer{ };

3）first-letter:

     第一个字母应用这个样式

4）first-line:

     第一行应用这个样式

5）selection:

     鼠标按住左键不放，选中段落或文字时，该段落或文字所在的元素应用这个样式

15.声明的特殊性和来源

1）特殊性定义：

多个不同的选择器指向同一个元素的同一个属性时，最高特殊性值的选择器的样式决定这个元素的这个属性。

2） 特殊性值的大小：

内联样式（即html的元素的属性style）> id选择器 > 类选择器、属性选择器、伪类选择器 > 元素选择器、伪元素选择器

3） 通配符是0特殊性

它大于继承性，因为继承性的特殊性值不存在，就是比0还小。

4）重要声明

重要声明比非重要声明更优先一级。通常先对重要声明的一组和非重要声明的一组分别比较，比较出各组的特殊性值最高的选择器出来，然后判断他们样式的属性值是否冲突，若冲突，则重要声明的优先一级。

5）比较声明的优先级

1.来源排序
2.选择器的特殊性排序
3.最终按代码顺序排序

6）来源

1.来源大概分为三种:读者、创作人员、用户代理
2.来源大小比较：读者的重要声明>创作人员的重要声明>创作人员的正常声明>读者的正常声明>用户代理的声明

16.font属性的注意点

必须要给出size和family的值，不然font属性不起作用。

17.自定义字体

1）举例：

<style type="text/css">
	@font-face{
		font-family:"自己起的名字";
		url(字体的路径);
	}
</style>

18.字体图标

1）定义:

就是在自定义的family样式下，输入特殊的文本，在浏览器解析的时候就能显示出指定的矢量图，这个文本就是你自己用这个文本和矢量图标绑定的。

19.display注意点

当display的值为none，下面的元素会网上顶，浏览器重新绘制网页。

20.opacity

定义：设置元素的透明度。
注意：它虽然不可继承，但它影响自己的后代元素，即此元素opacity值是0.1，即透明度较高，那么它的后代元素也是透明度较高的。

21.rgba

rgba(值1，值2，值3，值4) 其中值1、2、3是颜色的red、green、blue的值，值4是透明度的值，0为完全透明，1为完全不透明，一般取值0-1之间。
这可以用来实现背景透明，文字不透明的需求。

22.text-shadow

定义：用来为文字添加阴影，而且可以添加多层阴影，阴影的参数值之间用“，”隔开，多个阴影时，第一个阴影在最上面。

默认值：none ， 不可继承

值：
1. color（可选）：在偏移量之前或之后指定，若不指定，则使用UA（用户代理）选择的颜色。
2. offset-x、offset-y（必选，单位px）：指定阴影相对于文字的偏移量。
offset-x：指定水平偏移量，若为负值，则阴影位于文字左边
offset-y：指定垂直偏移量，若为负值，则阴影位于文字上面
若两者均为0，则阴影位于文字正后方
3. blur-radius（可选，单位px)：值越大，模糊半径越大，阴影也就越大越淡

23.direction和unicode-bidi（文字排版）

一般的文字时从左到右显示，为了使文字从右到左显示则可以利用这两个属性。
例子: 原本文字排版为“尚硅谷”，为呈现“谷硅尚”，可以给该元素添加属性direction:rtl; 和 unicode-bidi:bidi-override; 其中rlt就是right to left的简写。

24.溢出显示省略号

定义:就是当内容超出元素的宽度时，最后以省略号的形式显示，而不是超出的内容被直接隐藏。
直接三条代码即可：

white-space:nowrap;		//不许换行
overflow:hidden;		//超出的内容隐藏
text-overflow:ellipsis;		//超出的内容以省略号显示
还有一个隐性条件就是这个元素不是被内容撑开的，即一般是block类型，而不是inline类型