好贷网好贷款

CSS定义及使用

发布时间:2016-12-5 22:33:13 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"CSS定义及使用",主要涉及到CSS定义及使用方面的内容,对于CSS定义及使用感兴趣的同学可以参考一下。

  CSS定义及使用 CSS是Cascading Style Sheet的缩写,中文译为“层叠样式表”。它的主要功能是定义网页数据的编排、显示、格式化及特殊效果,它扩展了HTML的功能。 一.CSS样式的基本语法:        选择符{属性1:值1;属性2:值2;…..} 二.常用的几种定义及使用方法: 1.选择符为HTML标记符               如:H2{text-align:center;"">黑体}                      H1,H2,H3,H4{"">黑体;color: blue}               注:如果多个标签具有相同的属性,则可以放在一起,用“,”隔开。               例1: <html>                      <head>                             <title>CSS范例1</title>                             <style type="text/css">                             <!--                                    P{color: blue}                                    P I{color: red}                                    I{color: yellow}                                    H1{color: purple}                             -->                             </style>                             </head>                             <body>                                    <p>我的颜色是蓝色<I>我是斜体红色</I>我的颜色也是蓝色<p>                                    <H1>我的颜色是紫色<I>我是斜体黄色</I>我的颜色也是紫色</H1>                             </body>                      </html> 2.选择符为ID选择符               格式:#ID选择器名称{属性:属性值;属性:属性值….}                       <标签名称 ID=”ID选择器名称”>内容</标签名称>               例2:        <html> <head> <title>CSS范例2</title> <style type="text/css"> <!-- #first{color:blue} #second{color:red} #third{color:yellow} --> </style> </head> <body> <H1 ID="first">这个H1标题内的文字,其色彩均为蓝色</H1> <P ID="first">这个段落内的文字,其色彩均为蓝色</P> <H2 ID="second">这个H2标题内的文字,其色彩均为红色</H2> <P ID="second">这个段落内的文字,其色彩均为红色</P> <H3 ID="third">这个H3标题内的文字,其色彩均为黄色</H3> <P ID="third">这个段落内的文字,其色彩均为黄色</P> </body> </html>     3. 选择符为用户自定义的类CLASS               如:.mystyle{color: red}               注:可以用任何名称命名;在<body>里的所有元素都可以定义“类”;               例3:        <html> <head> <title>CSS范例3</title> <style type="text/css"> <!-- h1.mycolor{color:blue;} .yourcolor{color:red;} --> </style> </head> <body> <h1 CLASS="mycolor">我的颜色是蓝色</h1> <h1 CLASS="yourcolor">我的颜色是红色</h1> <h2 CLASS="mycolor">我的颜色是蓝色</h2> <h2 CLASS="yourcolor">我的颜色是红色</h2> </body> </html> 4.选择符为虚类               定义:指对同一个HTML元素的各种状态和其所包括的部分内容的一种定义方式。               格式:HTML元素:伪元素{属性:值}               注:伪元素主要有:                      :link   :hover   :active   :visited   :first-child   :first   :left   right                      :lang   focus   :after   :first-letter   :first-line   :before               例4:超链接的例子                                 <html> <head> <title>CSS范例4</title> <style type="text/css"> <!--  p:first-letter{color:red;} p:first-line{color:blue;} p:link{color:red;} p:visited{color:blue;} p:active{color:yellow;} p:hover{color:green;} --> </style> </head> <body> <p>first<br> letter</p> <p>xieyanfeng</p> <a href="http://www.sohu.com">搜狐网站</a> </body> </html> 5.选择符包含属性元素               格式:HTML标签[属性]{属性:属性值;属性:属性值;….}                           HTML标签[属性=值]{ 属性:属性值;属性:属性值;….}               例如:h[title] { color: blue; } /* 所有具有title属性的h对象 */                           span[class=demo] { color: red; }/*所有class属性值为demo的span对象*/       三.总结        以上就是关于CSS常用的几种定义及使用方法,CSS作为HTML的补充渲染起着非常重要的作用。想了解CSS更加详细使用方法的朋友建议阅读一下苏昱的《样式表中文手册》,该书写的相当不错,本人强烈推荐。需要的朋友可以站内留下E-mail向本人索取。                                    

上一篇:zoj_2833
下一篇:ECLIPSE部署JSP/SERVLET遇到的疑惑

相关文章

关键词: CSS定义及使用

相关评论