CSS概述.ppt

CSS概述 CSS与HTML的区别 CSS(Cascading Style Sheets) 层叠样式表单，简称样式表。 样式可以定义在HTML文档的标志(TAG)里面，也可以在外部附加文档作为外加文档。 CSS可以精确的控制主页里的每一个元素，如一个字，用CSS你可以给它控制它的前景色、背景色、背景图片、在页面的精确位置，四周加入边框等。 为什么要使用CSS？原因有四点： （1）弥补HTML对网页格式化功能的不足，比如段落间距，行距等。 （2）字体变化的大小。 （3）页面格式的动态更新。 （4）排版定位等。 简单来说，HTML是一种标记语言，而CSS是这种标记的一种重要的扩展，可以进一步美化我们的页面，CSS是一种来装饰HTML的一种标记集合。 CSS的格式 每个规则的组成包括一个选择符－通常是一个HTML的元素（标记），如BODY,P,TABLE,H1等。 选择符 {属性：值} 单一的选择符的复合样式声明应该用分号隔开。 选择符{属性1：值1；属性2：值2} 以下一段定义了H1和H2元素的颜色和字体大小属性 HTML STYLE TYPE=“text/css” H1 {font-size:x-large;color:red} H2 {font-size:large;color:blue} /STYLE BODY h1这个是H1的样式！/h1 h2这个是H2的样式！ /h2 /BODY /HTML CSS在网页中的实现 1、在HEAD内的实现 style type=“text/css” ！-- h3{font-size:10pt} -- /style html style !— H1 {color:green;font-size:37px;font-family:impact} P {text-indent:lem;background:yellow;font-family:courier} -- /style body h1这个是H1的标记！/h1 p这个是P的标记！/p /body /html 在BODY内的实现 例：h3 style=“font-size:10pt” html body h3 style=“font-size:10pt”这个是h3的标记！/h3 /body /html 上例告诉我们只要在要加上CSS样式的地方加上一个style=“”就可以了，注意里面的属性值和HTML的属性赋值不一样，这里采用的是冒号。 在文件外的调用 1、引用： 例如：在外部定义了一个mycss.css文件 H1 {color:green;font-size:37px;font-family:impact} P {text-indent:lem;background:yellow;font-family:courier} 和我们在head里面定义的差不多。 html head link rel=stylesheet href=“mycss.css” type=“text/css” /head body h1这个是H1的标记！/h1 p这个是P的标记！/p /body /html 我们是利用下面语句将mycss.css文件引入。 link rel=stylesheet href=“mycss.css” type=“text/css” 2、导入CSS文件 例如：将mycss.css文件导入 H1 {color:green;font-size:37px;font-family:impact} P {text-indent:lem;background:yellow;font-family:courier} html style type=“text/css” @import url(mycss.css); /style body h1这个是H1的标记！/h1 p这个是P的标记！/p /body /html 导入CSS文件的方式： style type=“text/css” @import url(xx.css); /style CSS的基本语法 CSS的结构和规则 选择符 任何HTML元素都可以是一个CSS的选择符。选择符仅仅是指向特别样式的元素（标签）。 例如： p {text-indent:3em} 其中p是选择符。 类选择符－CLASS 单一个选择符能有不同的CLASS（类），因而容许同一元素有不同样式。 例如： p.code {color:#191970} p.HTML {color:#4b0082} 这个例子建立了两个类，code和HTML,供HTML的p元素使用。CLASS的属性值用于在HTML中以