css样式规则（css是什么）

本文目录

• css是什么
• 可以使用的css规则一般都有哪些，以及这些规则都具有哪些方面的作用.北外
• css样式表名字有什么规则
• css三大特性
• css的三种样式中哪种样式的优先级最高
• HTML网页怎么使用CSS样式
• css目标规则名称怎么改
• CSS样式表有哪几类规则

css是什么

CSS是Cascading Style Sheets（层叠样式表单）的简称。CSS就是一种叫做样式表（stylesheet）的技术。也有的人称之为“层叠样式表”（Cascading Stylesheet）。CSS主要用来设计网页的样式，美化网页；它不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。在css进入前端语言之前，很多一部分人都把css当做一种前端语言，发展至今，css不仅能装饰网页，也可以配合各种脚本对于网页进行格式化。工作原理CSS是一种定义样式结构如字体、颜色、位置等的语言，被用于描述网页上的信息格式化和现实的方式。CSS样式可以直接存储于HTML网页或者单独的样式单文件。无论哪一种方式，样式单包含将样式应用到指定类型的元素的规则。外部使用时，样式单规则被放置在一个带有文件扩展名_css的外部样式单文档中。样式规则是可应用于网页中元素，如文本段落或链接的格式化指令。样式规则由一个或多个样式属性及其值组成。内部样式单直接放在网页中，外部样式单保存在独立的文档中，网页通过一个特殊标签链接外部样式单。名称CSS中的“层叠（cascading）”表示样式单规则应用于HTML文档元素的方式。具体地说，CSS样式单中的样式形成一个层次结构，更具体的样式覆盖通用样式。样式规则的优先级由CSS根据这个层次结构决定，从而实现级联效果。

可以使用的css规则一般都有哪些，以及这些规则都具有哪些方面的作用.北外

DIV+CSS规则整理一、善用css缩写规则/*注意上、右、下、左的书写顺序*/1. 关于边距（4边）：1px 2px 3px 4px (上、右、下、左)1px 2px 3px （省略的左等于右）1px 2px (省略的上等于下)1px （四边都相同）2. 简化所有：*/ body{margin:0}------------表示网页内所有元素的margin为0#menu{ margin:0}------------表示menu盒子下的所有元素的margin为03. 缩写（border）特定样式：Border:1px solid #ffffff;Border-width:0 1px 2px 3px;4. 关于文字的缩写规则：Font-style:italic; 斜体形式Font-variant:small-caps/normal; 变体样式：小型大写字母/正常Font-weight:bold;Font-size:12px;Line-height:1.2em(120%)/1.5em(150%);Font-family:arrial,sans-serif,verdana;缩写成：Font:italic small-caps bold 12px/1.5emarrial,sans-serif;注意：Font-size和Line-height用斜杠组合在一起不能分开写。5. 关于背景图片的：Background:#FFF url(log.gif) no-repeatfixed top left;6. 关于列表：List-style-type:square/none;List-style-position:inside;List-style-image:url(filename.gif);缩写成：List-style:none inside url(filename.gif)二、运用4种方法来引入CSS样式1.link《link rel=”stylesheet” type=”text/css”href=”a.css”》rel 关系type 数据类型,有多种href 路径部分浏览器支持候选样式,关键字:alternate:《link rel=”stylesheet” type=”text/css”href=”a.css”》《link rel=”alternate stylesheet”type=”text/css” href=”b.css”》《link rel=”alternate stylesheet”type=”text/css” href=”c.css”》2.内部样式块《style》《!–h1{color:red;}–》《/style》3.@import@import url{a.css}注意:此指令必须放在《style》容器中,并且在所有样式之前建议放在一个html注释中,《!– –》浏览器会不显示注释内的内容,而import等css代码能正常工作4.内联样式《p style=”color:red;”》选择器是css的一个基本概念，基本规则如下：1.规则结构：h1 {color:red;}选择器 {属性:值;}这类是元素选择器，基本可以包括所有html的元素属性值可以包括多个元素，如：border：1px solid red;常用语法1)分组：选择器和声明都可以分组:h1,h3,h3{color:red;background:#fff;} ,选择器用“,”分割开,属性用”;”分割2)类选择器,即通过class=”stylename”应用的声明定义:.stylename{color:red;}注意:在html中可以使用多类选择:如class=”cn1 cn2 cn3″3)ID选择器,即与id属性对应的样式定义:#a{color:red;} -》这个定义对用id=”a”的元素2.这部分都是我们常见的css语法，下面谈一下我们不常见的选择器语法1)父子结构,跟文档结构图对应如p span{border:1px solidred;}对应的是《p》下面的《li》标签,这个很用用途,可以准确定位.一些特殊应用(IE7支持):(1) p 》 span{},匹配所有p下所有的span(2) p + span{} ,匹配紧接着p元素后出现的第一个span标签,2者要有相同的父标签2)属性选择器:(注意:属性选择器ie7才开始支持,以下版本并不支持,其他的浏览器基本可以)语法:img[alt]{border:1pxsolid;}表示对应有alt属性的img标签,当然可以支持多个属性对应,如img[alt][title]{};表示这个2个属性都有的img标签,也可以与具体值对应:如:img[alt=”摄影”]{};属性选择器中的高级应用,特殊匹配:(1)img[class~=”b”], ~= : 与属性中的一个值对应的,即与《img class=”a b c”》对应(2)[class^=”a”],以a开头的(3)[class$=”a”],以a结束的(4)[class*=”a”],包含a的(5)[class|=”a”],等于a或以a开头的3)伪类和伪元素日常使用中主要是《a》标签的几个伪类:link:hover:active:visited以及:first-child:first:before:left:right:lang:focus:fist-line等等注意:动态伪类可以应用到任何元素,如,input:focus{background:red;}当input标签获得焦点时背景变红以上语法组合使用,就能实现定位准确、简单间接的样式了。三、选择器分类整合优先级别遵循：行内样式 》ID 》Class 》标记基本选择器标记选择器（eg:《p》《/p》）类别选择器(eg:class)ID选择器复合选择器“交集”复合选择器(eg:p.menu{color:red})必须是标记+类别/ID组合“并集”复合选择器(eg:h1,h3,h3{color:red})“后代”复合选择器(eg: #menu.menulist{ ... })“子”复合选择器(eg: #menu.menulist .selectit {... })四、使用子选择器减少id和class的定义示例结构：《div id=“menu“》《div class=“menulist“》《divclass=“selectit“》content《/div》《/div》《/div》示例CSS：#menu { ... }#menu .menulist { ... }#menu .menulist .selectit { ... }五、使用组选择器为不同元素应用相同的样式如h1,h3,h3,div{font-size:16px;font-weight:bold}则h1,h3,h3,div元素的样式都为字体16像素，字体粗体六、伪类和选择符的配合使用将伪类和类组合起来用，就可以在同一个页面中做几组不同的链接效果了，例如，我们定义一组链接为红色，访问后为蓝色；另一组为绿色，访问后为黄色：a.red:link {color: #FF0000}a.red:visited {color: #0000FF}a.blue:link {color: #00FF00}a.blue:visited {color: #FF00FF}现在应用在不同的链接上：《a class=“red“href=“...“》这是第一组链接《/a》《a class=“blue“ href=“...“》这是第二组链接《/a》七、CSS的最近优先原则/*如果对一个元素定义了多次样式，则以最近的一级优先，最近一级的样式将覆盖其他行内样式 》ID 》 Class》标记*/以下是引用片段：CSS:p{color:red}.blue{color:blue}.yellow{color:yellow}HTML:《p》此处显示为红色《/p》《p class=“blue“》此处显示为蓝色《/p》《p class=“blue“style=“color:green“》此处显示为绿色《/p》《p class=“blue yellow“》此处显示为黄色《/p》注意：（1）注意样式的几个优先顺序(优先级由上至下递减，下面的样式覆盖上面的样式)：--元素style设定--head区《style》《/style》中的设定--外部引用css文件（2）优先级不是按访问顺序来设定的，而是又css中的声明顺序来设的。如上例中《pclass=“yellow blue“》此处显示为黄色《/p》也显示为黄色，因为在css定义中.yellow在.blue的后面。八、书写正确的链接样式当用css定义链接的各种状态时，要注意书写的顺序即：:link :visited :hover :active利用首字母：L V H A，你可以通过记忆LoVe,Hate,两个单词来记住其顺序。:link --------链接的颜色:visited -----鼠标点击后的颜色:hover -------鼠标放上去未点的颜色（悬停）:active-------鼠标点击瞬间的颜色九、:hover的灵活运用IE6不支持除a标签以外的:hover属性，我们了解:hover属性是鼠标悬停效果。在IE7和FF中，对几乎任意元素都可以设置:hover属性效果。这对我们做不同的访问效果很好。如：p {width : 360px;height : 80px;padding : 20px;margin : 50px auto 0 auto;border : 1px solid #ccc;line-height : 25px;background : #fff;}p:hover {border : 1px solid #000;background : #ddd;}----------------此效果针对IE7和FFp a {color : #00f;text-decoration : none;font-size : 13px;}p a:hover {color : #036;text-decoration : underline;}-----------------此效果针对IE6十、定义A标签要注意的小问题当我们定义a{color:red;}时，它代表了A的四种状态的样式，如果此时要定义一个鼠标放上的状态只要定义a:hover就可以了，其它三种状态就是A中所定义的样式。只定义了一个a:link时，一定要记得把其它三种状态定义出来！十一、禁止内容换行与强制内容换行在表格或层中我们可能希望内容不换行或强制换行，我们可以通过一些css属性来达到这些要求。禁止换行：white-space:nowrap强制换行：word-break:break-all; white-space: normal;十二、区别relative和absoluteAbsolute---CSS中的写法是：position:absolute; 他的意思是绝对定位，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。Relative---CSS中的写法是：position:relative;他的意思是绝对相对定位，他是参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。十三、区别块级元素block和内联元素inline块级---可定义宽高，另起独占一行（如：divul）内联---不可定义宽高，如文本元素（如a span）十四、区别display和visibilitydisplay:none和visibility:hidden都可以隐藏一个元素,但visibility:hidden只是隐藏了元素的内容，但其使用的位置空间仍然被保留。而display:none则相当把元素从页面中去除，其占用位置也将被删除。十五、背景background的一些语法background-image:url(背景图案.jpg,gif,bmp);background-color:#FFFFFF; （背景颜色）background-color : transparent; 《--设定背景为透明色–》background-repeat 改变背景图片的重复并排的设定说明repeat 背景图片并排repeat-x 背景图片以X方向 并排repeat-y 背景图片以Y方向 并排no-repeat 背景图片不 以并排的方式处理background-attachment是否固定图片位置说明scroll 拉动卷轴时，背景图片会跟着移动（缺省值）fixed 拉动卷轴时，背景图片不会跟着移动以长度定位background-position:x y使用百分比定位background-position: x% y%说明x% 往右移y% 往下移backgroud-position: 0% 0%; 左边上方backgroud-position: 0% 50%; 左边中间backgroud-position: 50% 0%; 中间上方backgroud-position: 50% 50%; 正中间backgroud-position:100% 0%; 右边上方backgroud-position: 0% 100%; 左边下方backgroud-position: 100% 50%; 右边中间backgroud-position: 50% 100%; 中间下方backgroud-position: 100% 100%; 右边下方以关键字定位关键字说明top 上 ( y = 0 )center 中 ( x = 50, y = 50 )bottom 下 ( y = 100 )left 左 ( x= 0 )Exp:background-position:center;图片在指定背景中央X=50% Y=50%位置background-position: 200px 30px十六、注释的写法在Html中：《!-- footer --》content《!-- end footer --》在CSS中：/* ---------- header ----------------- */Style十七、CSS的命名规范1. id的命名(1)页面结构容器: Container页头：header内容：content/container页面主体：main页尾：footer导航：nav侧栏：sidebar栏目：column页面外围控制整体布局宽度：wrapper左右中：left right center(2)导航导航：nav主导航：mainnav子导航：subnav顶导航：topnav边导航：sidebar左导航：leftsidebar右导航：rightsidebar菜单：menu子菜单：submenu标题: title摘要: summary(3)功能标志：logo广告：banner登陆：login登录条：loginbar注册：regsiter搜索：search功能区：shop标题：title加入：joinus状态：status2. class的命名(1)颜色:使用颜色的名称或者16进制代码,如.red { color: red; }.f60 { color: #f60; }.ff8600 { color: #ff8600; }(2)字体大小,直接使用“font+字体大小“作为名称,如.font12px { font-size: 12px; }.font9pt {font-size: 9pt; }(3)对齐样式,使用对齐目标的英文名称,如.left { float:left; }.bottom { float:bottom; }(4)标题栏样式,使用“类别+功能“的方式命名,如.barnews { }.barproduct { }注意事项::u 一律小写;u 尽量用英文;u 不加中杠和下划线;u 2个组合的单词不用中杠和下划线可以将第二个单词的首字母大写（eg:mainContent）；u 尽量不缩写，除非一看就明白的单词.3. 主要的站点css文件主要的 master.css模块 module.css基本共用 base.css（root.css）布局，版面 layout.css主题 themes.css专栏 columns.css文字 font.css表单 forms.css补丁 mend.css打印 print.css十八、Padding影响宽度问题如果一组要嵌套的标签之间需要些间距的话，那就留给位于里面的标签的margin属性吧，而不要去定义位于外面的标签的padding十九、完美的单象素外框线表格table{border-collapse:collapse;}td{border:1px solid #000;}二十、如果文字过长,则将过长的部分变成省略号显示《style=”width:120px;height:50px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap”》二十一、并不是所有样式都要简写当样式表前定义了如p{padding:1px2px 3px 4px}时，在后续工程中又增加了一个样式上补白5px，下补白6px。我们并不一定要写成p.style1{padding:5px 6px 3px 4px}。可以写成p.style1{paddingtop:5px;padding-right:6px;},你可能会感觉这样写还不如原来那样好，但你想没想过，你的那种写法重复定义了样式，另外你可以不必去找原来的下补白与左补白的值是多少！如果以后前一个样式P变了话，你定义的p.style1的样式也要变。(此种方法对后期修改样式很重要)二十二、几个常用到的CSS细节处理上的样式1）中文字两端对齐：text-align:justify;text-justify:inter-ideograph;2）固定宽度汉字截断：overflow:hidden;text-overflow:ellipsis;white-space:nowrap;(不让其换行，不过只能处理文字在一行上的截断，不能处理多行。)（IE5以上）FF不能，它只隐藏。***万能强制换行：white-space:normal;word-break:break-all禁止换行：white-space:nowrap强制换行：word-wrap:break-word; word-break: normal;.AutoNewline{/*word-break: break-all; 方法一必须*//*word-wrap:break-word;overflow:hidden; 方法二*//*word-wrap:break-word; word-break: normal;方法三 */word-wrap:break-word; word-break:break-all;}.NoNewline{/*word-break: keep-all; 方法一必须*/white-space:nowrap;}3）固定宽度汉字（词）折行：table-layout:fixed; word-break:break-all;（IE5以上）FF不能。4）《acronym title=”输入要提示的文字”style=”cursor:help;”》文字《/acronym》用鼠标放在前面的文字上看效果。这个效果在国外的很多网站都可以看到，而国内的少又少。5）图片设为半透明：.halfalpha { background-color:#000000;filter:Alpha(Opacity=50)}在IE6及IE5测试通过，FF未通过，这是因为这个样式是IE私有的东西；6）FLASH透明：选中swf,打开原代码窗口，在《/object》前输入《paramname=”wmode”value=”transparent”》 以上是针对IE的代码。针对FIREFOX 给《embed》 标签也增加类似参数wmode=”transparent”7）在做网页时常用到把鼠标放在图片上会出现图片变亮的效果，可以用图片替换的技巧，也可以用如下的滤镜：.pictures img {filter: alpha(opacity=45); }.pictures a:hover img {filter: alpha(opacity=90); }8）层在浏览器中居中对齐问题body { text-align: center }#content { text-align: left; width: 700px;margin: 0 auto }

css样式表名字有什么规则

常用的CSS命名规则:头：header 内容：content/container 尾：footer 导航：nav 侧栏：sidebar栏目：column 页面外围控制整体布局宽度：wrapper 左右中：left right center登录条：loginbar 标志：logo 广告：banner 页面主体：main 热点：hot新闻：news 下载：download 子导航：subnav 菜单：menu子菜单：submenu 搜索：search 友情链接：friendlink 页脚：footer版权：copyright 滚动：scroll 内容：content 标签页：tab文章列表：list 提示信息：msg 小技巧：tips 栏目标题：title加入：joinus 指南：guild 服务：service 注册：regsiter状态：status 投票：vote 合作伙伴：partner(二)注释的写法: /* Footer */ 内容区 /* End Footer */(三)id的命名:(1)页面结构 容器: container 页头：header 内容：content/container 页面主体：main 页尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体布局宽度：wrapper 左右中：left right center(2)导航 导航：nav 主导航：mainbav 子导航：subnav 顶导航：topnav 边导航：sidebar 左导航：leftsidebar 右导航：rightsidebar 菜单：menu 子菜单：submenu 标题: title 摘要: summary(3)功能 标志：logo 广告：banner 登陆：login 登录条：loginbar 注册：regsiter 搜索：search 功能区：shop 标题：title 加入：joinus 状态：status 按钮：btn 滚动：scroll 标签页：tab 文章列表：list 提示信息：msg 当前的: current 小技巧：tips 图标: icon 注释：note 指南：guild 服务：service 热点：hot 新闻：news 下载：download 投票：vote 合作伙伴：partner 友情链接：link 版权：copyright(四)class的命名:(1)颜色:使用颜色的名称或者16进制代码,如 .red { color: red; } .f60 { color: #f60; } .ff8600 { color: #ff8600; }(2)字体大小,直接使用’font+字体大小’作为名称,如 .font12px { font-size: 12px; } .font9pt {font-size: 9pt; }(3)对齐样式,使用对齐目标的英文名称,如 .left { float:left; } .bottom { float:bottom; }(4)标题栏样式,使用’类别+功能’的方式命名,如 .barnews { } .barproduct { }

css三大特性

一、CSS层叠性

• 说明层叠性是多种CSS样式的叠加，是浏览器处理样式冲突的方式。在HTML中对于同一个元素可以有多个CSS样式存在，当有相同权重的样式存在时，会根据这些样式出现的先后顺序来决定，处于最后面的CSS样式将会覆盖前面的CSS样式。

二、CSS继承性

• 说明简单的理解为—“子承父业“，是指子标签会继承父标签的==某些==样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。

三、CSS优先级

在复杂CSS样式表，往往并不是相同样式不同值的堆叠这么简单，经常出现两个或多个不同样式规则应用在同一元素上，这时到底采用哪个样式呢？这就是典型的CSS优先级问题。

处理优先级问题，就是考虑样式权重的高低。这里先给大家介绍一些特殊的情况：

• ==继承样式的权重为0。==也就是说，在嵌套结构中，无论父元素样式权重多大，子元素继承时，应用在子元素上的权重都为0，即子元素定义的样式会覆盖所有继承来的样式。

• ==行内样式优先。==应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。

• 权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。

• CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。

css的三种样式中哪种样式的优先级最高

css样式采取的就近样式原则。

行内样式《div style=““》《/div》优先级最高，没有行内样式那么会回在页答面找《style》《/style》内嵌样式。

名称CSS中的“层叠（cascading）”表示样式单规则应用于HTML文档元素的方式。具体地说，CSS样式单中的样式形成一个层次结构，更具体的样式覆盖通用样式。样式规则的优先级由CSS根据这个层次结构决定，从而实现级联效果。 

扩展资料：

易于使用和修改：

CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。

另外，可以将相同样式的元素进行归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的HTML标签中。

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

HTML网页怎么使用CSS样式

在制作一个网页的时候，Css样式的添加一共有四种方式，一起来看看这四种方式：一、使用STYLE属性： 将STYLE属性直接加在个别的元件标签里。《元件(标签) STYLE=“性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...}例如：《TD STYLE=“COLOR:BLUE; font-size:9pt; font-family:“标楷体“; line-height:150%》这种用法的优点 是可灵巧应用样式於各标签中，但是缺点则是没有整篇文件的『统一性』。二、使用STYLE标签： 将样式规则写在《STYLE》...《/STYLE》标签之中。通常是将整个的 《STYLE》...《/STYLE》结构写在网页的《HEAD》 《/HEAD》部份之中。这种用法的优点就是在於整篇文件的统一性，只要是有声明的的元件即会套用该样式规则。缺点就是在个别元件的灵活度不足。三、使用 LINK标签： 将样式规则写在.css的样式档案中，再以《LINK》标签引入。假设我们把样式规则存成一个example.css的档案，我们只要在网页中加入《LINK REL=STYLESHEET TYPE=“text/css“ HREF=“example.css“》即可套用该样式档案中所制定好的样式了。 通常是将LINK标签写在网页的《head》《/head》部份之中。这种用法的优点就是在於可以把要套用相同样式规则的数篇文件都指定到同一个样式档案即可。缺点也是在个别文件或元件的灵活度不足。四、使用@import引入： 跟LINK用法很像，但必　放在《STYLE》...《/STYLE》 中。要注意的是，行末的分号是绝对不可少的！这种方式也可以把

css目标规则名称怎么改

在使用dreamweaver制作网页的时候，css规则是必不可少的层叠样式表，操作方法如下。

设备：联想电脑

系统：xp

软件：dreamweaver2019

1、首先打开dreamweaver软件，在如下图输入文字 ，可以自己定义，然后单击css样式。

2、单击css样式之后，在单击右下角新建css规则。

3、这里可以看到了类、标签、高级选项，可以选择第一个类，在选择自定义（新建样式表文件）。

4、确定之后在单击保存。

5、然后在选择类型、大小、修饰可以自己定义，在单击确定。

6、这里可以不选择背景，选择背景之后文字背景就是这一种颜色。选择之后在单击确定。

7、这里在单击低三角符号样式选择ton，这是刚才保存的配置。

8、最后选择ton之后如下图颜色就变成红色了，文字也有下划线了。

CSS样式表有哪几类规则

1、内联样式表直接在HTML标记内，插入sytle属性，再定义要显示的样式，这是最简单的样式定义方法。不过，利用这种方法定义样式时，效果只可以控制该标记，其语法如下：《标记名称 style=“样式属性:属性值;样式属性:属性值“》如：《body style=“ color:#FF0000;font-family:“宋体“;cursor:url(3151.ani);“》2、 嵌入样式表《style type=“text/css“》 内部样式表是把样式表放到页面的《head》区里，这些定义的样式就应用到页面中了，样式表是用《style》标记插入的《head》……《style type=“text/css“》《!--hr {color: sienna}p {margin-left: 20px}body {background-image: url(“images/back40.gif“)}--》《/style》……《/head》《style》元素是用来说明所要定义的样式。TYPE属性是指定style元素以css的语法定义。有些低版本的浏览器不能识别style标记，这意味着低版本的浏览器会忽略style标记里的内容，并把style标记里的内容以文本直接显示到页面上。为了避免这样的情况发生，我们用加HTML注释的方式《!-- 注释 --》隐藏内容而不让它显示。3、外部样式表《link href=“样式表地址“ rel=“stylesheet“ type=“text/css“ /》4、输入样式表可以使用css的@import声明将一个外部样式表文件输入到另外一个css文件中，被输入的css文件中的样式规则定义语句就成为了输入到的css文件的一部分，也可以使用@import声明将一个css文件输入到网页文件的《style》《/style》标签对中，被输入的css文件中的样式规则定义语句就成了《style》《/style》标签对中的语句。《style》@import url(http://……)《/stypel》