本文目录
- 如何和何时使用CSS的，important
- 什么是css呀这个文件用什么语言编呀
- web前端开发的css应该怎样写
- 用HBuilder在css文件夹内创建外部css文件,并在该文件内显示样式在要应用的页面head区
- div+css开发网站是什么意思
如何和何时使用CSS的，important
早在90年代中期到后期起草的 CSS1规范中就介绍过!important，它能够帮助开发者和用户在修改样式表的时候轻松覆盖原本的权重。一直以来!important的用法几乎没变，只在CSS2.1中有一点变化，并且在CSS3规范中没有对它做任何添加和修改。
让我们来看一下!important是什么，以及在什么时候使用，如果你遇到类似情况，你就应该使用它。
层叠的概述
在我们对!important的正确用法进行探讨之前，让我们为本节的内容做个铺垫。之前，Smashing Magazine已经对CSS权重进行过深入的阐释。所以，如果你想详细了解CSS的层叠和权重关系就请读读这篇文章。
CSS权重早期在W3cplus中已进行翻译，如果您阅读英文有点吃力，可以阅读译文《你应该知道的一些事情——CSS权重》
——大漠
下面这个提纲描述了CSS文档是如何确定给不同的样式分配不同的权重的。在CSS规范中提及的关于层叠的一个大体概括：
找到所有作用于元素和属性的声明
一个样式是否作用于元素依赖于这个样式的权重和如下所示样式来源的顺序，下面这个列表中越靠前的权重越小:
用户代理声明（译注：如浏览器默认样式）
用户声明（译注：如用户浏览器选项设置或通过开发人员调试工具修改）
开发者声明（译注：如页面中引用的CSS）
带有!important的开发者声明
带有!important的用户声明
样式的应用依赖具体的情况，一个更加具体的选择器往往会比一个笼统选择器获得更大的权重。
样式的应用依赖样式出现的顺序（即，后面的会覆盖前面的）
从这个提纲中，你可能已经明白!important会如何改变权重以及它在层叠中扮演一个什么样的角色。接下来让我们看一下!important更多的细节。
语法和描述
!important为开发者提供了一个增加样式权重的方法。应当注意的是!important是对整条样式的声明，包括这个样式的属性和属性值（感谢Brad Czerniak指出其中的差别）。这里有个简单的代码示例可以清晰地说明!important是如何应用于原本的样式中的：
#example {
font-size: 14px !important;
}
#container #example {
font-size: 10px;
}
在上面的代码示例中，由于使用了!important，id为“example”的元素字号将被设置为14px。
如果不使用!important，第二个样式声明的代码块很自然地比第一个的权重要大，原因有二：在样式表中第二个代码块要比第一个出现的晚（即，
它位列第二）；第二个代码块有更大的权重（是由两个id，#container
#example组合而成，而不是只有一个id，#example。但是因为第一个代码块里面包含了!important，所以对于字号设置来说它有更大
的权重。
见CSS权重与继承中关于权重的计算方法，如下图:
——译者：David
关于!important应该注意的一些地方：
当!important第一次在CSS1中被介绍时是这样规定的，即一个由开发者声明的!important样式要比一个由用户声明的!important样式获得更大的权重。为了提高访问性，在CSS2 中它被颠倒了过来。
如果!important被用于一个简写的样式属性，那么这条简写的样式属性所代表的子属性都会被作用上!important。
关键字!important必须放在一行样式的末尾并且要放在该行分号前，否则就没有效果。 （不过分号前的空格不会影响它）
如果因为一些特殊原因，你不得不在一个代码块中声明两个同样的属性，那么请把!important加在第一个属性后面，因为这样做会让所有浏览器中第一个属性的权重更大，而IE6除外（这是一个只有IE6才有的hack，但是不会影响你的CSS）
在IE6和IE7中如果你使用不同的单词替代!important（像!hotdog），这条CSS样式依然会获得更大的权重，但是其他浏览器却会忽略它。
针对第二点，译者作出如下标注：
.e{margin: 0 !important;}
那么就等价于
.e{
margin-top: 0 !important;
margin-right: 0 !important;
margin-bottom: 0 !important;
margin-left: 0 !important;
}
——译者：David
何时该使用!important
使用任何技术的利弊都视情况而定。下面是我个人对如何有效使用!important的一些观点。
永不使用
非到万不得已不要用!important。如果你是出于懒惰使用!important，为了避免例行的调试而滥用它，那么你（或者是那些后继开发你项目的人）将会深受其害。
如果你并非滥用只是有偶尔用一下!important，同样，你很快就会发现你的样式会难以维护。正如上面我们讨论过的，本来，CSS会根据层叠和
权重产生正常的作用顺序。但当你使用了!important就扰乱了原本的顺序，让更多的权重给了正常情况下本不应该获得这么多权重的样式。
如果你从不使用!important，那么这标志着你真正理解了CSS并且证明你在编写代码前经过深思熟虑。
正如古老的格言所说“永远不要说‘永不’”，所以接下来我们还是要来讨论!important的一些合理的用法。
帮助测试可访问性
正如前面提到过的，用户样式中可以包含!important声明，允许用户根据自己的特殊需求来给具体的CSS样式增加权重以帮助他们阅读和访问内容。
有特殊需求的用户可以把!important加到像font-size这样的打印属性上来加大字体，或者为了提高网页的对比度而把它加到与颜色相关的样式上。
下面这张Smashing Magazine首页的截图，展示的正是借助FireFox的开发人员工具把正常大小的文本用用户自定义样式覆盖后的效果：
在这个案例中，文本大小是随浏览器窗口大小可调节的，样式中并没有使用!important，所以用户定义的样式会忽略权重而覆盖开发者的样式。然
而，如果body正文的文本大小是开发者使用!important来设置的，就算用户用更加具体的选择器定义了样式也不能覆盖这个文本大小的设置。因此，
即使在用户样式的作用下，甚至是开发者自己滥用!important的情况下，这条包含!important的样式不仅解决了问题，还保持了文本大小的可
调节性。
暂时解决紧急问题
总会有这样的情况发生——某个客户的线上网站出现了CSS的bug，你必须快速修复。在大多数情况下你应该会用Firebug或者其他的开发者工具
来调试你的CSS代码并且最终修复它。但是，如果这个bug发生在IE6或者是其他没有提供调试工具的浏览器上的时候，你可能需要使
用!important来完成快速修复。
当你用这个临时修复的办法让网站继续上线以后（这样可以先摆平客户），你再花些时间用不破坏层叠且可维护性高的方法来修复这个bug也为时未晚。当你找到更好的解决方案你就可以替换掉线上的!important部分，而且客户对此毫不知情。
用Firebug或者其他开发者工具覆写样式
我们可以使用Firebug或者Chrome开发者工具（译注：两者均可用F12唤出）查看页面元素，在不影响真正的CSS样式的情况下可以自由地
编辑样式，测试效果，调试bug等等。下面这张截图展示的就是在Chrome开发者工具中看到的Smashing Magazine的一些样式：
图中红框内带有删除线的样式表明它已经被后面的样式覆盖掉了。为了让这条样式再次作用，你得禁用后面的样式。你也可以把选择器写得更加具体以增加权重，但是这样会让整个代码块的权重都增加，这并不是我们想要的。
!important可以被加在单行样式的后面从而让已经被覆盖的样式重新作用。这样的话，你不用大量修改你真正的样式就可以调试你的CSS，直到你找到问题所在。
下图所示是在上图那条相同的样式后面加了!important。你可能已经注意到之前的删除线不见了，因为现在这条样式要比之前覆盖它的那条有更大的权重：
覆写用户生成内容中的行内样式
CSS开发中一个让人头疼的问题，就是当我们遇到用户生成内容中有行内样式的情况，这种情况多发生在一些使用了所见即所得网页编辑器的CMS系统
中。在CSS层叠中，行内样式会覆盖常规样式。然而，我们并不想看到那些本该被我们定义好的CSS样式作用的元素却被用户生成内容中的行内样式改变。此时
你就可以用!important来避免这种问题，因为，一条被开发者加了!important的样式会覆盖行内样式。
你可以给只在打印时生效的样式加上!important,虽然不是所有情况下都需要这样做，而且正如我们之前提到的那些原因一样也不建议这么做。但是，这样可以让你在不用重复编写选择器的情况下就能覆盖具体的样式。
打印样式即打印机在打印网页时所使用的样式，关于打印样式的细节可以阅读这篇文章
——译者：David
关于单独设计的博客页面
如果你曾经接触过设计个人博客页面的技术（许多设计师反对将 “艺术指导”用于这种技术，确实如此），像Heart Directed中展示的那样，你会发现有一种需求要求每个单独的文章都要有它自己独立的样式，抑或你需要使用行内样式。你可以用这篇文章中给出的代码为一个个人页面编写它自己的样式。
!important在这个时候可以派上用场，为了在你的站点里创建一个独一无二的页面，你可以轻松覆盖默认的样式而不必担心原本的CSS权重。
什么是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}
--》
谢谢
web前端开发的css应该怎样写
CSS 指层叠样式表 (Cascading Style Sheets)，样式定义如何显示 HTML 元素。CSS样式表又分为三种方式，内联样式表、内联引用和外部样式表。下面具体介绍它们的写法：
1.内联样式表：在HTML文档头部 《head》 区域使用《style》 元素 来包含CSS。
2.内联引用： 在HTML元素中使用“style“ 属性，直接对指定元素应用样式。
3.外部样式表：将样式单独写在CSS文件内，通过引入外部 CSS 文件来应用样式。这种方法常应用于大型开发中。
用HBuilder在css文件夹内创建外部css文件,并在该文件内显示样式在要应用的页面head区
摘要
亲，您好，很高兴为您解答，新建一个网页文档系统就会自动创建css文档和js文档，在侧边栏就能看到css文件。
1、建议新手不要使用hbuilder，这个编辑器是开发网站前台页面比较专业的集成开发环境，建议使用比较基础的editplus或者Dreamweaver等。
2、uilder 是DCloud（数字天堂）推出一款支持HTML5的Web开发IDE。“快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块及很多配套，HBuilder能大幅提升HTML、js、css的开发效率。
咨询记录 · 回答于2021-11-20
用HBuilder在css文件夹内创建外部css文件,并在该文件内显示样式在要应用的页面head区域添加link标签，链入外部css文件
您好，我正在帮您查询相关的信息，马上回复您。
亲，您好，很高兴为您解答，用HBuilder在css文件夹内创建外部css文件,并在该文件内显示样式 在要应用的页面head区域添加link标签，链入外部css文件您好，非常抱歉，没有在网上预留相关信息说明哦，非常抱歉，给您带来了不便，请您见谅！
用HBuilder在css文件夹内创建外部css文件,并在该文件内显示样式
在要应用的页面head区域添加link标签，链入外部css文件
亲，您好，很高兴为您解答，新建一个网页文档系统就会自动创建css文档和js文档，在侧边栏就能看到css文件。
1、建议新手不要使用hbuilder，这个编辑器是开发网站前台页面比较专业的集成开发环境，建议使用比较基础的editplus或者Dreamweaver等。
2、uilder 是DCloud（数字天堂）推出一款支持HTML5的Web开发IDE。“快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块及很多配套，HBuilder能大幅提升HTML、js、css的开发效率。
用HBuilder在css文件夹内创建外部css文件,并在该文件内显示样式
亲，您好，很高兴为您解答，css怎么建立外部样式表？
建立外部样式表很简单，就在html的head里写 至于你上边说的一大堆css里具体内容，建议你去w3school上学一下css，css很简单的。
选择样式中的所有CSS样式，然后复制或剪切。
在创建的css样式文件中，粘贴刚刚复制到此处的文件。
怎样使用Dreamweaver外部css样式表？？
怎样调用外部css样式表？？ 请教调用详细过程 各位大大
将CSS地址改为实际地址，即可正常调用，包括css中的图片。
css代码： a:link:hover { background-color:#e60012; text-decoration:把css代码写在html文档的与标签之间即可。需要注意的是，一般来说内嵌样式要放在head标签内。 HTML文档添加样式主要有三种方式，第一种是直接在标签后面接style属性，比如;第二种是内嵌样式，即前面提到的写在style标签内的方式；第三种则一般是
css中什么是外部样式表?
css中什么是外部样式表?什么是内部样式表？什么是内联样式?都是如何定义1.外部样式表就是新建一个文档，里面全写css，然后再通过 link 插入到html 代码中 2.内部样式表就是直接在HTML文档中写css代码，写在中 用包围 3.内联样式就是 直接在标签里写样式。
div+css开发网站是什么意思
DIV+CSS是网站标准（或称“WEB标准”）中常用术语之一， div是html(超文本语言)中的一个元素,div+css 是一种网页的布局方法,这一种网页布局方法有别于传统的table布局,真正地达到了w3c内容与表现相分离. 通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。
随着WEB2.0标准化设计理念的普及，国内很多大型门户网站已经纷纷采用DIV+CSS制作方法，奋斗网络也成为了CSS网页布局技术学习的先锋站点，从实际应用情况来看，此种方法绝对好于表格制作页面的方法。
如今大部分网站仍然采用表格嵌套内容的方式来制作网站，虽然此方法对于我们来说比较熟悉、比较上手；但是，它却阻碍了一种更好的、更有亲和力的、更灵活的，而且功能更强大的网站设计方法——DIV+CSS。
CSS网页布局的意义体现在如下方面：
一、使页面载入得更快
由于将大部分页面代码写在了CSS当中，使得页面体积容量变得更小。相对于表格嵌套的方式，DIV+CSS将页面独立成更多的区域，在打开页面的时候，逐层加载。而不像表格嵌套那样将整个页面圈在一个大表格里，使得加载速度很慢。
二、降低流量费用
页面体积变小，浏览速度变快，这就使得对于某些控制主机流量的网站来说是最大的优势了。
三、修改设计时更有效率
由于使用了DIV+CSS制作方法，在修改页面的时候更加容易省时。根据区域内容标记，到CSS里找到相应的ID，使得修改页面的时候更加方便，也不会破坏页面其他部分的布局样式。
四、保持视觉的一致性
DIV+CSS最重要的优势之一：保持视觉的一致性；以往表格嵌套的制作方法，会使得页面与页面，或者区域与区域之间的显示效果会有偏差。而使用DIV+CSS的制作方法，将所有页面，或所有区域统一用CSS文件控制，就避免了不同区域或不同页面体现出的效果偏差。
五、更好地被搜索引擎收录
由于将大部分的HTML代码和内容样式写入了CSS文件中，这就使得网页中正文部分更为突出明显，便于被搜索引擎采集收录。
六、对浏览者和浏览器更具亲和力
我们都知道网站做出来是给浏览者使用的，对浏览者和浏览器更具亲和力，DIV+CSS在这方面更具优势。由于CSS富含丰富的样式，使页面更加灵活性，它可以根据不同的浏览器，而达到显示效果的统一和不变形。
尽管DIV+CSS具有一定的优势，不过现阶段CSS+DIV网站建设存在的问题也比较明显，主要表现在：
第一，对于CSS的高度依赖使得网页设计变得比较复杂。相对于HTML4.0中的表格布局（table），CSS+DIV尽管不是高不可及，但至少要比表格定位复杂的多，即使对于网站设计高手也很容易出现问题，更不要说初学者了，这在一定程度上影响了XHTML网站设计语言的普及应用。
第二，CSS文件异常将影响整个网站的正常浏览。CSS网站制作的设计元素通常放在几个l外部文件中，这一个或几个文件有可能相当复杂，甚至比较庞大，如果CSS文件调用出现异常，那么整个网站将变得惨不忍睹。
第三，对于CSS网站设计的浏览器兼容性问题比较突出。基于HTML4.0的网页设计在IE4.0之后的版本中几乎不存在浏览器兼容性问题，但CSS+DIV设计的网站在IE浏览器里面正常显示的页面，到火狐浏览器（FireFox ）中却可能面目全非（这也是为什么建议网络营销人员使用火狐浏览器的原因所在 ）。CSS+DIV还有待于各个浏览器厂商的进一步支持。
第四，CSS+DIV对搜索引擎优化与否取决于网页设计的专业水平而不是CSS+DIV本身。CSS+DIV网页设计并不能保证网页对搜索引擎的优化，甚至不能保证一定比HTML网站有更简洁的代码设计，何况搜索引擎对于网页的收录和排序显然不是以是否采用表格和CSS定位来衡量，这就是为什么很多传统表格布局制作的网站在搜索结果中的排序靠前，而很多使用CSS及web标准制作的网页排名依然靠后的原因。因为对于搜索引擎而言，网站结构、内容、相关网站链接等因素始终是网站优化最重要的指标。
