【CSS】学习笔记

1、css 样式由选择符和声明组成，而声明又由属性和值组成

(1)选择符：在{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素

(2)声明：｛｝”中的的是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以分号“;”分隔

2、注释：/*注释语句*/

3、CSS样式

(1)内联式：可以直接把css代码放在html标签中。css样式代码要写在style=" "中，多条css样式代码中间用分号隔开

(2)嵌入式：把css样式代码写在<style type="text/css"></style>标签之间

(3)外联式：css放在外部的文件中，写在head标签里，<link href="base.css" rel="stylesheet" type="text/css" />

(4)优先级：内联式 > 嵌入式 > 外部式。离被设置元素越近优先级别越高

嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面

4、类选择器：.类选器名称{css样式代码;}

步骤：(1)使用合适的标签把要修饰的内容标记起来<span></span>

(2)使用class="类选择器名称"为标签设置一个类，加在头标签里面

(3)设置类选器css样式，多个类用空格分开

5、ID选择器：#ID选择器{css样式代码;}

为标签设置id="ID名称"

6、类选择器和ID选择器区别：ID选择器只能在文档中使用一次，类选择器可以使用多次

可以使用类选择器词列表方法为一个元素同时设置多个样式（用空格分开），ID选择器不可以

7、子选择器：大于符号(>)，用于选择指定标签元素的第一代子元素（作用于子元素的第一代后代）

8、包含选择器：加入空格，用于选择指定标签元素下的后辈元素（作用于所有子后代元素）

9、通用选择器：*{css} 匹配html中所有标签元素

10、伪类选择符：a:hover{css;}修改鼠标滑过的状态

11、分组选择符：（，）想为html中多个标签元素设置同一个样式时

12、某些css样式有继承性（子标签也被），比如color，但是设置边框border就没有继承性

13、特殊性：标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100，继承的权值最低为0.1。如果有多个css样式作用在同一个标签上，那么哪个权值高就用哪个样式（两个标签则权值叠加）

14、层叠：在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。

15、重要性：!important设置最高权重，在css后面，分号前面

16、设置字号：font-size:20px;

设置颜色：color:red;

设置字体：font-family:"宋体";

设置粗体：font-weight:bold

设置斜体：font-style:italic;

设置下划线：text-decoration:underline;

设置删除线：text-decoration:line-through;

设置缩进：text-indent:2em;（2em=文字的两倍大小）

设置行间距（行高）：line-height:1.5em;

设置字母间距：letter-spacing:50px;

设置单词间距：word-spacing:50px;

设置居中居左居右：text-align:left/center/right;

17、html中的标签元素被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。

(1)块状元素：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

(2)内联元素：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

(3)内联块状元素：<img>、<input>

18、块状元素性质：

(1)块级元素独占一行(2)可以设置width和height，默认宽度为一整行，除非单独设置宽度(3)可以设置margin和padding属性。

可以使用display:block使其他种元素具有块状元素的性质

19、内联元素性质：

(1)不能设置width和height(2)多个行内元素排成一行，直到一行排不下，才会换新一行(3)只可以设置水平方向的边距，如：margin-left,margin-right（外边距）,padding-left,padding-right.（内填充）

display:inline;

20、内联块状元素：元素既可以在一行内显示，又可以设置宽高边距

display:inline-block

21、盒模型

(1)边框（border）：围绕着内容及补白的线，可以设置它的粗细、样式和颜色

（分开写的话：border-width，border-style，border-color）

可以单独设置上/下/左/右边框：border-bottom/top/left/right

1)border-style：dashed（虚线）| dotted（点线）| solid（实线）

2）border-width：thin | medium | thick，最常用还是像素（px）

(2)元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

(3)填充（padding）：内容与边框之间可以设置距离。连着写的话顺序是上、右、下、左（顺时针）

单独设置的话：padding-top/bottom/left/right

如果都一样就可以省略只写一个像素

padding不是文字到边框的距离！是内容到边框的距离，内容的大小是由width和hight决定的。其实就是扩大一圈盒子

(4)边界（margin）：上、右、下、左（顺时针）就是盒子之间的距离

padding和margin的区别：padding在边框里，margin在边框外。

22、布局模型

(1)流动模型（Flow）默认

特点：块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，宽度显示100%

内联元素都会在所处的包含元素内从左到右水平分布显示，都在一行，挤不下才换行

(2)浮动模型 (Float)

让两个块状元素并排显示 加入float:left/right

(3)层模型（Layer）让html元素在网页中精确定位

1)绝对定位(position: absolute)：position:absolute，使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位，这四个是对margin的改变，所以要反着移动

2)相对定位(position: relative)：position:relative，偏移前的位置保持不动（移动完有原来的位置也要占着）

3)固定定位(position: fixed)：position:fixed;相对移动的坐标是视图（屏幕内的网页窗口）本身（如果下和右像素都是0则在右下角）

4)相对于其他元素的定位：

参照定位的元素必须是相对定位元素的前辈元素；参照定位的元素必须加入position:relative;定位元素加入position:absolute

23、颜色缩写：当设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半。

24、字体缩写：直接font:后面加值;

至少要指定 font-size 和 font-family 属性

在缩写时 font-size 与 line-height 中间要加入“/”斜扛

25、颜色网站：http://nipponcolors.com/#shironezumi

26、em：就是本元素给定字体的 font-size 值（可以设置段的缩进）

27、水平居中设置：

1)行内元素：text-align:center;

2)定宽块状元素（width是固定值）：设置margin值，“左右margin”值为“auto”，上下margin可以随便设置

3)不定宽块状元素（width不是固定值）

加入 table 标签（可以看做一个定块状元素）然后用margin

设置 display: inline 方法：设为行内元素，text-align:center

设置 position:relative 和left:50%：通过给父元素设置 float:left，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。

（第一步：把父元素浮动到左边,同时向右偏移50%,相当于把父元素的左边缘对齐到整行的中间

第二步：把子元素向右偏移50%,这个50%是父元素的50%,即是wrap的50%,而此时wrap的宽度刚好就等于子元素的宽度,也是子元素本身的50%,这样刚好就居中了）

28、垂直居中设置：

1)父元素高度确定的单行文本：设置父元素的 height 和 line-height 高度一致。(height: 该元素的高度，line-height: 行间距，指在文本中行与行之间的基线间的距离 )。

2)父元素高度确定的多行文本：

使用插入 table  (包括tbody、tr、td)标签，同时设置 vertical-align：middle。

设置块级元素的 display:table-cell（设置为表格单元显示），激活 vertical-align 属性，