css样式位置,css设置位置

css的样式表放在哪三个位置位置？

网站目录下建立style/css路径，然后放置css文件。在页面的head之间引用，引用方法：直接拖拽css文件到head就行。

相关问答

Q1: DIY的显示样式的CSS样式在哪里？哪个文件夹

如果想在默认模板上简单的修改、附加扩展css，只需要在你对应的模板套系下手动添加一个对应的扩展css文件就可以了，例如你想修改或者添加common.css中的代码，只需要在自己创建的模板套系目录的对应位置：common文件夹下新建一个extend_common.css文件，然后将自己要修改或者扩展的css代码。将在生成缓存css时，自动追加到默认模板的css文件tmplate/default/common/common.css解析成你当前的模板id缓存文件。

CSS 继承规范：

Discuz! X系列产品中 CSS 文件会在缓存时按照以下顺序进行合并：

template/default/*.css 文件。

当默认模板是非默认模板时，template/模板目录/extend_*.css 文件 或 template/模板目录/*.css。

当某插件启用时，source/plugin/插件目录/template/extend_*.css 文件。

因此非默认模板目录中的 CSS 属性将继承默认模板中的 CSS 属性，插件目录中的 CSS 文件将继承前二者的 CSS 属性。

CSS 自身的集成顺序为：当 CSS 属性名称相同时，CSS 文件中，写在后面的替换前面的代码。

CSS书写规范：

属性写在一行内，属性之间、属性名和值之间以及属性与“{}”之间须有空格，例如：.class { width: 400px; height: 300px; } 。

属性的书写顺序：

位置：position,left,right,float

盒模型属性：display,margin,padding,width,height

边框与背景：border,background

段落与文本：line-height,text-indent,font,color,text-decoration,...

其他属性：overflow,cursor,visibility,...

针对特殊浏览器的属性，应写在标准属性之前，例如：-webkit-box-shadow:; -moz-box-shadow:; box-shaow:;

按照元素模型由外及内，由整体到细节书写，大致分为五组：

谨慎添加新的选择符规则，尤其不可滥用 id，尽可能继承和复用已有样式

选择符、属性、值均用小写（格式的颜色值除外），缩写的选择符名称须说明缩写前的全称，例如 .cl - Clearfix

勿使用冗余低效的 CSS 写法，例如：ul li a span { ... }

慎用 !important

建议使用在 class/id 名称中的词语

表示状态：a-active

表示结构：h-header,c-content,f-footer

表示区域：mn-main,sd-side,nv-navigation,mu-menu

表示样式：l-list,tab,p_pop

常用css实例：

兼容IE浏览器css hack

所有 IE浏览器适用：

.ie_all .foo { ... }

IE6 专用：

.ie6 .foo { ... }

IE7 专用：

.ie7 .foo { ... }

IE8 专用：

.ie8 .foo { ... }

浮动样式及浮动元素父元素高度自适应样式代码：

.z/.y 浮动 left/right .z { float: left; } .y { float: right; }

.cl:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .cl { zoom: 1; }

大标题字体：

.wx, .ph { font-family: "Microsoft YaHei", "Hiragino Sans GB", STHeiti, Tahoma, SimHei, sans-serif; font-weight: 100; }

外边距样式：

.mtn { margin-top: 5px !important; }

.mbn { margin-bottom: 5px !important; }

.mtm { margin-top: 10px !important; }

.mbm { margin-bottom: 10px !important; }

.mtw { margin-top: 20px !important; }

.mbw { margin-bottom: 20px !important; }

文字字体大小：

.xs0 { font-family: {SMFONT}; font-size: {SMFONTSIZE}; -webkit-text-size-adjust: none; }

.xs1 { font-size: 12px !important; }

.xs2 { font-size: 14px !important; }

.xs3 { font-size: 16px !important; }

内边距样式：

.ptn { padding-top: 5px !important; }

.pbn { padding-bottom: 5px !important; }

.ptm { padding-top: 10px !important; }

.pbm { padding-bottom: 10px !important; }

.ptw { padding-top: 20px !important; }

.pbw { padding-bottom: 20px !important; }

module.css文件架构解析（此文件必须按照格式编写）：

/** group::index **/

/* 群组 index 模块使用的CSS */

/** end **/

/** group::index,forum::index **/

/* 群组 index 和 论坛 index 模块使用的CSS */

/** end **/

/** forum **/

/* 论坛 所有模块使用的CSS */

/** end **/

实现模块化css分部加载！格式固定多个模块用”，“隔开例如：

/** misc::invite,group,forum::viewthread,portal::view,home::space **/

这个文件的分部加载是对应程序地址例如：forum.php?mod=forumdisplay，应当按照CURSCRIPT::$mod格式写即：forum::forumdisplay。

Q2: 前端如何快速寻找到css样式的位置

CSS样式实现快速定位bug的六大技巧

1、检查是否清除浮动

其实有不少的CSSBUG问题是因为没有清除浮动造成的。养成良好的清除浮动的习惯是必要的，推荐使用无额外HTML标签的清除浮动的方法（尽量避免使用overflow:hidden;zoom:1的类似方法来清除浮动，会有太多的限制性）。

2、检查IE下是否触发haslayout

很多的IE下复杂CSS BUG都与IE特有的haslayout息息相关。熟悉和理解haslayout对于处理复杂的CSSBUG会事半功倍。推荐阅读old9翻译的《Onhavinglayout》（如果无法翻越穿越伟大的GFW，可阅读蓝色上的转帖）

快捷提示：如果触发了haslayout，IE的调试工具IEDeveloperToolbar中的属性中将会显示haslayout值为-1。

3、边框背景调试法

故名思议就是给元素设置显眼的边框或者背景（一般黑色或红色），进行调试。此方法是最常用的调试CSSBUG的方法之一，对于复杂BUG依旧适用。经济实惠还环保.

4、检查页面的标签是否闭合

不要小看这条，也许折腾了你两天都没有解决的CSS BUG问题，却仅仅源于这里。毕竟页面的模板一般都是由开发来嵌套的，而他们很容易犯此类问题。

快捷提示：可以用Dreamweaver打开文件检查，一般没有闭合的标签，会黄色背景高亮。

5、样式排除法

有些复杂的页面也许加载了N个外链CSS文件，那么逐个删除CSS文件，找到BUG触发的具体CSS文件，缩小锁定的范围。

对于刚才锁定的问题CSS样式文件，逐行删除具体的样式定义，定位到具体的触发样式定义，甚至是具体的触发样式属性。

6、模块确认法

有时候我们也可以从页面的HTML元素出发。删除页面中不同的HTML模块，寻找到触发问题的HTML模块。

Q3: 简答引入CSS样式其代码常用的放置位置方式有哪三种?

1、内联式：

div style="css样式写在这".../div

2、外联式：

style

选择器 {css样式写在这}

/style

3、外链式：

link rel="stylesheet" href="css文件url写在这" /