最近想学习学习前端相关，先从基础吧；
本文主要是在菜鸟笔记上的html教程中的笔记或者总结，主要给自己查询；
参考链接：http://www.runoob.com/
CSS简介
- CSS 指层叠样式表 (Cascading Style Sheets)；
- 样式定义如何显示 HTML 元素，通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率，外部样式表通常存储在 CSS 文件中，多个样式定义可层叠为一
HTML 标签原本被设计为用于定义文档内容，样式表定义如何显示 HTML 元素，样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。
CSS语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
p {color:red;text-align:center;}
P:选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。
每个属性有一个值。属性和值被冒号分开。
CSS声明总是以分号(;)结束，声明组以大括号({})括起来:
CSS可读性更强
p
{
color:red;
text-align:center;
}CSS注释以 “/” 开始, 以 “/” 结束
Id 和 Class
id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器, CSS 中 id 选择器以 “#” 来定义。
ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
#para1
{
text-align:center;
color:red;
}
<p id="para1">Hello World!</p>
<p>这个段落不受该样式的影响。</p>class 选择器
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点”.”号显示：
.center
{
text-align:center;
}
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p>
你也可以指定特定的HTML元素使用class。
p.center
{
text-align:center;
}
</style>
<h1 class="center">这个标题不受影响</h1>
<p class="center">这个段落居中对齐。</p>除了提到的 id 和 class 选择器外
第三种选择器为标签选择器，即以 html 标签作为 css 修饰所用的选择器。
第四种选择器即直接在标签内部写css代码。
<style>
h3{
color:red;
}
</style>
<h3>菜鸟教程</h3>
四
<h3 style="color:red;">菜鸟教程</h3>
这四种 css 选择器有修饰上的优先级，即：
第四种 > id > class > 第三种CSS 创建
如何插入样式表?
- 外部样式表(External style sheet)
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。
每个页面使用 标签链接到样式表。 标签在（文档的）头部：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}
不要在属性值与单位之间留有空格（如："margin-left: 20 px"- 内部样式表(Internal style sheet)
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用style标签在文档头部定义内部样式表，就像这样:
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>- 内联样式(Inline style)
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
<p style="color:sienna;margin-left:20px">这是一个段落。</p>- 多重样式
如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。
例如，外部样式表拥有针对 h3 选择器的三个属性：
h3
{
color:red;
text-align:left;
font-size:8pt;
}
而内部样式表拥有针对 h3 选择器的两个属性：
h3
{
text-align:right;
font-size:20pt;
}
假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：
color:red;
text-align:right;
font-size:20pt;- 多重样式优先级
样式表允许以多种方式规定样式信息。
一般情况下，优先级如下：
内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。
CSS 背景
背景颜色
background-color 属性定义了元素的背景颜色.
body {background-color:#b0c4de;}背景图像
background-image 属性描述了元素的背景图像.
默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.
body {background-image:url('bgdesert.jpg');}背景图像 - 水平或垂直平铺
默认情况下 background-image 属性会在页面的水平或者垂直方向平铺,有时候，这样看起来很不协调，
如果图像只在水平方向平铺 (repeat-x), 页面背景会更好些:
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}背景图像- 设置定位与不平铺
如果你不想让图像平铺，你可以使用 background-repeat 属性:
background-repeat:no-repeat;
可以利用 background-position 属性改变图像在背景中的位置:
background-position:right top;
背景- 简写属性
为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中.
背景颜色的简写属性为 “background”:
body {background:#ffffff url('img_tree.png') no-repeat right top;}当使用简写属性时，属性值的顺序为:
background-color
background-image
background-repeat
background-attachment
background-position
以上属性无需全部使用，你可以按照页面的实际需要使用.
CSS 背景属性
background 简写属性，作用是将背景属性设置在一个声明中。
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
background-color 设置元素的背景颜色。
background-image 把图像设置为背景。
background-position 设置背景图像的起始位置。
background-repeat 设置背景图像是否及如何重复。CSS 文本格式
文本颜色
十六进制值 - 如: ＃FF0000;
一个RGB值 - 如: RGB(255,0,0);
颜色的名称 - 如: red
{color:red;}
文本的对齐方式
当text-align设置为”justify”，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。
{text-align:center;}
文本修饰
text-decoration 属性用来设置或删除文本的装饰;主要是用来删除链接的下划线：
{text-decoration:none;}
不建议强调指出不是链接的文本，因为这常常混淆用户:
{text-decoration:underline;}
文本转换
文本转换属性是用来指定在一个文本中的大写和小写字母。
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
文本缩进
文本缩进属性是用来指定文本的第一行的缩进。
{text-indent:50px;}
letter-spacing 这个样式使用在英文单词时，是设置字母与字母之间的间距。
如果想设置英文单词之间的间距，可以使用 word-spacing;
color 设置文本颜色
direction 设置文本方向。
letter-spacing 设置字符间距
line-height 设置行高
text-align 对齐元素中的文本
text-decoration 向文本添加修饰
text-indent 缩进元素中文本的首行
text-shadow 设置文本阴影
text-transform 控制元素中的字母
unicode-bidi 设置或返回文本是否被重写
vertical-align 设置元素的垂直对齐
white-space 设置元素中空白的处理方式
word-spacing 设置字间距CSS 字体
字体系列
font-family 属性设置文本的字体系列。font-family 属性应该设置几个字体名称作为一种”后备”机制，如果浏览器不支持第一种字体，他将尝试下一种字体。
注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family：”宋体”。
p{font-family:"Times New Roman", Times, serif;}字体样式
主要是用于指定斜体文字的字体样式属性。
这个属性有三个值：
正常 - 正常显示文本
斜体 - 以斜体字显示的文字
倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}字体大小
请务必使用正确的HTML标签，就h1 h6表示标题和p表示段落：
字体大小的值可以是绝对或相对的大小。
Remark 如果你不指定一个字体的大小，默认大小和普通文本段落一样，是16像素（16px=1em）。
设置字体大小像素
{font-size:30px;}
用em来设置字体大小
1em和当前字体大小相等。在浏览器中默认的文字大小是16px。
h1 {font-size:2.5em;} /* 40px/16=2.5em */
使用百分比和EM组合
body {font-size:100%;}
h1 {font-size:2.5em;}
font 在一个声明中设置所有的字体属性
font-family 指定文本的字体系列
font-size 指定文本的字体大小
font-style 指定文本的字体样式
font-variant 以小型大写字体或者正常字体显示文本。
font-weight 指定字体的粗细。CSS 链接
链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。
这四个链接状态是：
- a:link - 正常，未访问过的链接
- a:visited - 用户已访问过的链接
- a:hover - 当用户鼠标放在链接上时(主要)
- a:active - 链接被点击的那一刻
当设置为若干链路状态的样式，也有一些顺序规则：
- a:hover 必须跟在 a:link 和 a:visited后面
- a:active 必须跟在 a:hover后面
文本修饰
text-decoration 属性主要用于删除链接中的下划线：
a:link {text-decoration:none;}
背景颜色
a:link {background-color:#B2FF99;}
CSS 列表
有序列表，无序列表，设置列表项标记为图像
list-style-type属性指定列表项标记的类型是；
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
列表项 圆圈 方块 大写字母 罗马字母
要指定列表项标记的图像，使用列表样式图像属性：
ul
{
list-style-image: url('sqpurple.gif');
}
列表 -简写属性
ul
{
list-style: square url("sqpurple.gif");
}
可以按顺序设置如下属性：
list-style-type
list-style-position (有关说明，请参见下面的CSS属性表)
list-style-image
所有的CSS列表属性
list-style 简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image 将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。CSS 表格
表格边框
table, th, td
{
border: 1px solid black;
}
请注意，在上面的例子中的表格有双边框。这是因为表和th/ td元素有独立的边界。
折叠边框
border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开：
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
Width和height属性定义表格的宽度和高度。
table
{
width:100%;
}
th
{
height:50px;
}
表格文字对齐
td
{
text-align:right;
}
垂直对齐
vertical-align:bottom;
表格填充
td
{
padding:15px;
}
表格颜色
th
{
background-color:green;
color:white;
}CSS 盒子模型
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
从外到内分别是：margin border padding content;
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
CSS 边框
边框样式
边框样式属性指定要显示什么样的边界。
border-style属性用来定义边框的样式
none: 默认无边框
dotted: dotted:定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框
double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
groove: 定义3D沟槽边框。效果取决于边框的颜色值 ridge: 定义3D脊边框。效果取决于边框的颜色值 inset:定义一个3D的嵌入边框。效果取决于边框的颜色值 outset: 定义一个3D突出边框。 效果取决于边框的颜色值边框宽度
您可以通过 border-width 属性为边框指定宽度。
为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值） 和 thin。
CSS 没有定义 3 个关键字的具体宽度;
边框颜色
border-color属性用于设置边框的颜色。可以设置的颜色：
name - 指定颜色的名称，如 “red”
RGB - 指定 RGB 值, 如 “rgb(255,0,0)”
Hex - 指定16进制值, 如 “#ff0000”
边框-单独设置各边
p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}border-style属性可以有1-4个值：
- border-style:dotted solid double dashed;上 右 底 左边框
- border-style:dotted solid double; 上 左右都是 底
- border-style:dotted solid; 上底 右左
- border-style:dotted; 四面
CSS 边框属性
border 简写属性，用于把针对四个边的属性设置在一个声明。
border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom 简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color 设置元素的下边框的颜色。
border-bottom-style 设置元素的下边框的样式。
border-bottom-width 设置元素的下边框的宽度。
border-left 简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color 设置元素的左边框的颜色。
border-left-style 设置元素的左边框的样式。
border-left-width 设置元素的左边框的宽度。
border-right 简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color 设置元素的右边框的颜色。
border-right-style 设置元素的右边框的样式。
border-right-width 设置元素的右边框的宽度。
border-top 简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color 设置元素的上边框的颜色。
border-top-style 设置元素的上边框的样式。
border-top-width 设置元素的上边框的宽度。CSS 轮廓（outline）
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。
outline 在一个声明中设置所有的轮廓属性
outline-color 设置轮廓的颜色
outline-style 设置轮廓的样式
outline-width 设置轮廓的宽度CSS Margin(外边距)
CSS Margin(外边距)属性定义元素周围的空间。
margin清除周围的元素（外边框）的区域。margin没有背景颜色，是完全透明的
margin可以单独改变元素的上，下，左，右边距。也可以一次改变所有的属性。
Margin可以使用负值，重叠的内容。
简写属性
margin属性可以有一到四个值
margin:25px 50px 75px 100px;
margin:25px 50px 75px;
margin:25px 50px;
margin:25px;
同前面的border
所有的CSS边距属性
margin 简写属性。在一个声明中设置所有外边距属性。
margin-bottom 设置元素的下外边距。
margin-left 设置元素的左外边距。
margin-right 设置元素的右外边距。
margin-top 设置元素的上外边距。持续学习中
TO BE CONTINUE