原创力文档- 1、本文档共9页，可阅读全部内容。
- 2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
- 3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
- 5、该文档为VIP文档，如果想要下载，成为VIP会员后，下载免费。
- 6、成为VIP后，下载本文档将扣除1次下载权益。下载后，不支持退款、换文档。如有疑问请联系我们。
- 7、成为VIP后，您将拥有八大权益，权益包括：VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 8、VIP文档为合作方或网友上传，每下载1次， 网站将根据用户上传文档的质量评分、类型等，对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
网页设计与制作第12章
第12章 CSS的基本语法一、CSS与HTML的区别是什么？为什么要使用CSS呢？
原因主要有如下4点：
1、弥补HTML对网格式化功能的不足，比如段落间距、行距等。 2、字体变化和大小。 3、页面格式的动态更新。 4、排版定位等。
注意： HTML是一种标记语言，而CSS是这种标记的一种重要的扩展，可以进一步美化我们的页面。换句话说，CSS是一种来装饰HTML的一种标记集合。下面我们就开始学习CSS的格式。
CSS样式表的特别之处：
1、可以将格式和结构分离。 2、可以以前所未有的能力控制页面布局。 3、可以制作体积更小、下载更快的网页。 4、可以将许多网页同时更新，比以前更快、更容易。 5、浏览器将成为更友好的界面。
二、CSS的格式选择符{属性：值 }
选择符{属性1：值1；属性2：值2}
案例名称：CSS初次 l1-1.htm
htmlheadtitleCSS初次/title style type=text/css h1 { color:red } h2 { color:blue;font-style:oblique } /style /head body h1I?love you China!?I am H1/h1 h2I?love you China!?I am H2/h2 /body/html
(使用链接的样式表时，无须使用注释标签。)
、CSS的结构和规则
1、选择符
所谓的选择符号就是如何才能让HTML认识CSS格式的一种标记。
任何HTML元素都可以是一个CSS的选择符。选择符仅仅是指向特别样式的元素。例如语句P{text-indent:3em}中的选择符是P。
htmlheadtitle利用选择符/title style p{ text-indent:em } /style /head body p利用选择符/p 上面段落的效果是P标记的首行自动缩进 /body/html
在上面的案例中，style type=css/text可以简化为style，显示的结果是P标记的首行自动缩进。
2、类选择符——CLASS
单一个选择符就能有不同的CLASS（类），因而也就允许同一元素有不同样式。
P.code{color:#191970} P.warning{color:#4b0082}
以上的例子建立了两个类，code和warning，供HTML的P元素使用。CLASS属性用于在HTML中指明元素的类，例如P CLASS=warning表示每个选择符只允许有一个类。
.note{font-size:small}
在上面这个例子中，名为note的类可以被用于任何元素。
提示： 一个良好的习惯是在命名类的时候，根据它们的功能而不是根据它们的外观来命名。下述例子中的littlered类也可以命名为cat，但如果网页制作者决定改变这个类的样式，使得它不再代表小字体的话，那么这个名字就变得毫无意义了。
HTMLHEADTITLE使用类选择符/TITLE STYLE TYPE=TEXT/CSS .littlered{color:re;font-size:9pt} .littlegreen{color:green;font-size:90pt} /STYLE /HEAD BODY DIV class=littleredEmbedded CSS/DIV 就是将P class=littlegreenCSS/P 加在网页中br这些FONT class=littleredStyle/FONT的设置需要在lt;BODYgt;标记之前 /body/htmlhtmlheadtitle使用类选择符/title style type=text/css p.code{color:#00bbaa} p.warning{color:#bb00cc} /style /head body p class=code寒风吹起，细雨迷离/p p class=warning风雨揭开我的回忆/p div class=code不能将你忘记/div /body/html
注：本例code类对div标记选择符无效，只对p标记选择符有效。
?3、ID选择符
ID选择符用于个别地定义每个元素的成分。这种选择符应该尽量少用，因为它具有一定的局限。指定一个ID选择符要有指示符“#在名字前面。
htmlheadtitleID选择符/title style type=text/css #szg{text-indent:2em} /style /head body p ID=szg本书主要是对网页编程作了系统的介绍，本书的特色是以案例为主。/p /body/html4、CSS组合与注解
为了减少样式表的重复声明，组合的选择符声明是允许的。
htmlheadtitle
文档评论（0）