您的位置：首页 > Web前端 > CSS

CSS开篇介绍

2013-12-26 18:01 295 查看
   CSS是Cascading Style Sheets(层叠样式表)的简称，它是一种用来 表现HTML或XML等文件样式的计算机语言。 在学习CSS之前，我觉得我们有必要先来了解一下HTML和XML。一、HTML与XML    HTML是一种超文本标记语言，使用标记标签来描述网页。HTML标签通常用尖括号包围起来的关键字，通常是成对出现，第一个是开始标签，第二个是结束标签。Web浏览器不会显示HTML标签，而是使用标签来解释页面的内容。   HTML:就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言的结构包括头部分（Head）、和主体部分（Body），其中头部（head）提供关于网页的信息，主体（body）部分提供网页的具体内容。   XML指可扩展标记语言（Extensible Markup Language) ,它是一种标记语言，很类似HTML.XML的设计宗旨是传输数据而非显示数据。   可见：HTML 与XML是为不同的目的而设计的。HTML旨在显示数据，注重数据的外观，XML旨在传输和存储数据，注重数据的内容。    好了，可以介绍我们的主题了。CSS，额，可是他跟我们前面那两个有什么关系呢？ CSS主要是用来进行网页风格设计的。通俗的说就是进行网页美化的。所以他跟HTML还是有一定的相似之处。 二、CSS定义：样式定义如何显示HTML元素。是为了解决内容与表现分离的问题外部样式表可以极大的提高工作效率多个样式定义可层叠为一 三、CSS分类   1.外部样式表，主要应用于多个页面时，使用外部样式表，可以通过改变一个整个站点的外观。每个页面使用<link>b标签链接到样式表。例如: 
<head>
<[code]link
>mystyl e.css" /></head>[/code]  2.内部样式表：单每个文档需要特殊的样式时，就应该使用内部样式表。 使用方法：
<head>
[code]<style>
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}

</style>
</head>
[/code]   3.内联样式：当样式仅需要在一个元素上应用一次时，要使用内联样式。注意：内联样式将内容与表现混合一起，所以会损失掉样式表的许多优势，切记，需慎用之。 使用方法：在相关的标签内使用样式(style)属性。
<p [code]style
="color:>>This heading will be center-aligned</h1><p 
class="center"
>This paragraph will also be center-aligned.</p>[/code] 另外，一个标签可以有多个类选择器，不同的值用空格隔开，这样多个样式便可以应用的一个标签上。四、语法：CSS规则由两个主要的部分构成：选择器，以及一条或多条声明。
selector {declaration1; declaration2; ... declarationN }
选择器通常是您需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。1.标签选择器每个html页面都由很多个标签组成，通过标签选择器可以对某类标签应用相应的样式，如对p标签应用下面的样式，则页面中所有的p标签都会生效p{ font-size:12px; color:red; background:blue; }2.类选择器，类选择器以一个点号显示：在html中可以为某个标签增加class属性，如
<div
class
=
"error"
> </div>
对应的class设置样式：.error{ width:200px; padding:5px; color:red;}另外，一个标签可以有多个类选择器，不同的值用空格隔开，这样多个样式便可以应用的一个标签上。3.ID选择器：选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id在每个html页面的值必须是唯一的，所以它不可以复用。以"#"来定义： 
<div>
"content"
[code]> </div>
[/code]
五、总结：    　　* CSS语言是一种标记语言,它不需要编译,可以直接由浏览器执行(属于浏览器解释型语言).　　* 在标准网页设计中CSS负责网页内容(XHTML)的表现.　　* CSS文件也可以说是一个文本文件,它包含了一些CSS标记,CSS文件必须使用css为文件名后缀..CSS与HTML的关系：好搭档!    在编码过程中，它们发挥不同的作用：HTML负责网页的具体内容（结构），而CSS则修饰网页的表现形式（布局）。    CSS有一个优越的特性，即它可以对页面布局进行集中管理。也就是说，你不必在每个标签里都使用style属性；相反，你可以只声明一次，浏览器便会按相应的页面布局效果来显示文本：    通过把CSS文档独立出来，你就可以同时对多个页面的布局进行集中管理, 方便统一风格。这也是现在网站上的通行方式, 最佳选择。
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航