一般来说目前实现网页时不需要从零做起，网上有很多好的CSS代码可以使用但是为了能看懂那些代码（或更好地学习CSS框架），我们需要学习CSS的基本知识。

CSS的基本结构如下：

{ 　　:; 　　:; 　　:; 　　...... 　　:; }

解释：

的中文名叫“选择器”，表示对哪个元素设置样式。大括号内部设置具体的样式，如字体等。

设置样式的方法是通过多对:组合而成，中间用分号( ; )分隔。

这里举个简单的例子：

 body{ //对内的元素进行设置 　　font-size:12px; //设置字体大小为12px,px是pixel的缩写，表示像素 　　font-family:sans-serif,Georgia; //设置首选字体为sans-serif,如果本机内没安装此字体，则使用Georgia }

CSS的规则

1.继承原则：如果父标签定义了某样式，则默认对应的子标签也应用该样式。

2.就近原则：离修饰标签越近的CSS样式优先级越高。
 

引入CSS样式的方法

这里只介绍两种最常用的：

1.内部样式表：在内部添加：

2.外部样式表：将CSS放在文件(如home.css)中，并在内部添加：


在CSS中不可避免会遇到颜色设置，因此这里我们需要学习怎么表示颜色。

共有4种颜色表示法：

1.预定义颜色：例如“color:black”中的black就是预定义的颜色。

2.十六进制表示法：#ABCDEF，其中AB、CD、EF分别对应R、G、B。例子：#FFFFFF 表示白色。

3.短十六进制表示法：这是对第二种表示法的特例，当A=B时A和B只写一个(同样地，C=D、E=F 时也类似)。例子：#FF00CC 可简写为 #F0C.

4.rgb表示法：rgb(255,255,255) 表示白色。　　

CSS Reset

起因：在不同浏览器中的默认CSS样式可能是不同的，比如按钮，在IE中可能是样式A，在Chrome中是样式B，在Firefox中是样式C，这种不一致性会让开发者不爽。因此就需要CSS Reset来统一不同浏览器的默认样式。

CSS reset 通俗地说就是“一段CSS代码，这段代码能够初始化基本的标签，使得在不同浏览器中，各标签的显示样式是一样的。”

还有一个更加应用广泛的替代CSS Reset的代码：Normalize.css，他被很多框架使用。

最常用的CSS Reset代码是 Eric Meyer 写的“CSS Reset 2.0”，代码如下：

 /** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }

 * : 选择任何元素。格式为：*{...}

标签选择器：选择指定标签。格式为：{...}

id选择器：选择指定 id 的元素。某个 id 在一个页面中是唯一的。格式为：#{...}

class选择器：选择指定class的元素。格式为：.{...}。值得一提的是，class选择器的变型：

与标签选择器一起使用，格式为：.。表示只选择具有class=的标签。

多个class一起使用，格式为：..。表示class同时属于和的元素。

后代选择器：选择指定元素的指定后代元素（后代和子元素是不同的，并不一定要紧跟在父元素里面）。格式为：<空格> ，例如 div  h3 解释为“div元素的所有

标签”。

子元素选择器：选择指定元素的子元素（子元素指的是孩子，并不包含孙子...）。格式为： >。

属性选择器: 选择具有指定属性或指定属性具有特定值的元素。格式为：[][]或[=""][=""]。

部分匹配属性值：[*=""] 表示只要属性中包含值即可。

相邻兄弟选择器：选择(紧挨着的)相邻的兄弟的元素。格式为： + 。表示选择紧跟在selector1后面的selector2。

伪类选择器：

:first-child{...} . 当为某个元素的第一个子元素时应用样式。 

:focus{...} . 当拥有键盘输入焦点时应用样式。

a:link{...} . 当未被访问过时应用样式。

a:visited{...}. 当已被访问时应用样式。

a:hover{...} . 当鼠标悬浮在上时应用样式。（随着移动设备的越来越流行，我们发现移动设备是没有鼠标的，因此没有hover这个概念，hover变得不那么重要了。）

a:active{...}. 当被激活(激活指的是鼠标按下且未松开的这段时间)时应用样式。

注意：在css中一定要以：link -> visited -> hover -> active 的顺序进行声明！！！！

伪元素选择器：

:first-line{...}.  选择的第一行。注意：必须是块级元素。

:first-letter{...}. 选择的第一个字母。注意：必须是块级元素。

:before{content:"..."}. 在的前面插入内容。例如：h1:before{content:url(1.jpg)}表示在

前面插入一张图片。

:after{content:"..."}. 在的后面插入内容。

选择器分组：多个选择器可以用逗号（,）隔开，表示同时对多个选择器设置样式。格式为：,,{...}

应用：

1.选择一个有序列表中的第三行：ol > li:first-child + li + li

2.选择class="c1"的div：div.c1

选择器定义准则：

1.最常用的选择器：id选择器、class选择器。

2.尽量少使用复杂层级关系。

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！

上一篇：CSS深入教程之文字修饰的那点事_CSS教程_CSS_网页制作_

下一篇：css id选择器使用_动力节点Java学院整理 _CSS教程_CSS_网页制作_