css三种样式表的区别,css样式表的四种类型

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开发中将节省很多时间。

相关问答

Q1: 请简要说明css样式表中三种选择器(三种样式)的特点

CSS选择器的类型分为3类:标记选择器、类别选择器和ID选择器。（可能名称有不同的说法，但意思都是一样的）

标记选择器是利用HTML的标记直接定义标记内容的样式，如：h1{

color:red;

font-size:25pt;}

类别选择器是通常说的class选择器，定义的时候要在名称前加.如：.one{

color:red;

font-size:25pt;}

ID选择器定义的时候要在前面加#，如：#box

{

color:red;

font-size:25pt;}

利用DW写CSS的时候，高级就是上面说的ID选择器，ID选择器的名字可以任意命名，可以自己定义，可是标签就只能是HTML语言里制定的那些标记，不能自己定义。

Q2: 三种不同类型的CSS样式

1、首先，在电脑中打开编辑器，创建html文档。

2、然后，创建h1标签，用行内样式控制字体颜色为红色。

3、接下来，用内部样式选择器选择h1标签，控制它的样式。

4、外部样式需要，创建外部样式.css文件。

5、然后，在html文件里面引入css文件。

6、最后，在浏览器看是否生效，就可以了。

Q3: 什么是CSS样式,以及CSS样式包含那几种类型?

CSS即层叠样式表（Cascading Style Sheets），是一种用来表现HTML或XML等文件样式的计算机语言。

CSS样式主要包含以下三种类型：

1、行内样式（内嵌样式）：结构的内部，即写在标签内的样式；写在标签的开始部分内部，style属性当中。

例：标记 style="样式的属性名1：样式的属性值1；属性名2：属性值2；......"/标记

2、内部样式（内联样式）：写在HTML页面内部，存放于head标记当中，样式写在style标记内。

例：style选择器 {属性名：属性值；属性名：属性值；......}/style

3、外部样式（外联样式）：写在css文件内。

例：link type="text/css" rel="stylesheet" href="css/main.css" /

扩展资料：

使用CSS样式的优点：

CSS有助于实现负责任的Web设计。CSS对开发者构建Web站点的影响很大，并且这种影响可能是无止境的。将网页的大部分甚至是全部的表示信息从HTML或XML文件中移出，并将它们保留在一个样式表中有诸多优点，如降低文件大小、节省网络带宽以及易于维护等。

此外，站点的表现信息和核心内容相分离，使得站点的设计人员能够在短暂的时间内对整个网站进行各种各样的修改。

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

只要修改保存着网站格式的CSS样式表文件就可以改变整个站点的风格特色，在修改页面数量庞大的站点时，显得格外有用。这就避免了一个个网页的修改，大大减少了工作量。

参考资料来源：百度百科-CSS

Q4: 怎样区分：CSS的三种（嵌入、内联、外联）样式表……

外联式样式（属于外部样式表） 特征： 1、有一个单独的CSS文件存在！[如：a.css] 2、首先，通过【格式】→【样式表连接】与CSS文件[a.css]建立连接！ 3、在合适的地方使用 class="样式名" 调用具体的样式效果！ 嵌入式样式（属于内部样式表） 特征： 1、样式的属性内容以代码的形式[放在 ]写在网页的head..../head之间的代码中！ 2、首先，通过【格式】→【样式】设置样式的属性内容！ 3、在合适的地方使用 class="样式名" 调用具体的样式效果！ 内联式样式（属于内部样式表） 特征： 1、样式的属性内容直接跟在将要修饰的文字标记里[如： p style="font-size:10px;font-color:#ff0000"你好!/p 明白了吗?

Q5: Css样式表中有几种设置方式，区别是什么？

CSS可以写成一个独立的文件与html文件链接，也可以直接写在html里，

甚至可以直接在html文件里的相关标签上定义样式，写法非常的灵活，以下是一工字型结构的页面，你可以学习一下

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

title无标题文档/title

style type="text/css"

!--

body {

font: 100% 宋体, 新宋体;

background: #666666;

margin: 0; /* 最好将 body 元素的边距和填充设置为 0 以覆盖不同的浏览器默认值 */

padding: 0;

text-align: center; /* 在 IE 5* 浏览器中，这会将容器居中。文本随后将在 #container 选择器中设置为默认左对齐 */

color: #000000;

}

.twoColLiqLtHdr #container {

width: 80%; /* 这将创建一个占据 80% 浏览器宽度的容器 */

background: #FFFFFF;

margin: 0 auto; /* 自动边距（与宽度一起）会将页面居中 */

border: 1px solid #000000;

text-align: left; /* 这将覆盖 body 元素上的“text-align: center”。 */

}

.twoColLiqLtHdr #header {

background: #DDDDDD;

padding: 0 10px; /* 此填充会将出现在它后面的 div 中的元素左对齐。如果 #header 中使用的是图像（而不是文本），您最好删除填充。 */

}

.twoColLiqLtHdr #header h1 {

margin: 0; /* 将 #header div 中最后一个元素的边距设置为零将避免边距重叠（即 div 之间出现的无法解释的空白）。如果 div 周围有边框，则不必将边距设置为零，因为边框也会避免边距重叠 */

padding: 10px 0; /* 使用填充而不使用边距将可以使元素远离 div 的边缘 */

}

/* sidebar1 提示：

1. 由于我们使用的是百分比，因此最好不要在侧栏中使用填充。它将会新增至宽度，而让符合标准的浏览器建立未知的实际宽度。

2. 如果为 div 中的元素设置左边距和右边距，则会在 div 边缘和这些元素之间产生空白，如“.twoColLiqLtHdr #sidebar1 p”规则中所示。

3. 由于 Explorer 会在父元素显示之后计算宽度，因此基于百分比的栏有时会出现无法解释的错误。如果您需要更可预见的结果，可选择改为以像素为单位设置栏的大小。

*/

.twoColLiqLtHdr #sidebar1 {

float: left;

width: 24%; /* 由于此元素是浮动的，因此必须指定宽度 */

background: #EBEBEB; /* 将显示背景色，其宽度等于栏中内容的长度，*/

padding: 15px 0; /* 顶部和底部的填充将在该 div 中产生视觉空间 */

}

.twoColLiqLtHdr #sidebar1 h3, .twoColLiqLtHdr #sidebar1 p {

margin-left: 10px; /* 对于将要放在侧栏中的每个元素，都应当设置左边距和右边距 */

margin-right: 10px;

}

/* mainContent 提示：

1. mainContent 和 sidebar1 之间的空白是由 mainContent div 的左边距创建的。无论 sidebar1 div 中包含多少内容，都将保留栏空白。如果您希望在 #sidebar1 中的内容结束时，用 #mainContent div 的文本填充 #sidebar1 空白，则可以删除此左边距。

2. 为了避免在所支持的最小分辨率 800 x 600 下出现“浮动下降”，mainContent div 中的元素（包括图像）不应大于 430 像素。

3. 在下面的 Internet Explorer 条件注释中，zoom 属性用来赋予 mainContent“hasLayout”。这会避免几个特定于 IE 的错误。

*/

.twoColLiqLtHdr #mainContent {

margin: 0 20px 0 26%; /* 右边距可以用百分比或像素来指定，它会在页面的右下方产生空白。 */

}

.twoColLiqLtHdr #footer {

padding: 0 10px; /* 此填充会将它上面 div 中的所有元素左对齐。 */

background:#DDDDDD;

}

.twoColLiqLtHdr #footer p {

margin: 0; /* 将脚注中第一个元素的边距设置为零将避免出现可能的边距重叠（即 div 之间出现的空白）*/

padding: 10px 0; /* 就像边距会产生空白一样，此元素上的填充也将产生空白，但不会出现边距重叠问题 */

}

/* 要重用的各种类 */

.fltrt { /* 此类可用来使页面中的元素向右浮动。浮动元素必须位于页面上要与之相邻的元素之前。 */

float: right;

margin-left: 8px;

}

.fltlft { /* 此类可用来使页面上的元素向左浮动 */

float: left;

margin-right: 8px;

}

.clearfloat { /* 此类应当放在 div 或 break 元素上，而且该元素应当是完全包含浮动的容器关闭之前的最后一个元素 */

clear:both;

height:0;

font-size: 1px;

line-height: 0px;

}

--

/style!--[if IE]

style type="text/css"

/* 请将所有版本的 IE 的 css 修复放在这个条件注释中 */

.twoColLiqLtHdr #sidebar1 { padding-top: 30px; }

.twoColLiqLtHdr #mainContent { zoom: 1; padding-top: 15px; }

/* 上面的专用 zoom 属性为 IE 提供避免错误所需的 hasLayout */

/style

![endif]--/head

body class="twoColLiqLtHdr"

div id="container"

div id="header"

h1标题/h1

!-- end #header --/div

div id="sidebar1"

h3sidebar1 内容/h3

p此 div 上所显示的背景色刚好与内容等宽。如果您喜欢改用分界线，而且 #mainContent div 所包含的内容将始终比 #sidebar1 div 中的多，请在 #mainContent div 的左边缘放置一个边框。 /p

pDonec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero./p

!-- end #sidebar1 --/div

div id="mainContent"

h1 主要内容 /h1

pLorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero./p

h2H2 级别的标题 /h2

pLorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio./p

!-- end #mainContent --/div

!-- 这个用于清除浮动的元素应当紧跟 #mainContent div 之后，以便强制 #container div 包含所有的子浮动 --br class="clearfloat" /

div id="footer"

p脚注/p

!-- end #footer --/div

!-- end #container --/div

/body

/html