DAY3视频学习笔记

一、CSS引入方式

（一）行类样式的CSS写法（优先级最高）

（二）内嵌式CSS写法（优先级次之）

【注意】要以分号“；”结束

（三）外链式CSS写法（优先级最低，但是最常用的）

其原理为新建一个css文件，专门记录CSS样式做装饰用。然后利用链接将html与css连接起来。

二、CSS最常用的选择器

（一）标签选择器

（二）class选择器


c1命名可重复

也可以同时有c1又有c2，不过c1样式会被后面的c2覆盖掉

（三）id选择器

其命名不可以重复，只能有一个d1，d2……

以上三种选择器遵循就近原则，所以显示id样式的最优先，class的次之，标签选择器的优先级最低。

（四）@标签（了解就好，所以不弄了……）

（五）空格与逗号的含义

body后有个空格，表示“body**下面**的cl样式”
c1后有个逗号，表示c1**和**c2

三、CSS特殊的选择器

（一）“*”控制的是页面中默认的所有标签

【css的注释方式】

（二）“+”


“.c1+p”控制的是紧随c1标签后面的那个p标签内的样式，所以图中代码最终效果是只有“bbbbbbbbb”变成红色（注意，得是同一级，如假设只有c1所在的那个标签以及内容为“rrrrrrrrrrrr”的标签，不能够更改样式 ）

（三）“~”

效果

“c1~p”控制的是c1**后面的所有的同级**p元素

（四）div>p

“div>p”控制的是div下面的所有子元素p标签的内容样式
“>”表示“子元素的”

（五）a [title]


“a[title]
{
}”表示的是对含有“title”属性的a标签进行控制

下图演示的同理：

（对含有“http://www.pdf”属性的标签进行样式更改）

“以……开头”的写法：

用^表示

“以……结尾”的写法：

用$表示

“包含……”的写法

用*表示

四、CSS选择器权重

直接上图不解释了

五、CSS常用属性

（一）

css对字体的属性设置具有继承性，即使是对较大范围的标签进行字体属性设置，小范围内的字体属性也能适用。但像宽、高就 不具有继承性，要调整宽、高的话只能各个针对性的设置。

（二）CSS里如何控制超链接&表格的细线合并
链接各种状态下的css属性

【注意】要遵循“爱恨”顺序原则（love hate）

表格的边框效果

表格边框细线合并&文本内容居中

效果图：

（三）边框、背景属性

border的style总共有solid（实线）、dashed（虚线）、dotted（点点）三种；
border的属性可以用一句话来描述各种属性：style 粗细 边框颜色

css插入图片的写法；

background-repeat有：repeated-x（横向重复）、repeat-y（纵向重复）、no-repeat（不重复）以及一个默认的横向&纵向都重复的；

background-attachment为fixed时，即使滚动，图片位置也会固定；

backgrond-position控制图片的位置；

以上的背景颜色、路径、是否重复、固定、位置都可以合成一句话来写。

（四）关于块的隐藏、滚动条、z-index属性

overflow:hidden; 超出文本框时实现隐藏；

overflow:auto; 超出文本框有滚动条；

overflow:scroll; 无论超没超出都会有滚动条出现；

display:none; 隐藏的块标签不会占位置；

visibility:hidden; 隐藏的块标签仍然会占住原来的位置；

z-index: 数字越大，层级越高，越在顶层；

（五）鼠标、列表、垂直居中属性

cursor有pointer（手指）、wait（加载中）、help（求助）三种；

list-style-type有none（无）、disc（实心圆）、circle（空心圆）、square（方块）等；
list-style-image可以实现图片列表序（不知道怎么讲……反正就是那些原本是圆的变成图片）；

vertical-align有middle、text-top、text-button三种。

六、行内元素、块级元素

（一）

div是最典型的块级元素，做布局用的；

（二）块级元素、行内元素的转化

display:inline; 块级元素转化成行内元素;
display:block; 行内元素转化成块级元素；

display:inline-block; 两种元素的特点结合（既可以紧挨着，也可以调宽、高）

以上……内容好多，不做笔记绝对会忘……