css入门与基础..docxVIP

CSS入门基础CSS简介css指层叠样式表(Cascading Style Sheets)样式定义如何显示HTML元素把样式添加到HTML中，为了解决内容与表现的分离，更符合W3C规范外部样式表可以极大的提高工作效率多个样式定义可以层叠为一使用CSS需要具备HTML与XHTML知识CSS优势可以使用一个层叠样式表，对一个或多个HTML文档进行页面处理通过更新层叠样式表，可以实现页面的局部或全局进行更新，甚至对全站的网页进行更新，极大的提高了工作效率。丰富的内容属性，给设计人员，提供了更优越更开阔的空间。CSS的类型1、在HTML文档外部，独立的.CSS文档，称为外部样式表，通过link进行引用：2、在HTML文档内部，head/head标签中，称为内部样式表3、在HTML文档内部，HTML元素内，使用style属性进行定义，称为内联样式。CSS优先级在不同类型的层叠样式表，同时作用在一个HTML文档时，样式表之间并不会产生冲突，或发生错。样式表之间会产生一种覆盖效果，高级别的样式属性覆盖低级别的样式属性。优先级：内联样式内部样式外部样式浏览器缺省设置最高级：内联样式，会覆盖其他样式高级：内部样式，会覆盖外部样式和浏览器缺省设置中级：外部样式，会覆盖浏览器缺省设置低级：在没有样式的时候，浏览器缺省设置才有效覆盖优先级：子元素父元素在叠层样式应用时，子元素如果无定义，会继承父元素的样式，但子元素获得定义时，会覆盖相同的父元素样式。CSS语法格式与创建文档CSS有两种固定语法格式1、内部样式表与外部样式表，语法格式：2、内联样式，语法格式：例1：创建一个外部样式表*首先需要创建一个扩展名为base.css（基本样式）的文件。*在.CSS文档的头部，使用/**/注释语句，对文档类别、版权，作者，应用范围等信息进行说明。/*CSS DOCUMENT*//*Copyright:Author:date:2013/3/18target:base*/body{margin: 0;padding: 0;border: 0;text-align: center;background: #f9f9f9 url(/i/site_holder.gif) top center repeat-y;font: 12px Verdana, Arial, Helvetica, sans-serif;}例2：创建一个内部样式表headstyle type=text/cssbody{margin: 0;padding: 0;border: 0;text-align: center;background: #f9f9f9 url(/i/site_holder.gif) top center repeat-y;font: 12px Verdana, Arial, Helvetica, sans-serif;}/style/head例3：创建一个内联样式表body style= margin: 0; padding: 0; border: 0; text-align: center; background: #f9f9f9 url(/i/site_holder.gif) top center repeat-y; font: 12px Verdana, Arial, Helvetica, sans-serif;CSS语法-选择器1、元素选择器最常见的CSS选择器，是利用HTML标签，作为选择对象，对这一类型标签，全部赋予层叠样式。如果对多个元素进行选取，可以使用逗号分割。格式：标签名 {}例1：html {color:black; background-color:red;}/* HTML文档中，所有标签的字体为黑色，背景为红色*/h2 {color:silver;}/*H所有h2标签，字体都是灰色（子元素定义，将覆盖父元素的字体颜色属性。）*/p {color:blue;}/*所有P标签，字体都是蓝色（子元素定义，将覆盖父元素的字体颜色属性。）*/例2：对多个标签的定义。h1, h2, h3, h4, h5, h6 { color:gray; background: white; padding: 10px; border: 1px solid black; font-family: Verdana; }2、类选择器对使用class属性的HTML标签，作为选择对象。格式：.类名 {}例1：定义所有类名为important的元素，字体为红色。.important {color:red;}/*HTML文档中，所有class= important 的元素，字体都为红色*/例2：定义所有p标签，类名为important的元素，字体为红色p.important {color:red;