css样式分析（CSS样式的主要特点及其类型）

本文目录

• CSS样式的主要特点及其类型
• 3种CSS样式表各应用于哪种场景
• 简述css样式的主要作用
• 帮忙解读CSS样式
• 什么是css样式
• CSS样式分为哪三种

CSS样式的主要特点及其类型

CSS(Cascading Stylesheets，层叠样式表)是一种制作网页的新技术，现在已经为大多数的浏览器所支持，成为网页设计必不可少的工具之一。
层叠样式表的特点

　　且不说过去的网页缺少动感，就是在网页内容的排版布局上也有很多困难，如果不是专业人员或特别有耐心的人，很难让网页按自己的构思和创意来显示信息。即便是掌握了HTML语言精髓的人也要通过多次地测试，才能驾驭好这些信息的排版，过程十分漫长和痛苦。为了Internet的发展，让更多人早日踏足这个多姿多彩的世界，新的HTML辅助工具呼之欲出。

　　样式表就是在这种需求下诞生的，它首先要做的是为网页上的元素精确地定位，可以让网页设计者象导演一样，轻易地控制由文字、图片组成的演员们，在网页这个舞台上按剧本要求好好地表演。

　　其次，它把网页上的内容结构和格式控制相分离。浏览者想要看的是网页上的内容结构，而为了让浏览者更好地看到这些信息，就要通过格式控制来帮忙了。以前两者在网页上的分布是交错结合的，查看修改很不方便，而现在把两者分开就会大大方便网页的设计者。内容结构和格式控制相分离，使得网页可以光由内容构成，而将所有网页的格式控制指向某个CSS样式表文件。这样一来的好出表现在两个方面:

　　第一，简化了网页的格式代码，外部的样式表还会被浏览器保存在缓存里，加快了下载显示的速度，也减少了需要上传的代码数量(因为重复设置的格式将被只保存一次)。

　　第二，只要修改保存着网站格式的CSS样式表文件就可以改变整个站点的风格特色，在修改页面数量庞大的站点时，显得格外有用。避免了一个一个网页的修改，大大减少了重复劳动的工作量，当你面对的是有数百个网页的站点时，CSS简直象是神对我们的恩赐!^_^

　　添加层叠样式表的方法

　　我们为网页添加样式表的方法有四种。

　　1.最简单的方法是直接添加在HTML的标识符(tag)里:

　　《 Tag style=”properties”》网页内容《 /tag》

　　举个例子:

　　《 p style=”color: blue; font-size: 10pt”》CSS实例《 /p》

　　代码说明:

　　用蓝色显示字体大小为10pt的“CSS实例”。尽管使用简单、显示直观，但是这种方法不怎么常用，因为这样添加无法完全发挥样式表的优势“内容结构和格式控制分别保存”。

　　2.添加在HTML的头信息标识符《 head》里:

　　《 head》

　　《 style type=”text/css”》

　　《 !-- 样式表的具体内容 --》

　　《 /style》

　　《 /head》

　　type=”text/css”表示样式表采用MIME类型，帮助不支持CSS的浏览器过滤掉CSS代码，避免在浏览器面前直接以源代码的方式显示我们设置的样式表。但为了保证上述情况一定不要发生，还是有必要在样式表里加上注释标识符“《 !--注释内容--》”。

　　3、链接样式表

　　同样是添加在HTML的头信息标识符《 head》里:

　　《 head》

　　《 link rel=”stylesheet” href=”*.css” type=”text/css” media=”screen”》

　　《 /head》

　　*.css是单独保存的样式表文件，其中不能包含《 style》标识符，并且只能以css为后缀。

　　Media是可选的属性，表示使用样式表的网页将用什么媒体输出。取值范围:

　　·Screen(默认):输出到电脑屏幕

　　·Print:输出到打印机

　　·TV:输出到电视机

　　·Projection:输出到投影仪

　　·Aural:输出到扬声器

　　·Braille:输出到凸字触觉感知设备

　　·Tty:输出到电传打字机

　　·All:输出到以上所有设备

　　如果要输出到多种媒体，可以用逗号分隔取值表。

　　Rel属性表示样式表将以何种方式与HTML文档结合。取值范围:

　　·Stylesheet:指定一个外部的样式表

　　·Alternate stylesheet:指定使用一个交互样式表

　　4、联合使用样式表

　　同样是添加在HTML的头信息标识符《 head》里:

　　《 head》

　　《 style type=”text/css”》

　　《 !--

　　@import “*.css”

　　其他样式表的声明

　　--》

　　《 /style》

　　《 /head》

　　以@import开头的联合样式表输入方法和链接样式表的方法很相似，但联合样式表输入方式更有优势。因为联合法可以在链接外部样式表的同时，针对该网页的具体情况，做出别的网页不需要的样式规则。

　　需要注意的是:

　　·联合法输入样式表必须以@import开头。

　　·如果同时输入多个样式表有冲突的时候，将按照第一个输入的样式表对网页排版。

　　·如果输入的样式表和网页里的样式规则冲突时，使用外部的样式表。

3种CSS样式表各应用于哪种场景

1》外部样式表 : 将样式规则直接写在*.css文件中，然后再*.html页面中通过《link》标签引入的方式
2》内部样式表 :（位于《head》 标签内部）
3》内联样式 :（在 HTML 元素内部）
但是如果在css样式之后加 !important 属性，那么此属性优先执行

简述css样式的主要作用

css样式将对布局、字体、颜色、背景和其它文图效果实现更加精确的控制。只通过修改一个文件就改变页数不计的网页的外观和格式。 在所有浏览器和平台之间的兼容性。更少的编码、更少的页数和更快的下载速度。除了还不能全面支持我们常用的大多数浏览器之外，CSS在实现其它承诺方面作得相当出色。CSS在改变我们制作样式表的方法。它为大部分的网页创新奠定了基石。

帮忙解读CSS样式

1。红色的部分是继承关系 #header是父层 最高级 其次是.tabbar，再其次是.tabs .bg之类的。
#header .tabbar特指的是在id标签为header下的.tabbar，而不是其他处的tabbar，.tabs指的是在.tabbar下并在#header下的，他们是层层深入得关系，不知道你明白了没有。

2。当要调用的时候必须是这样
《div id=“header“》
《div class=“tabbar“》
《div class=“tabs“》《a href=“###“》链接一《/a》《a href=“###“》链接二《/a》《/div》
《/div》
《/div》
必须是一层包裹一层的方式写，否则css不会生效。
建议你看一下我专栏里关于css的基础文章。

什么是css样式

级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style
Sheet）”，它是用来进行网页风格设计的。比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立
样式表，可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以
及创建特殊效果的能力。

CSS样式分为哪三种

CSS样式分为：内联式css样式、嵌入式css样式、外部式css样式。

对CSS三种样式定义及其实例：

• 内联式css样式。

  内联式css样式表就是把css代码直接写在现有的HTML标签中，如下面代码：

  1   《p style=“color:red“》这里文字是红色。《/p》   

  css样式代码要写在style=““双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开（英文状态下;）。

• 嵌入式css样式。

  嵌入式css样式，就是可以把css样式代码写在标签之间。如下面代码实现把三个标签中的文字设置为红色：

  1   《style type=“text/css“》span{color:red;}《/style》   

  嵌入式css样式必须写在之间，并且一般情况下嵌入式css样式写在之间。

• 外部式css样式。

  外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名（也可以为调用其他网站CSS）。

  1   《link href=“style.css“ rel=“stylesheet“ type=“text/css“ /》   

• 注意事项： 1、css样式文件名称以有意义的英文字母命名，如 main.css。 2、rel=”stylesheet” type=”text/css” 是固定写法不可修改。 3、标签位置一般写在标签之内。

掌握好三种CSS三种样式使用方法在Web开发中将节省很多时间。