字体：font-family："宋体";

大小：font-size:--px;

加粗：font-weight：bold;

斜体：font-style:normal/italic(斜体)/oblique(倾斜字体);

颜色：color:red;/color:rgb(xx,xx,xx);/color:rgb(xx%,xx%,xx%);

line-height 属性设置行间的距离（行高）

"sans-serif",以保证在不同操作系统下,网页字体都能被显示。

缩写：font：bold 12px/1.5em "宋体",sans-serif;在缩写时 font-size 与 line-height 中间要加入“/”斜杠

字体样式：

字体：font-family："宋体";

大小：font-size:--px;

加粗：font-weight：bold;

斜体：font-style:normal/italic(斜体)/oblique(倾斜字体);

颜色：color:red;/color:rgb(xx,xx,xx);/color:rgb(xx%,xx%,xx%);

line-height 属性设置行间的距离（行高）

"sans-serif",以保证在不同操作系统下,网页字体都能被显示。

缩写：font：bold 12px/1.5em "宋体",sans-serif;在缩写时 font-size 与 line-height 中间要加入“/”斜杠

color的值有3种设置方式：

英文命令颜色

p{color:red;}

RGB颜色

这个与 photoshop 中的 RGB 颜色是一致的，由 R(red)、G(green)、B(blue) 三种颜色的比例来配色。

p{color:rgb(133,45,200);}

每一项的值可以是 0~255 之间的整数，也可以是 0%~100% 的百分数。如：

p{color:rgb(20%,33%,25%);}

十六进制颜色

这种颜色设置方法是现在比较普遍使用的方法，其原理其实也是 RGB 设置，但是其每一项的值由 0-255 变成了十六进制 00-ff。

p{color:#00ffff;}

15、水平居中设置

行内元素（例如文本）：text：center

定宽块状元素：margin：20px(与上方的距离) auto;/* margin-left 与 margin-right 设置为 auto */

已知宽高设置盒子水平垂直居中:父元素(position:relative)子元素(position:absolute;top:50%;left:50%;;margin:-100px 0 0 -100px;)/*-100px代指子元素高和宽的一半*/

宽高不定设置盒子水平垂直居中:(position:relative)子元素(position:absolute;top:50%;left:50%;;transform:translate (-50% -50%;))对已知宽高同样可实现

选择器最高层级!important

我们在做网页代码的时，有些特殊的情况需要为某些样式设置具有最高权值，怎么办？这时候我们可以使用!important来解决。

如下代码：

p{color:red!important;}
p{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

这时 p 段落中的文本会显示的red红色。

注意：!important要写在分号的前面

这里注意当网页制作者不设置css样式时，浏览器会按照自己的一套样式来显示网页。并且用户也可以在浏览器中设置自己习惯的样式，比如有的用户习惯把字号设置为大一些，使其查看网页的文本更加清楚。这时注意样式优先级为：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，但记住!important优先级样式是个例外，权值高于用户自己设置的样式。

标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码：p{color:red;} /*权值为1*/p span{color:green;} /*权值为1+1=2*/.warning{color:white;} /*权值为10*/p span.warning{color:purple;} /*权值为1+1+10=12*/#footer .note p{color:yellow;} /*权值为100+10+1=111*/
注意：还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。

标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码：p{color:red;} /*权值为1*/p span{color:green;} /*权值为1+1=2*/.warning{color:white;} /*权值为10*/p span.warning{color:purple;} /*权值为1+1+10=12*/#footer .note p{color:yellow;} /*权值为100+10+1=111*/
注意：还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。

14、flex弹性盒模型

在父容器的添加(display:flex;),可以让块状元素（子元素）并排显示，默认从左到右排列与父元素左边没有间隙

横轴排列方式(display:flex;justify-content:flex-start;*以左上角为起点左对齐*/)，flex-end(右对齐),center(居中对齐),sapce-between(两端对齐，元素之间距离相等),sapce-around(每个元素两侧间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍)

竖轴排列方式(display:flex;align-items:flex-start;*以左上角为起点左对齐*/)，flex-end(以左下角为起点右对齐),center(以竖轴左侧中点并排),baseline(以项目的第一行文字的基线对齐),stretch(如果项目未设置高度或设为auto，将占满整个容器的高度)

给子元素设置flex占比：(.box1{flex:1;.box2{flex:2}横排占比为1:2),设置占比后原先的宽度属性会失效

13、css3布局模型

三种：流动模型(Flow),浮动模型(Float),层模型(Layer)

流动模型（默认）：块状元素自上而下的顺序排列分布，默认宽度100%，内联元素从左到右水平分布显示

浮动模型：让块状元素并排显示，float:left;(左浮动-从窗口左边开始排)

层模型：让HTML元素在网页中精准定位，像对每个图层进行操作定位；

绝对定位:（position:absolute; left:--px;top:--px;/*离左上角的绝对位置*/）

相对定位：(position:relative)先由float方式生成一个元素，在相对于以前的位置移动,但偏移前的位置保持不动（即覆盖不了div之前位置以外的范围）

固定定位：(position:fixed)与绝对定位不同的是，固定定位是对于视图本身，即不受滚动条影响

absolute与relative结合使用：例如将A定位到B的底部(A{position:relative;}B{width:100%;position:absolute;bottom:0;})

第一步

首先把两个需要改变样式的标签选中 

.first,#second span{}

第二步

改变样式 color:green;

一行代码搞写 .first,#second span{color:green;}

之前我是分开来写的如下

.first{

    color:green;

}

#second span{

    color:green;

}

结果系统提示错误了，但显示内容没有错误。

border-style（边框样式）常见样式有：

dashed（虚线）| dotted（点线）| solid（实线）。

<beader>页头

<footer>页眉

<section>截面中间区域

<aside>侧边框

<span>标记文本

通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色：

* {color:red;}

包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码：

.first  span{color:red;}

这行代码会使第一段文字内容中的“胆小如鼠”字体颜色变为红色。

请注意这个选择器与子选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。

总结：>作用于元素的第一代后代，空格作用于元素的所有后代

字体样式：

字体：font-family："宋体";

大小：font-size:--px;

加粗：font-weight：bold;

斜体：font-style:normal/italic(斜体)/oblique(倾斜字体);

颜色：color:red;/color:rgb(xx,xx,xx);/color:rgb(xx%,xx%,xx%);

line-height 属性设置行间的距离（行高）

"sans-serif",以保证在不同操作系统下,网页字体都能被显示。

缩写：font：bold 12px/1.5em "宋体",sans-serif;在缩写时 font-size 与 line-height 中间要加入“/”斜杠

字体样式：

字体：font-family："宋体";

大小：font-size:--px;

加粗：font-weight：bold;

<form></form>是form表单中最大的标签
<input>是<form></form>标签下的子标签 
关于input的属性：最重要的是type，还有value，还有plesholder 这几个属性
关于type：有一些值，包括text ，password， 

12、css3盒模型

元素分类：块（block）元素：单独一行，元素的高、宽、行高(line-height)都能被设置；例如<div>,<p>,<h>,<ul>,<ol>,<table>,<form>,<address>...

内联元素(inline)：位于同一行，高、宽以及底边距不可设置; 例<a>,<span>,<br>,<i>,<label>,<em>,<strong>...

内联块(inline-block)元素：结合块元素和内联元素的特点，例<input>,<img>

块元素>>内联元素：display:inline;

元素隐身：display:none

盒模型的组成(从内到外)：weight(内容宽度),padding(填充部分-元素与边框的距离)，border(边框),margin(边界-与相邻元素的距离)

元素背景色：background-color

边框样式(border-style):dashed(虚线)|dotted(点线)|solid(实线)，单独设置边框：bordrer-top/bottom/left

圆角的使用：(左上角)border-top-left-radius:--px;

css3盒模型

元素分类：块（block）元素：独立一行，元素的高、宽、行高(line-height)都能被设置；例如<div>,<p>,<h>,<ul>,<ol>,<table>,<form>,<address>...

内联元素(inline)：位于同一行，高、宽以及底边距不可设置; 例<a>,<span>,<br>,<i>,<label>,<em>,<strong>...

css3盒模型

元素分类：块（block）元素：独立一行，元素的高、宽、行高(line-height)都能被设置；例如<div>,<p>,<h>,<ul>,<ol>,<table>,<form>,<address>...

内联元素(inline)：位于同一行，高、宽以及底边距不可设置; 例<a>,<span>,<br>,<i>,<label>,<em>,<strong>...

内联块(inline-block)元素：结合块元素和内联元素的特点，例,<input>,<img>

块元素>>内联元素：display:inline

css3盒模型

元素分类：块（block）元素：独立一行，元素的高、宽、行高(line-height)都能被设置；例如<div>,<p>,<h>,<ul>,<ol>,<table>,<form>,<address>...

内联元素(inline)：位于同一行，高、宽以及底边距不可设置; 例<a>,<span>,<br>,<i>,<label>,<em>,<strong>...

内联块(inline-block)元素：结合块元素和内联元素的特点，例,<input>,<img>

块元素>>内联元素：display:inline

元素隐身：display:none

盒模型的组成(从内到外)：weight(内容宽度),padding(填充部分-元素与边框的距离)，border(边框),margin(边界-与相邻元素的距离)

元素背景色：background-color

边框样式(border-style):dashed(虚线)|dotted(点线)|solid(实线)，单独设置边框：bordrer-top/bottom/left

圆角的使用：(左上角)border-top-left-radius:--px;

常用的块状元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

常用的内联元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

常用的内联块状元素有：

<img>、<input>

11、文本修饰

text-decoration：underline(定义文本下的一条线)/overline(文本上的一条线)/line-throught(穿过文本的一条线)

开头空两格：text-indent：2em/&nbsp&nbsp

行间距（行高）：line-height;

word-spacing(单词间距);letter-spacing(字母间距);

块状元素中的文本，图片：text-align:center(居中)/text-align:left(居左)

例：p{font-size:14px}

span{font-size:0.8em;}

结果 span 中的字体“例子”字体大小就为 11.2px（14 * 0.8 = 11.2px）。

 p{font-size:12px;line-height:130%}

设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）。