css

Css
一、简介
修改元素

1. 内联样式、行内样式：
   A、在标签内部通过style属性来设置元素的样式<p style color:red;> 内容
   B、问题：使用内联样式，样式只对一个标签生效，如果希望影响到多个元素必须在每一个元素中都复制一遍，并且样式发生变化时需要一个个修改，极不方便
   注：开发时绝不使用内联样式
2. 内部样式表：
   A、 将样式编写到head中的style里，通过css选择器来选中元素并为其设置各种样式
   B、 好处：
   a. 可以同时为多个标签设置样式，并且修改时只需要修改一处即可
   b. 更加方便对样式进行复用
   C、 问题：只对一个网页起作用，样式不能跨页面复用
3. 外部样式表：
   A、 可以将css样式编写到一个外部的css文件中，通过link标签来引入外部的css文件
   B、 外部样式表需要通过link标签进行引入，意味着只要使用这些样式的网页都可以对其引用，使样式可以在不同网页进行复用
   C、 将样式编写到外部的css文件中，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验
   （代码见02_css简介）

二、语法
（一）基本语法

1. 符号
   /* */表示css注释，（Ctrl加斜杠），会被浏览器忽略
2. 基本语法：选择器、声明块
   A、 选择器：通过选择器可选定页面中指定元素。比如：p的作用就是选中页面中所有p元素
   B、 声明块：通过声明块来指定要为元素设置的样式，由一个个的声明组成，是一个名值对结构（名值对：一个样式名对应一个样式值，名和值之间以：链接，；结尾）
   （代码见02_css语法）
   （二）常用选择器
   1.元素选择器
   A、作用：根据标签名来选中指定的元素
   B、语法：标签名{}
   C、例子：p{}、h1{}、div{}
   2.id选择器
   A、作用：根据元素的id属性选择一个元素
   B、语法：#id属性值{}
   C、例子：#box{}、#red{}
   3.类选择器
   A、作用：根据元素的class属性值选中一组元素
   B、语法：.class属性值
   4.通配选择器
   A、作用：选中页面中的所有元素
   B、语法：*
   （代码见03_css常用选择器）
   （三）复合选择器
   1.交集选择器
   A、作用：选中同时复合多个条件的元素
   B、语法：选择器1.选择器2.选择器3.选择器n{}
   C、注意点：交集选择器中如果有元素选择器，必须用元素选择器开头
   2.并集选择器（选择器分组）
   A、作用：同时选择多个选择器对应的元素
   B、语法：选择器1，选择器2，选择器3，选择器n{}
   （四）父子选择器
   1.元素：
   父元素：直接包含子元素的元素
   子元素：直接被父元素包含的元素
   祖先元素：直接或间接包含后代的元素（一个元素的父元素也是祖先元素）
   后代元素：直接或间接被祖先元素包含的元素
   兄弟元素：拥有相同父元素的元素
   2.子元素选择器
   A、 作用：选中指定父元素的指定子元素
   B、 语法：父元素>子元素
3. 后代元素选择器
   A． 作用：选中指定元素内的指定后代元素
   B． 语法：祖先 后代
4. 兄弟元素
   A、 选择下一个兄弟：前一个+后一个
   B、 选择下边所有元素：兄~弟
   （五）属性选择器
   1.[属性名]选择含有指定属性的元素
   P [title]
   2.[属性名=属性值]选择含有指定属性和属性值的元素
   P[title=abc]
   3.[属性名^=属性值]选择属性值以指定值开头的原数
   P[title^=abc]
   4.[属性名$=属性值]选择属性值以指定值结尾的元素P[title$=abc]
   5.[属性名*=属性值]选择属性值中含有某值得元素的元素
   P[title*=e]
   （六）伪类选择器
   1.伪类：一个冒号开头，用来描述一个元素的特殊状态，比如：第一个元素、被点击的元素、鼠标移入的元素……
   A、：first-child第一个子元素
   B、：last-child最后一个子元素
   C、nth-child()选中弟n个子元素
   特殊值： n 第n个 n的范围0-正无穷，2n\even为偶数，2n+1\odd奇数
   以上伪类都是根据所有子元素进行排序
   D、：first-of-type
   E、：last-of-type
   F、: nth-of-type
   这几个伪元素功能与上述类似，不同点是他们在同类型元素中进行排序
   G、:not()否定伪类:将符合条件的元素从选择器中抽出
   2.伪元素::两个冒号
   （七）超链接的伪类
   1.没有访问过的链接：link
   2.访问过的链接：visited
   由于隐私的原因，所以visited这个伪类只能修改连接的颜色
5. hover鼠标移过去的链接
6. active鼠标已过去再点击一下的链接（激活\正在点击）
   （八）伪元素选择器
   伪元素：页面中一些特殊的并不真实存在的元素（特俗的位置）
   使用::开头
   ::first-letter表示第一个字母
   ::first-line表示第一行
   ::selection表示选中的元素
   ::before元素开始的位置
   ::after元素的最后
   Before和after必须结合content属性使用
   （九）样式的继承
   1.样式的继承：我们为一个元素设置的样式的同时也会应用到它的后代元素，发生在祖先和后代之间
   A、 好处：方便了开发，利用继承可以将通用的样式统一设置到共同的祖先元素上，这样只需一次即可让所有元素都具有该样式
   B、 注意：并不是所有的样式都会被继承，比如：背景相关的、布局相关等的样式不会被继承
   （十）选择器的权重
   1.样式的冲突：当通过不同的选择器，选择相同的元素，并且为相同的样式设置不同的值时，此时发生冲突
   2.发生冲突时，样式由选择器权重（优先级）决定
   选择器权重：
   A、内联样式 1，0，0，0
   B、id选择器 0，1，0，0
   C、类和伪类选择器 0，0，1，0
   D、元素选择器 0，0，0，1
   E、通配选择器 0,0,0,0
   F、继承的样式 没有优先级
   3.比较优先级时，需将所有的选择器优先级进行相加计算，最后优先级越高，则越优先选择
   比如：
   div#box1{background-color:yellow;}
   #box1{background-color:orange;}
   显示为黄色，因为div#box1相加为101，大于#box1
   4.分组选择器单独计算
   5.选择器的累加不会超过其最大的数量级，类选择器再高也不会超过id选择器
   6.如优先级计算后相同，优先使用靠下的样式
   7.可以在某一个样式的后边添加!important，则此时该样式会获取到最高的优先级，甚至超过内联样式
   比如：.d1{background-color:purple !important;}
   注意：开发时能不用则不用
   （十一）单位HTML
   长度单位：
   1.像素：
   A、-屏幕（显示器）实际上由一个个的小点点构成
   B、-不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰
   C、-同样的200px在不同设备下显示效果不一样

2.百分比：
A、 也可以将属性值设置为相对于其父元素属性的百分比
B、 设置百分比可以使子元素跟随父元素的改变而改变
3.em：
A、 em是相对于元素的字体大小来计算的
B、 1em=1font-size
C、 em会根据字体大小的改变而改变
4.rem：
A、 rem是相对于根元素的字体大小来计算的
B、 比如：html{font-size:30px;}会使其改变
（十二）颜色html
1.颜色单位：
A、 在css中可以直接使用颜色来设置各种颜色，比如：red、orange、yellow、blue、green……
B、 但是在css中直接使用颜色非常不方便
2.RGB值：
A、 RGB通过三种颜色的不同浓度来调配出不同颜色
B、 R red,G green,B blue
C、 每一种颜色的范围在0-255之（0%-100%）间
D、 语法：RGB（红色，绿色，蓝色）
background-color:rgb(255,0,0);显示为红色
background-color:rgb(255,255,255);显示为白色
3.RGBA:
A、 在rgb基础上增加了一个元素a表示不透明度
B、 需要4个值，前三个和rgb一样，第四个表示不透明度
1表示完全不透明 0表完全透明 .s表半透明
4.十六进制的rgb值
A、语法：#红色绿色蓝色
B、颜色浓度00-ff
background-color:#ff0000;表示红色
C、颜色两位两位重复可以进行缩写：
background-color:#aabbccà#abc
5.HSL值 HSLA值
H 色相（0-360）
S 饱和度（0%-100%）
L 亮度（0%-100%）
三、布局
（一）文档流html
文档流（normal flow）
A、 网页是一个多层结构，一层摞着一层
B、 通过css可以分别为每一层来设置样式
C、 作为用户来讲只能看到最顶上一层
D、 这些层中，最底下层称为文档流，是网页的基础
E、 我们创建的元素默认都是在文档中进行排列
F、 元素主要有两个状态
在文档流中
不在文档流中（脱离文档流）
E、 元素在文档流中有什么特点：
块元素：
a在网页中独占一行
b默认宽度是父元素的全部（会把父元素撑满）
c默认高度被内容撑开（子元素）
行内元素：
a不会独占页面一行，只占自身的大小
b在页面中左向右水平排列，如果一行中不能容纳所有元素，则元素会换到第二行继续自左向右排列
c默认宽度和高度都是被内容撑开
2.盒子模型

2.1 border

表示盒子的边框

分为四个方向：

上top、右right、下bottom、左left
border-top、border-right、border-bottom、border-left
每个边框包含三种样式：

border-top-color、border-top-width、border-top-style
border-right-color、border-right-width、border-right-style
border-bottom-color、border-bottom-width、border-bottom-style
border-left-color、border-left-width、border-left-style
样式style的取值：

solid实线、dashed虚线、dotted点线、double双线、inset内嵌的3D线、outset外嵌的3D线

简写，三种方式：

按方向简写：

border-top、border-right、border-bottom、border-left

书写顺序：

border-顺序：width style color

按样式简写：

border-color、border-width、border-style

书写顺序：

border-样式：top right bottom left

必须按顺时针方向书写，同时可以缩写：

border-width:2px;--------->四个边框的宽度均为2px
border-width:1px 2px;
border-width:1px 2px 4px;
规则：如果省略，则认为上下一样，左右一样

终级简写：

如果四个边框样式完全相同，border:width style color;

2.2 padding

表示盒子的内边距，即内容与边框之间的距离

同样也分为四个方向，也可以简写（按顺时针方向，默认上下一样，左右一样）

注意：如果上下冲突，则以上为准，如果左右冲突，则以左为准

2.3 margin

表示盒子的外边距，即盒子与盒子之间的距离

同样也分为四个方向，也可以简写（按顺时针方向，默认上下一样，左右一样）

居中对齐：

/* 元素的水平居中 /
/ 1.块级元素的水平居中 /
margin:0 auto;
/ 提示：块级元素必须指定宽度 /
/ 2.文本的水平居中 /
text-align:center;
/ 3.垂直居中，将height和line-height设置为相同 */
height:100px;
line-height:100px;

nihao

hello

welcome

3.其他

3.1 元素所占空间

页面中的元素实际所占的空间

宽度=width+左右padding+左右border+左右margin
高度=height+上下padding+上下border+上下margin
3.2 盒子属性默认值

不同标签的盒子属性默认值可能不同，需要自己设置

body,ul,ol,dl,li,p,h1,h2,h3,h4,h5,h6,form{
margin:0;
padding:0;
}

welcome to css!

hello world

• hello1
• hello2
• hello3

示例：

3.3 外边距的合并

也称为外边距的折叠，指的是两个块级元素垂直外边距相遇时，它们将合并为一个外边距，合并后的外边

距值为其中较大的那个外边距值

两种情况：

当一个元素出现在另一个元素上面时，第一个元素的下边距与第二元素的上边距会发生合并
当一个元素包含在另一个元素中时，并且没有内边距或边框把外边距分隔开时，两个元素的上外边距会发生合并
外边距的合并的好处，让排版在视觉上显得更美观

div1

div2

---

<div class="div3">
	<div class="div4"></div>
</div>
<hr>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
<p>p7</p>

六、定位方式

1.简介

通过position属性实现对元素的定位，有四种定位方式

常用取值：

取值 含义 说明
static 默认值 按照常规文档流进行显示
relative 相对定位 相对于标签原来的位置进行的定位
absolute 绝对定位 相对于第一个非static定位的父标签的定位
fixed 固定定位 相对于浏览器窗品进行定位
设置定位方式后，还要设置定位属性（偏移量）：top、bottom、left、right

2.相对定位

先设置元素的position属性为relative,然后再设置偏移量

3.绝对定位

先设置父标签为非static定位，然后设置元素的position属性为absolute，最后再设置偏移量

注意：

一般来说都会将父标签设置为非static定位
如果父标签不是非static定位，则会相对于浏览器窗口进行定位
设置元素为绝对定位后，元素会浮到页面上方
4.固定定位

先设置元素的position属性为fixed，然后再设置偏移量

设置元素为固定定位后，元素会浮动在面面上方

5.z-index

设置元素定位方式后，元素会浮在页面上方，此时可以通过z-index属性设置优先级，控制元素的堆叠顺序

取值为数字，值越大优先级越高，默认为auto(大多数浏览器默认为0)

注意：只能给非static定位的元素设置z-index属性

div1

div2

div3

div4

示例：