前言
最近在学习牛腩新闻发布系统的时候接触了CSS和HTML，在接触这些知识之后才对制作网页有了一定的认识，先将遇到的部分知识点总结一下。
一、CSS简介
CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。CSS最早是1996年由W3C审核通过并推荐使用的，CSS目前最新版本为CSS 3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。
二、 HTML与CSS的互补
1.HTML发展到今天存在3个主要缺点：
第一，由于HTML代码不规范、臃肿，需要足够智能和庞大的浏览器才能够正确显示HTML；
第二，数据与表现混杂，当页面要改变显示时就必须重新制作HTML；第三，不利于搜索引擎搜索。
2.HTML也有两个显著的优点：
第一，使用Table的表现方式不需要考虑浏览器兼容问题；
第二，简单易学，易于推广。
3.CSS的产生恰好弥补了HTML的主要缺点，主要表现在以下几个方面。
CSS用于增强或控制网页样式，并允许将样式信息与网页内容分离。
引用样式表的目的是将“网页结构代码”和“网页样式风格代码”分离开，从而使网页设计者可以对网页布局进行更多的控制。
利用样式表，可以将整个站点上所有网页都指向某个CSS文件，设计者只需要修改CSS文件中的某一行，整个网页上对应的样式都会随之发生改变。
三、块级元素和行内元素
在CSS里还有特别重要的一个技术点，就是块级元素和行内元素，看看他们的区别在哪里。
区别：
行内元素与块级函数可以相互转换，通过修改display属性值来切换块级元素和行内元素，行内元素display：inline，块级元素display：block。
行内元素和其他行内元素都会在一条水平线上排列，都是在同一行的；块级元素却总是会在新的一行开始排列，各个块级元素独占一行，垂直向下排列，若想使其水平方向排序，可使用左右浮动（float：left/right）让其水平方向排列。
行内元素不可以设置宽高，宽度高度随文本内容的变化而变化，但是可以设置行高（line-height），同时在设置外边距margin上下无效，左右有效，内填充padding上下无效，左右有效；块级元素可以设置宽高，并且宽度高度以及外边距，内填充都可随意控制。
块级元素可以包含行内元素和块级元素，还可以容纳内联元素和其他元素；行内元素不能包含块级元素，只能容纳文本或者其他行内元素。
四、选择器
１.作用
用选择器规定语法的样式
修改网页直接从公共样式表修改就行，不破坏在html中写的代码。
同一个网页可以多次引用多个样式表文件。
２.类型：
（１）标签选择器
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者 元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。
标签选择器 可以把某一类标签全部选择出来 div span
（２）类别选择器
类选择器以一个点号显示：
.center {text-align: center}在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。
在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则。
<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>
.searchbtn { /* 搜索按钮的样式 */
background-image: url("../Image/search.png");
background-repeat: no-repeat;
width: 103px;
height: 33px;
border-style: none;
background-color: #fff;
}.commonfrm {
/* 框架公共样式 */
border: 1px solid #DEDFDE;
float: left;
width: 560px;
}
（３）ID选择器
ID选择器以 "#" 来定义。
下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：
#red {color:red;}
#green {color:green;}
#top img {
/* 頂部图片样式 */
float: left;
border-width: 0;
}
#footer {
/* 尾部样式 */
text-align: center;
border-top: 1px solid #D6D7D6;
padding-top: 10px;
clear: left;
}下面的 HTML 代码中，id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>
选择器大全链接
https://www.runoob.com/cssref/css-selectors.html
嵌套选择：span
有唯一性，只能被引用一次
(4)全局声明*
* { /* 把默认值都设置为0 */
margin: 0;
padding: 0;
}五、链接
a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻a:link, a:visited {
/* 鼠标未移上去的超链接的样式, 超链接访问后的样式 */
color: #000;
text-decoration: none;
}
a:hover {
/* 鼠标移到超链接上的样式 */
color: #00f;
text-decoration: underline;<a href="http://www.tg029.com" target="_blank"><img src="Image/tg029logo.gif" width="600px" /></a>
六、CSS 盒子模型(Box Model)
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。当我们进入网页的时候按F12就可以看见自己制作的网页的盒子模型，效果图如下。
不同部分的说明：
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
