第2章 CSS-1.pptVIP

CSS3概述 一个美观大方简约的页面以及高访问量的网站是网页设计者的追求。 仅通过HTML5实现非常困难，HTML语言仅仅定义了网页结构，对于文本样式而没有过多涉及。 需要一种技术对页面布局、文字、颜色、背景和其他图文效果的实现提供更加精确的控制，这种技术就是CSS 使用CSS3最大优势是，在后期维护中如果一些外观样式需要修改，只需要修改相应的代码即可。 在这种情况下，就需要寻找一种可以将结构化标记与丰富的页面相结合的技术。而CSS样式技术恰恰迎合了这种需要。 CSS(Cascading Style Sheet)称为层叠样式表，也可以成为CSS样式表或样式表，其文件扩展名为.css。CSS是用于增强或控制网页样式，并允许将样式信息与网页内容分离的一种标记性语言。 在HTML5中使用CSS3的方法 （1）行内样式 行内样式是所有样式中比较简单、直观的方法，他直接把CSS代码添加到HTML文件中，是作为HTML的标记属性存在的，可以很简单地对某个元素单独定义样式。 使用行内样式方法直接在HTML标记中使用style属性，该属性的内容就是CSS的属性和值 例如:p style=“color:red”段落样式/p html head title行内样式/title /head body p style=color:red;font-size:20px;text-decoration:underline;text-align:center此段落使用行内样式修饰/p p style=color:blue;font-style:italic正文内容/p /body /html （2）内嵌样式 内嵌样式就是将CSS样式代码添加到head/head之间，并且用style/style标记进行声明。 这种写法虽然没有完全实现页面内容和样式控制代码完全分离，但可以用于设置一些比较简单且需要样式统一的页面 其格式如下： head style type=“text/css” P{ Color:red; Font-size:12px; } /style /head html head title内嵌样式/title style type=text/css p{ color:orange; text-align:center; font-weight:bolder; font-size:25px; } /style /head body p此段落使用内嵌样式修饰/p p正文内容/p /body /html （3）链接样式 链接样式是CSS中使用频率最高，也是最实用的方法。它可以很好地将“页面内容”和“样式风格代码”分离成两个文件或多个文件，实现了页面框架HTML代码和CSS代码的完成分离。 使前期制作和后期维护都十分方便 链接样式是指在外部定义CSS样式表并形成以.css为扩展名的文件，然后在页面中通过link标记链接到页面中。该链接语句必须放在页面的head标记区。 代码格式： link rel=“stylesheet” type=“text/css” href=“1.css” (1)rel表示链接到样式表，其值为styleseet. (2)type表示样式类型为css样式表。 (3)href指定了CSS样式表文件的路径 html head title链接样式/title link rel=stylesheet type=text/css href=3.5.css / /head body h1CSS学习/h1 p此段落使用链接样式修饰/p /body /html h1{text-align:center;} p{font-weight:29px;text-align:center;font-style:italic;} CSS选择器 所有HTML语言中的标记都是通过不同的CSS选择器进行控制的。 选择器不只是HTML文档中的元素标记，它还可以是类、ID（元素的唯一特殊名称，便于在脚本中使用）或是元素的某种状态(如a:link) 根据CSS选择器用途可以把选择器分为标记选择器、类选择器、全局选择器、ID选择器和伪类选择器等。 通过声明一个具体标记，可以对文档里这个标记出现的每一个地方应用样式定义。这种做法通常用在设置那些在整个网络都会出现的基本样式 例如：下面的定义就用于为一个网站设置默认字体。 body,p,td,th,div,blockquoto,dl,ul,ol{ font-familt:Arial; font-size:lem; color:red; } 如果后期维护中需要改变网站字体颜色，只需要修改color属性 在p标记的class属性中使用类选择符，示例如下： p class=“rd”