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

2023-04-30 12:00:02html-css017

Css样式表中有几种设置方式，区别是什么？,第1张

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

<!--

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]>

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

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

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

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

</style>

<![endif]--></head>

</div>

<h3>sidebar1 内容</h3>

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

<p>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.</p>

</div>

<p>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.</p>

<h2>H2 级别的标题 </h2>

<p>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.</p>

</div>

<br class="clearfloat" />

</div>

</div>

</body>

</html>

主要应用于声明不同优先级、不同适用范围的样式。

【HTML选择器】

三者中优先级最低的选择器。

用于最基础样式的定义，比如定义页面整体的字体（给body定义font），链接的样式（给a定义颜色、下划线等属性），列表项的符号样式（给li定义list-style），段落的间距（给p定义padding或者margin）等等。这种声明优先级最低。

举例：

body, table td { font:normal 12px/1.8 Arial}

a { color:#ff0text-decoration:none}

a:hover { color:#ff6}

p { text-indent:2em}

【类选择器】

用于来定义一类可以在同一个页面内重复利用的样式。如比较常用的.clearfix（一般是用于清除浮动），或者自己定义的用于新闻列表的样式，详细的写好链接、列表、边框以及背景等属性，有些人还会习惯把一些常用的属性作为一个类。

举例：

.clearfix { clear:bothcontent:.height:0overflow:hiddenzoom:1}

.fl { float:left}

.red { color:red}

.box { border:1px solid #ccc}

.box li { padding-left:15pxbackground:url(arrow.png) 5px center no-repeat }

【ID选择器】

三者中优先级最高的选择器。

一般用于一个页面中仅出现一次的容器，也常常作为js的接口。例如页面上的导航条（#nav）、页脚（#footer）、侧边栏（#sider）、主要内容（#mainBody）等等。

举例：

#nav { padding:10px 0background:url(../images/nav.png) 0 -124px repeat-x}

#footer { border-top:3px solid #630}

#sider { float:right: width:298pxborder:1px solid #ccc}

满意请采纳。

/* CSS Document by weilaixu.cn */

/* <meta name="description" content="关键字">

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0padding:0}

body{ font-size:12pxcolor:#000line-height:1.5embackground:#fff}

body a,.body a:link{}

body a:hover{}

body a:visited{}

ul li,ol li{list-style:none}

fieldset,img,abbr,acronym{ border:none}

/* end reset */

.inbox{}

.fl{ float:left}

.fr{ float:right}

.fn{ float:none}

.clear{ clear:both}

.clearleft{ clear:left}

.clearright{ clear:right}

.over{ overflow:hidden}

.ie6haslayout{ zoom:1}

.pos_abs{ position:absolute}

.pos_rel{ position:relative}

.pos_sta{ position:static}

.box_none{ display:none}

.box_block{ display:block}

.pt5{ padding-top:5px}

.pt10{ padding-top:10px}

.pt15{ padding-top:15px}

.pt20{ padding-top:20px}

.pl5{ padding-left:5px}

.pl10{ padding-left:10px}

.pl15{ padding-left:15px}

.pl20{ padding-left:20px}

.pr5{ padding-right:5px}

.pr10{ padding-right:10px}

.pr15{ padding-right:15px}

.pr20{ padding-right:20px}

.pb5{ padding-bottom:5px}

.pb10{ padding-bottom:10px}

.pb15{ padding-bottom:15px}

.pb20{ padding-bottom:20px}

.mt5{ margin-top:5px}

.mt-5{ margin-top:-5px}

.mt10{ margin-top:10px}

.mt15{ margin-top:15px}

.mt20{ margin-top:20px}

.ml5{ margin-left:5px}

.ml10{ margin-left:10px}

.ml15{ margin-left:15px}

.ml20{ margin-left:20px}

.mr5{ margin-right:5px}

.mr10{ margin-right:10px}

.mr15{ margin-right:15px}

.mr20{ margin-right:20px}

.mb5{ margin-bottom:5px}

.mb10{ margin-bottom:10px}

.mb15{ margin-bottom:15px}

.mb20{ margin-bottom:20px}

.gminline{}

.gminline div{ display:inline}

/* end gm */

.font_12px{ font-size:12px}

.font_13px{ font-size:13px}

.font_14px{ font-size:14px}

.font_line_12{ line-height:1.2em}

.font_line_15{ line-height:1.5em}

.font_line_18{ line-height:1.8em}

.font_line_20{ line-height:2em}

/* end font */

p,.content{}

p,.content,p a,.content a{ line-height:1.8emtext-decoration:nonecolor:#555font-size:14px}

p a:link,.content a:link{ color:#0000fftext-decoration:underline}

p a:hover,.content a:hover{}

p strong,p a strong,.content strong,.content a strong{}

p{ text-indent:2em}

p.f12{ font-size:12px}

p.no2em{ text-indent:0}

.content{ width:824pxoverflow:hidden}

h1{}

h2{}

h3{}

h4{}

h5{}

h6{}

input{ font-size:12pxvertical-align:middle}

.input_search{}

.input_password{}

.button_login{}

.button_reg{}

.button_reset{}

.font_textarea{}

input,button,textarea{ font-size:12pxline-height:1.5em}

/* end message */

.wrap,.box,.menu,.foot{ width:848pxmargin:0px autooverflow:hidden}

/* end layout */

.menu{}

.submenu{}

.sidemenu{}

/* end menu */

.side_list_pic{}/* 侧边列表 */

.side_list_news{}

.side_login{}

.side_include{}

.side_content{}

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”

# 上一篇：如何用CSS改淘宝店铺里的颜色风格

# 下一篇：在CSS排版中怎样把列表前面的点去掉？

推荐阅读

热门文章

最新发布

标签列表

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

给您推荐相同类型的内容：