什么是css,可以有那几种实现方法

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

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




无标题文档

<!--
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;
}
-->


/* 请将所有版本的 IE 的 css 修复放在这个条件注释中 */
.twoColLiqLtHdr #sidebar1 { padding-top: 30px; }
.twoColLiqLtHdr #mainContent { zoom: 1; padding-top: 15px; }
/* 上面的专用 zoom 属性为 IE 提供避免错误所需的 hasLayout */







标题


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


Donec 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.



主要内容

Lorem 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.

H2 级别的标题

Lorem 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.





脚注

3种
嵌入(写在外部css文件中)
内联(写在网页里的之间)
行内(直接写在元素上，如)

CSS是Cascading style Sheets的简称，中文译作“层叠样式表单”，我把它叫作“层叠样式表”，我感到这样顺口一
点，没别的意思。实际上它是一组样式。你可能对CSS这个名词比较陌生，实际上无论你用Internet Explorer还是
Netscape Navigator在网上冲浪，几乎随时都在与CSS打交道，在网上没有使用过CSS的网页可能不好找。不管你用什么工
具软件制作网页，都有在有意无意地使用CSS。用好CSS能使你的网页更加简炼，为什么同样内容的网页，有的人做出来有
几十KB，而高手做出来只有十几KB，CSS在其中的作用是不言而喻的。我把我在使用CSS中的一些小经验以及一些网友来信
提问的问题整理出来，供诸位参考。
1、CSS在网页制作中一般有三种方式的用法，那么具体在使用时该采用哪种用法？
当有多个网页要用到的CSS，采用外连CSS文件的方式，这样网页的代码大大减少，修改起来非常方便；只在单个网页
中使用的CSS，采用文档头部方式；只有在一个网页一、两个地方才用到的CSS，采用行内插入方式。

2、CSS的三种用法在一个网页中要以混用吗？
三种用法可以混用，且不会造成混乱。这就是它为什么称之为“层叠样式表”的原因，浏览器在显示网页时是这样处
理的：先检查有没有行内插入式CSS，有就执行了，针对本句的其它CSS就不去管它了；其次检查头部方式的CSS，有就执行
了；在前两者都没有的情况下再检查外连文件方式的CSS。因此可看出，三种CSS的执行优先级是：行内插入式、头部方
式、外连文件方式。

3、在Dreamweaver3中如何使外部文件式CSS？
在Dreamweaver3中使用外连文件式CSS并没有特殊要求，同样是用记事本创建一个*.css文件，在网页的<head>与
</head>之间加上一句这样的代码：<link rel="stylesheet" href="在这里填上你的CSS文件地址（相对路径+文件
名）" type="text/css"> 就行了。

4、如何用Dreamweaver3快速创建CSS外连式文件？
对于一个初接触CSS的网页设计人员来讲，要用记事之类的编辑器，去创建一个CSS外连式文件是相当困难的。由于
Dreamweaver3对CSS支持的很好，用它来帮助就轻松多了。具体可以这样操作：
1）先在纸上写好在网站的网页中可能要用到的格名称，然后在Dreamweaver3的编辑窗中调出CSS面板，一个一个地定
义，并在一个空白页上适当地写一点相关内容，边定义边试用，效果不满意，立即修改；
2）全部定义好后，再用记事本创建一个空的CSS外连式文件，把在<head>与</head>之间的那段定义好的CSS复制
到CSS文件中去，就大功告成了。整个过程就是点鼠标，方便吧？

5、在Dreamweaver3中采用行内插入式CSS要手动写代码吗？
不用！先用CSS面板定义好要用的CSS，然后，在要插入CSS的标记插入：style=""，再把你刚才定义的CSS从<head>
后面拖到这个双引号中来，把花括号以外的部分删去就行了。

6、在方档头部方式和外连文件方式的CSS中都有“<!--”和“-->”，好象没什么用，不要可以吗？
这一对东东的作用是为了不引起低版本浏览器的错误。如果某个执行此页面的浏览器不支持CSS，它将忽略其中的内
容。虽然现在使用不支持CSS浏览器的人已很少了，由于互联网上几乎什么可能都会发生，所以还是留着为妙。

7、如何给一部分文字加背景色？
给文字加上不同颜色，在DW3中只要在属性面板上选取文字的颜色就行了，非常方便，但要给部分文字加不同的背景色
却没有相应的功能，我们可以先做一个定义背景色的CSS（如：bgstyle），在DW3中点几下鼠就完成了。如一个定义淡黄色
背景的CSS是这样的：
<style type="text/css">
<!--
.bgstyle { background: #FFFFCC}
-->
</style>
在要用时选取那段文字，再在CSS面板上点一下“bgstyle”就行了。

8、如何给部分文字加背景图像？
与加背景色操作类似，中是在背景在选择加载图象就是了，一个定义好的加背景图象的CSS例子的代码是这样的：
<style type="text/css">
<!--
.imgbgstyle { background-image: url(/logo.gif)}
-->
</style>
在要用时选取那段文字，再在CSS面板上点一下“imgbgstyle”就行了。

9、如何使页面的背景在文字“滚动”时背景图案静止不动？
要使背景图案不随文字“滚动”的CSS是这样的：
<style type="text/css">
<!--
BODY { background: purple url(/bg.jpg);
background-repeat:repeat-y;
background-attachment:fixed
}
-->
</style>

10、如何定义字间距？
在DW3中CSS的属性定义对话框（style Definition for .style1)的“Block”上的“letter spaceing”属性定义的就
是字间距，它指的是每一个字符之间的额外间距，经长度为单位，正负值均可，当取负值时产生字符挤在一起的效果。下
面代码是一个定义好的字间距CSS例子：
<style type="text/css">
<!--
.style1 { letter-spacing: 3px}
-->
</style>

11、如何给文字加上划线、下划线、删除线和闪烁？
在DW3中CSS的属性定义对话框(style Definition for .style1)的“Type”上的“decoration”属性定义的就是这些
内容，要注意的是闪烁属性有些版本的浏览器不支持，少用为好。下面是一个定义好上述效果的CSS例子：
<style type="text/css">
<!--
.style1 { text-decoration: underline overline line-through blink}
-->
</style>
其中： “underline”是定义下划线；“overline ”是定义上划线；“ line-through”定义的是删除线；“blink”
定义的是文字闪烁。

12、如何使网页具有“首行缩进”功能？
由于DW3输入空格不方便，利用“首行缩进”将弥补这个不足。在DW3中CSS的属性定义对话框（style Definition
for .style1)的“Block”上的“text-indent”属性定义的就是“首行缩进”，所谓“首行”是指每段内容的第一行，也
就是直接按回车键就形成了一个新的段落。缩进最好以“em”（字符）为单位，比如：汉字编排要求每段开始缩进两个汉
字，设置好的CSS如下所示：
<style type="text/css">
<!--
.style1 { text-indent: 2em}
-->
</style>
在DW3要注意：在DW3中CSS的属性定义对话框（style Definition for .style1)的“Block”上的“text-indent”右
面的缩进单位选择框中“ems”指的就是“em”。

13、在用表格进行排版时，能使某一方向上的内容离开表格线一点吗？
可以！在DW3中CSS的属性定义对话框（style Definition for .style1)的“Box”上的“margin”定义的就是内容离
开边缘的距离，分别可定义四个方向：“top”“bottom”“left”“right”。下面就是定义在左边离开“10px”的CSS例
子代码：
<style type="text/css">
<!--
.style1 { margin: 0px 0px 0px 10px}
-->
</style>

14、能给某部分内容加边框吗？
用CSS可以给某部分内容加边框，在DW3中CSS的属性定义对话框（style Definition for .style1)的“Border”定义
的就是边框线，“top”“bottom”“left”“right”四边可分别定义线的粗细和颜色，这些定义好后不要忘记在下面的
“style”中定义线型，否则将看不边框线，因为默认的线型是“none”。下面是一个定义了上边框为：蓝色细线；左边框
为：绿色中粗线的CSS例子：
<style type="text/css">
<!--
.style1 { border: solid; border-width: thin 0px 0px medium; border-color: #0000FF black black #00FF00}

---

天镇县19111167740： 什么是css,可以有那几种实现方法 - ？
黄炭安普： CSS是Cascading style Sheets的简称,中文译作“层叠样式表单”,我把它叫作“层叠样式表”,我感到这样顺口一 点,没别的意思.实际上它是一组样式.你可能对CSS这个名词比较陌生,实际上无论你用Internet Explorer还是 Netscape ...

天镇县19111167740： 在网页中使用css的几种方式 - ？
黄炭安普： (1)使用Embed(嵌入样式单)排版样式: 即将CSS代码直接插入每个页面的HTML的<head>区,就象上一节看到的.使用<style>...</style>标签.例如:<style type=＂text/css＂> <!-- h2 { font-family: ＂宋体＂; font-size: 12pt; font-style: italic; ...

天镇县19111167740： CSS是什么? - ？
黄炭安普： CSS就是一种叫做样式表(stylesheet)的技术.也有的人称之为层叠样式表(Cascading Stylesheet).在主页制作时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制.只要对相应的代码做一些简...

天镇县19111167740： 什么是CSS样式? - ？
黄炭安普： CSS是Cascading style Sheets的简称,中文译作“层叠样式表单”,我把它叫作“层叠样式表”,我感到这样顺口一 点,没别的意思.实际上它是一组样式.你可能对CSS这个名词比较陌生,实际上无论你用Int...

天镇县19111167740： css实现圆角的几种方法是什么? - ？
黄炭安普： 有四种方法可以实现圆角.第一、直接写CSS代码:border-radius第二、四个圆角贴图;制作四个圆角的图片,然后用css定义第三、直接制作整个圆角矩形背景第四、定义12个背景色:左上角4个,右上角4个,右下角4个,左下角4个.

天镇县19111167740： “CSS”是什么意思啊?？
黄炭安普： CSS(Cascading Style Sheet)可译为“层叠样式表”或“级联样式表”,它定义如何显示 HTML 元素,用于控制Web页面的外观.通过使用CSS实现页面的内容与表现形式分离,极大提高了工作效率 .样式存储在样式表中,通常放在<head>部分或存储在 外部CSS文件中.

天镇县19111167740： css是什么啊? - ？
黄炭安普： CSS在英文中有如下几种常见的缩写: 1,Cascading Style Sheets 层叠样式表 2,Content Scrambling System DVD电影的加密系统 3,Cast Semi-Steel 半铸钢, 钢性铸铁 4,College Scholarship Service 大学奖学金处 其中在网络上最常见的是...

天镇县19111167740： 什么是CSS样式?英文全称是什么? - ？
黄炭安普： CSS就是一种叫做样式表(stylesheet)的技术.也有的人称之为层叠样式表(Cascading Stylesheet). 在主页制作时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制. 只要对相应的代码做一些简...

天镇县19111167740： css调用有几种方法? - ？
黄炭安普： 有行内样式、内联样式、外部样式吧.