CSS总结1

Css

第一种方式（内联样式）：在标签内部通过style属性来设置元素的样式

font-size:; 字体大小

第二种方式（内部样式表）：将样式写到head的style中

第三种方式（外部样式表）：可以将css样式编写到一个外部css文件中，然后通过link标签引入外部的css文件，将样式编写到为外部的css文件中，可以使用浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验<link rel=”stylesheet”  href=”css地址”>

/*  注释*/    1.元素选择器：根据标签名来选中指定的元素 例子：p{}  h1{}  2.id选择器：如果html元素是id=””,css样式#id{}  不能重复  3.类选择器：html:class 属性值css: .class   class是一个标签的属性，他和id类似，不同的是class可以重复使用可以通过class属性来为元素分组，可以同时为一个元素设置多个class  4.通配选择器：选中页面中所有元素 语法*{}

复合选择器：

如果有两个class的名字一样：<div class=”red”><div>  <p class=”red”></p>

想要选中一个：div.red{}  

选择器分组：选择器1，选择器2{}

关系选择器

子元素选择器：选中指定父元素的指定子元素；语法：父元素>子元素

后代元素选择器：选中指定元素内的指定后代元素；语法：祖先 后代  div span{}

兄弟选择器：1.选择下一个兄弟：语法前一个+后一个 : p+span{} 2.,选择下面所有的兄弟：语法兄~弟:p~span{}

属性选择器：

伪类选择器：一个冒号伪类，两个冒号伪元素

伪类（不存在的类）：用来描述一个元素的特殊状态，比如：第一个子元素，被点击的元素，鼠标移入的元素。。。

伪类一般情况下都是使用：开头。

:first-child第一个子元素    ul>li:first-child{}

:last-child最后一个子元素

:nth-child()选中第n个子元素 特殊值：写n，第n个，n的范围0到正无穷；2n或者even

表示偶数位的元素；2n+1或odd:表示选中奇数的元素

以上这些伪类都是根据所有子元素进行排序，li:first-child，如果第一个<li>前面有<span></span>,没有显示结果，第一个不是li,而是span，span也不显示效果。

:first-of-type

:last-of-type

:nth-of-type()

这几个伪类的功能和上述类似，不同点是他们在同类元素中进行排序 li:first-of-type ，如果第一个<li>前面有<span></span>,显示出来的结果还是在li上

:not()否定伪类

将符合条件的元素从选择器中去除：ul>li:not(:nth-child(3)){}：除了第三个。

:empty:选择没有子元素的

超链接伪类：1.没有访问过的链接

1. 访问过的链接

:link,:visited只能用在超链接，:hover,:active什么都能用

伪元素选择器：

p元素里面不能放块元素，只能放行内元素

样式的继承：我们为一个元素设置的样式同时也会应用到他的后代元素上

继承是发生在祖先后代之间的

继承的设计是为了方便我们开发，利用继承

注意：并不是所有样式都会被继承：比如 背景相关的，布局相关等的这些都会不被继承（背景默认是透明）

选择器的权重： 当我们通过不同的选择器，选择相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突。

发生样式冲突时，由选择器的权重（优先级）决定

选择器的权重：

内联样式（在html里直接style）   1000

Id选择器   100

类选择器   10

元素选择器 1

通配选择器（*） 0

继承的样式 没有优先级

div#box1:交集选择器（又在div里面，还得id=box1的）

比较优先级时，需要将所有的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的）

选择器的累加不会超过其最大值，类选择器在高也不会超过id选择器

如果优先级计算后相同，此时则优先使用靠下的样式

可以在某样式的后面添加 !Important，则此时该样式会获得最高的优先级。甚至超过内联样式  注意！在开发中一定要慎用！！！能不用就别用

选择器：元素选择器，id选择器，类选择器，通配选择器，复合选择器，关系选择器，属性选择器，伪类选择器，伪元素选择器，交集选择器

单位：百分比：设置为相对于父元素的百分比

em:em是相对于元素的字体大小来计算

1em=1font-size

em会根据字体大小的改变而改变

rem:相当于根元素（html）的字体大小来计算

1rem=10font-size(html的字体大小)

颜色：RGB值，红绿蓝  0-255（0%-100%）之间

RGBA值：在RGB基础上增加了a表示不透明度

1表示完全不透明，0表示完全透明，.5半透明

十六进制的RGB的值：语法：#红色绿色蓝色

                    颜色浓度通过 00-ff

                    如果颜色两位两位重复可以进行简写

                    #aabbcc  -->  #abc

文档流（normal flow）：网页是一个多层结构，一层落着一层

通过css可以分别为每一层来设置样式，作为用户来讲只能看到最顶上一层，这些层中，最底下的一层称为文档流，文档流是网页的基础

我们所创建的元素默认都是在文档流中进行排列

对于我们来说元素有两个状态：1.在文档流中 2.不在文档流中（脱离文档流）

元素在文档流有什么特点：

块元素：1.块元素会在页面中独占一行（自上向下垂直排列）

2.默认宽度是父元素的全部（会把父元素撑满）

3.默认高度是被内容撑开（子元素）

行内元素：

1. 行内元素不会独占页面的一行，只占自身的大小
2. 行内元素在页面中自左向右排列，如果一行之中不能容纳下所有的行内元素，则元素会还到第二行继续自左向右排列（书写习惯一致）
3. 行内元素的默宽度和高度都是被内容撑开 。

盒模型

   

边框：border-width 默认值，一般都是3个像素

border-width可以用来指定四个方向边框的宽度

值的情况：四个值：上 右 下 左

          三个值：上 左右 下

          两个值：上下 左右

          一个值：上下左右

除了border-width还有一组border-xxx-width

xxx可以是top right bottom left

用来单独指定某一个边的宽度

border-color用来指定边框的颜色，同样可以分别指定四个边的边框，规则和border-width一样

也可以省略不写，如果省略则自动使用color的颜色值

border-style指定边框的样式

solid表示实线  dotted点状虚线 dashed虚线  double双线

默认值是none，表示没有边框

内边距（padding）

外边距（margin）：

水平方向的布局：