搜索
CSS是CascadingStylesSheets的缩写，中文译名为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言由HTML组织网页的结构和内容，而通过CSS来决定页面的表现形式由于html的主要功能是描述网页的结构，所以控制网页外观和表现的能力很差无法精确到像素级调整文字大小，行间距等不能对多个网页元素进行统一的样式设置，只能一个一个元素的设置。学习CSS可实现对网页的外观和排版进行更灵活的控制，使网页更美观bodyh2fontcolor=#FF0000face=黑体CSS标记1/font/h2pCSS标记的正文内容1/ph2fontcolor=#FF0000face=黑体CSS标记2/font/h2pCSS标记的正文内容2/ph2fontcolor=#FF0000face=黑体CSS标记3/font/h2pCSS标记的正文内容3/ph2fontcolor=#FF0000face=黑体CSS标记4/font/h2pCSS标记的正文内容4/p/body产生的问题：代码冗余如果要修改元素的样式，也要一个个的改，修改工作量大h2{font-family:黑体;color:red;}h2CSS标记1/h2pCSS标记的正文内容1/ph2CSS标记2/h2pCSS标记的正文内容2/ph2CSS标记3/font/h2pCSS标记的正文内容3/ph2CSS标记4/font/h2pCSS标记的正文内容4/p没有了代码冗余如果要修改，只需修改选择器中的内容就可以了CSS样式表由一系列样式规则组成，浏览器将这些规则应用到相应的元素上，下面是一条样式规则。h1{color:red;font-size:25px;}h1color:red;font-size:25px;{}选择器属性值属性值声明声明一条CSS样式规则由选择器(selector)和声明(declarations)组成。选择器是为了选中网页中某些元素的，选择器可以是一个标记名，表示将网页中该标记的所有元素都选中，也就是定义了CSS规则的作用对象。选择器也可以是一个自定义的类名，表示将自定义的一类元素全部选中，为了对这一类元素进行标识，必须在这一类的每个元素的标记里添加一个html属性class＝类名；选择器还可以是一个自定义的id名，表示选中网页中某一个唯一的元素，同样，该元素也必须在标记中添加一个html属性id＝id名让CSS来识别。声明则用于定义元素样式。在上面的示例中，h1是选择器，介于花括号{}之间的所有内容都是声明，声明又可以分为属性和值，属性和值用冒号隔开。（注意CSS的属性和值的写法与html属性的区别）。属性和值可以设置多个，从而实现对同一标记声明多种样式风格。如果要设置多个属性和值，则每条声明之间要用分号隔开；如果属性的某个值不是一个单词，则值要用引号引起来：p{font-family:sansserif}；如果一个属性有多个值，则每个值之间要用空格隔开：a{margin:6px4px3px}；要为某个属性设置多个候选值，则每个值之间用逗号隔开：p{font-family:TimesNewRoman,Times,serif}；HTML和CSS是两种作用不同的语言，它们同时对一个网页产生作用，因此必须通过一些方法，将CSS与HTML挂接在一起，才能正常工作。在HTML中，引入CSS的方法有行内式、内嵌式、导入式和链接式4种html标记都有一个通用的style属性，行内式就是在该属性内添加CSS属性和值，如：tdstyle=color:#FF0000;text-decoration:underlinewidth=88%有时我们需要做测试或对个别元素设置CSS属性时，可以使用这种方式，这种方式由于CSS属性就在标记内，其作用对象就是标记内的元素。所以不需要指定CSS的选择器，只需要书写CSS属性和值。但它没有体现出CSS统一设置许多元素样式的优势。嵌入式将页面中各种元素的CSS样式设置集中写在style和/style之间，style标记是专用于引入嵌入式CSS的一个html标记，它只能放置在文档头部，即下面这段代码只能放置在html文档的head和/head之间。styletype=text/cssh1{color:red;font-size:25px;}/style对于单一的网页，这种方式很方便。但是对于一个包含很多页面的网站，如果每个页面都以嵌入式的方式设置各自的样式，不仅麻烦，冗余代码多，而且网站每个页面的风格不好统一。因此一个网站通常都是编写一个独立的CSS文件，使用以下两种方式之一，引入到网站的所有html文档中注意：可以将CSS样式规则写在注释符内，不会被忽略链接式和导入式的目的都是将一个独立的CSS文件引入到HTML文件，我们在学习CSS或制作单个网页时，为了方便可采取行内式或嵌入式方法，但若要制作网站则主要应采用链接式方法引入CSS。链接式和导入式最大的区别在于链接式使用HTML的标记引入外部CSS文件，而导入式则是用CSS的规则引入外部CSS文件，因此它们的语法不同链接式是在网页文档头部通过link标记引入外部CSS文件，格式如下：linkhref=style1.cssrel=stylesheettype=text/css/而使用导入式，则需要使用如下语句：styletype=text/css@importurl(style2.css);/style此外，这两种方式的显示效果也略有不同。使用链接式时，会在装载页面主体部分之前装载CSS文件，这样显示出来的网页从一开始就是带有样式效果的，而使用导入式时，要在整个页面装载完之后再装载CSS文件，如果页面文件比较大，则开始装载时会显示无样式的页面。从浏览者的感受来说，这是使用导入式的一个缺陷。import把CSS文件的内容复制到HTML文件中，link直接向CSS文件读取所定义的CSS样式标记选择器伪类选择器类选择器id选择器标记是元素固有的属性，CSS标记选择器用来声明哪种标记采用哪种CSS样式，因此，每一种html标记的名称都可以作为相应的标记选择器的名称。如图1所示，标记选择器将拥有同一个标记的所有元素全部选中。如：styletype=text/cssp{/*标记选择器*/color:blue;font-size:18px;}/style所谓伪类就是指标记的状态。网页中的链接标记能响应浏览者的点击。a标记有四种状态能描述这种响应，分别是a:link、a:visited、a:hover、a:active，a标记在这几种状态下的样式能够通过伪类选择器来分别定义，伪类选择器的标记和伪类之间用“:”隔开。其格式为a:hovercolor:green;font-size:20px;{}标记名属性值属性值声明声明伪类名伪类选择器可以看成是一种特殊的标记选择器，它用来选中在某种状态下的标记如果分别定义a标记在四种不同的状态下具有不同的颜色，在鼠标悬停时还将添加下划线。需要注意两点：一、链接伪类选择器的书写应遵循LVHA的顺序，即CSS代码中四个选择器出现的顺序应为a:link→a:visited→a:hover→a:active，若违反这种顺序鼠标停留和激活样式就不起作用了二、各种伪类选择器将继承a标记选择器定义的样式。标记选择器一旦声明，那么页面中所有该标记的元素都会产生相应的变化。例如当声明p标记为红色时，页面中所有的p元素都将显示为红色但是如果希望其中某一些p元素不是红色，而是蓝色，就需要将这些p元素自定义为一类，用类选择器来选中它们；或者希望不同标记的元素应用同一样式，也可以将这些不同标记的元素定义为同一类，如下所示的一个p元素和一个h3元素被定义为了同一类。类选择器以半角“.”开头，且类名称的第一个字母不能为数字.classcolor:green;font-size:20px;{}类别选择器属性值属性值声明声明类别名称id选择器的使用方法与class选择器基本相同，不同之处在于一个id选择器只能应用于html文档中的一个元素，因此其针对性更强，而class选择器可以应用于多个元素。id选择器以半角“#”开头，且id名称的第一个字母不能为数字#idcolor:yellow;font-size:30px;{}ID选择器属性值属性值声明声明关于类名和id名的大小写：CSS大体上是不区分大小写的语言，但是对于标记实体的类名和id名是否区分大小写取决于标记语言是否区分大小写，如果使用XHTML，那么类名和id名是区分大小写的，如果是HTML，则不区分大小写DW对CSS的建立和编辑有很好的支持，对CSS的所有操作都集中在“CSS样式”面板中，一般我们首先要点“新建CSS规则”来新建样式，这时会弹出如图所示的对话框：CSS中控制文本样式的属性主要有font-属性类和text-属性类，再加上修改颜色的color属性和行高line-height属性。DW中这些属性的设置是放在CSS规则定义面板的“类型”和“区块”中的。其中text-indent表示首行缩进，在每段开头空两格通常是用text-indent:2em;来实现，text-decoration:none;表示去掉下划线，line-height:150%;表示调整为1.5倍行间距。这个属性用来设定文本的对齐方式。有以下值：left(居左，缺省值)right(居右)center(居中)justify(两端对齐)示例代码如下：.p2{text-align:right}这个属性主要设定文本划线的属性。有以下值：none(无，缺省值)underline(下划线)overline(上划线)line-through(当中划线)示例代码如下：.p2{text-decoration:underlineoverline;}这个属性设定文本首行缩进。有以下设定方法：length(长度，可以用绝对单位(cm,mm,in,pt,pc)或者相对单位(em,ex,px))percentage(百分比，相当于父对象宽度的百分比)示例代码如下：.p1{text-indent:8mm}这个属性设定每行之间的距离。有以下设定方法：normal(缺省值)length(长度，可以用绝对单位(cm,mm,in,pt,pc)或者相对单位(em,ex,px))percentage(百分比，相当于父对象高度的百分比)示例代码如下：.p1{line-height:1cm}用颜色属性(color)可以改变文本的字体颜色。示例代码如下：.p1{color:gray}这个属性用来设定字符之间的距离。normal(缺省值)length(长度，可以用绝对单位(cm,mm,in,pt,pc)或者相对单位(em,ex,px))示例代码如下：.p1{letter-spacing:3mm}CSS具有两个特性：层叠性和继承性。层叠性是指当有多个选择器都作用于同一元素时，即多个选择器的作用范围发生了重叠，CSS怎样处理？CSS的处理原则是：1）如果多个选择器定义的规则不发生冲突，则元素将应用所有选择器定义的样式。如：styletype=text/cssp{/*标记选择器*/color:blue;font-size:18px;}.special{/*类别选择器*/font-weight:bold;}/*粗体*/#underline{text-decoration:underline;}/*有下划线*//stylep标记选择器1/pp标记选择器2/ppclass=special受到标记、类两种选择器作用/ppid=unde