css规则是什么
导读： 一、善用css缩写规则 /*注意上、右、下、左的书写顺序*/ 1.关于边距（4边）： 1px2px3px4px(上、右、下、左 1px2px3px（省略的左等于右） 1px2px(省略的上等于下 ...
一、善用css缩写规则
/*注意上、右、下、左的书写顺序*/
1.关于边距（4边）：
1px2px3px4px(上、右、下、左)
1px2px3px（省略的左等于右）
1px2px(省略的上等于下)
1px（四边都相同）
2.简化所有：
*/body{
margin:0}
------------表示网页内所有元素的margin为0
#menu{
margin:0}
------------表示menu盒子下的所有元素的margin为0
3.缩写（border）特定样式：
Border:1pxsolid#ffffff;
Border-width:01px2px3px;
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:italicsmall-capsbold12px/1.5emarrial,sans-serif;
注意：Font-size和Line-height用斜杠组合在一起不能分开写。
5.关于背景图片的：
Background:#FFFurl(log.gif)no-repeatfixedtopleft;
6.关于列表：
List-style-type:square/none;
List-style-position:inside;
List-style-image:url(filename.gif);
缩写成：
List-style:noneinsideurl(filename.gif)
二、运用4种方法来引入CSS样式
1.link
rel关系
type数据类型,有多种
href路径
部分浏览器支持候选样式,关键字:alternate:
2.内部样式块
3.@import
@importurl{
a.css}
注意:此指令必须放在容器中,并且在所有样式之前
建议放在一个html注释中,浏览器会不显示注释内的内容,而import等css代码能正常工作
4.内联样式
选择器是css的一个基本概念，基本规则如下：
1.规则结构：
h1{
color:red;
}
选择器{
属性:值;
}
这类是元素选择器，基本可以包括所有html的元素
属性值可以包括多个元素，如：border：1pxsolidred;
常用语法
1)分组：
选择器和声明都可以分组:
h1,h2,h3{
color:red;
background:#fff;
}
,选择器用","分割开,属性用";
"分割
2)类选择器,即通过class="stylename"应用的声明
定义:
.stylename{
color:red;
}
注意:
在html中可以使用多类选择:如class="cn1cn2cn3″
3)ID选择器,即与id属性对应的样式
定义:
#a{
color:red;
}
->
这个定义对用id="a"的元素
2.这部分都是我们常见的css语法，下面谈一下我们不常见的选择器语法
1)父子结构,跟文档结构图对应
如pspan{
border:1pxsolidred;
}
对应的是下面的
此处显示为红色
此处显示为蓝色 此处显示为绿色 此处显示为黄色 注意： （1）注意样式的几个优先顺序(优先级由上至下递减，下面的样式覆盖上面的样式)： --元素style设定 --head区中的设定 --外部引用css文件 （2）优先级不是按访问顺序来设定的，而是又css中的声明顺序来设的。 如上例中此处显示为黄色也显示为黄色，因为在css定义中.yellow在.blue的后面。 八、书写正确的链接样式 当用css定义链接的各种状态时，要注意书写的顺序即：:link:visited:hover:active利用首字母：LVHA，你可以通过记忆LoVe,Hate,两个单词来记住其顺序。 :link--------链接的颜色 :visited-----鼠标点击后的颜色 :hover-------鼠标放上去未点的颜色（悬停） :active-------鼠标点击瞬间的颜色 九、:hover的灵活运用 IE6不支持除a标签以外的:hover属性，我们了解:hover属性是鼠标悬停效果。在IE7和FF中，对几乎任意元素都可以设置:hover属性效果。这对我们做不同的访问效果很好。 如： p{ width:360px; height:80px; padding:20px; margin:50pxauto0auto; border:1pxsolid#ccc; line-height:25px; background:#fff; } p:hover{ border:1pxsolid#000; background:#ddd; } ----------------此效果针对IE7和FF pa{ color:#00f; text-decoration:none; font-size:13px; } pa: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和absolute Absolute---CSS中的写法是：position:absolute; 他的意思是绝对定位，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。 Relative---CSS中的写法是：position:relative; 他的意思是绝对相对定位，他是参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。 十三、区别块级元素block和内联元素inline 块级---可定义宽高，另起独占一行（如：divul） 内联---不可定义宽高，如文本元素（如aspan） 十四、区别display和visibility display: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:xy 使用百分比定位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:200px30px 十六、注释的写法 在Html中： content 在CSS中： /*----------header-----------------*/ style 十七、CSS的命名规范 1.id的命名 (1)页面结构 容器:container 页头：header 内容：content/container 页面主体：main 页尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体布局宽度：wrapper 左右中：leftrightcenter (2)导航 导航：nav 主导航：mainnav 子导航：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 2.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不加中杠和下划线; u2个组合的单词不用中杠和下划线可以将第二个单词的首字母大写（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:1pxsolid#000; } 二十、如果文字过长,则将过长的部分变成省略号显示 二十一、并不是所有样式都要简写 当样式表前定义了如p{ padding:1px2px3px4px} 时，在后续工程中又增加了一个样式上补白5px，下补白6px。我们并不一定要写成p.style1{ padding:5px6px3px4px} 。可以写成p.style1{ padding-top: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）文字用鼠标放在前面的文字上看效果。这个效果在国外的很多网站都可以看到，而国内的少又少。 5）图片设为半透明：.halfalpha{ background-color:#000000; filter:Alpha(Opacity=50)} 在IE6及IE5测试通过，FF未通过，这是因为这个样式是IE私有的东西； 6）FLASH透明：选中swf,打开原代码窗口，在前输入以上是针对IE的代码。 针对FIREFOX给标签也增加类似参数wmode="transparent" 7）在做网页时常用到把鼠标放在图片上会出现图片变亮的效果，可以用图片替换的技巧，也可以用如下的滤镜： .picturesimg{ filter:alpha(opacity=45); } .picturesa:hoverimg{ filter:alpha(opacity=90); } 8）层在浏览器中居中对齐问题 body{ text-align:center} #content{ text-align:left; width:700px; margin:0auto} 9)单行内容在层中垂直对齐问题 #content{ height:19px; line-height:19px; } 缺点是要内容不要换行。 10）层在浏览器中垂直居中对齐问题 缺点是：水平、垂直方向上不能出现滚动条，只能是在一屏的情况下 其实解决的思路是这样的：首们需要position:absolute; 绝对定位。而层的定位，使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以2。 如：一个层宽度是400，高度是300。使用绝对定位距离上部与左部都设置成50%。而margin-top的值为－150。margin-left的值为－200。这样我们就实现了层垂直居中于浏览器的样式编写。 请看实例代码： div{ position:absolute; top:50%; left:50%; margin:-150px00-200px; width:400px; height:300px; border:1pxsolidred; } 11）CSS控制图片自适应大小 divimg{ max-width:600px; width:600px; width:expression(document.body.clientWidth> 600?"600px":"auto"); overflow:hidden; } 二十三、使用float属性的元素要注意的问题 1.利用border属性确定出错元素的布局特性 使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界，错误原因即水落石出。 2.float元素的父元素不能指定clear属性 MacIE下如果对float的元素的父元素使用clear属性，周围的float元素布局就会混乱。这是MacIE的著名的bug，倘若不知道就会走弯路。 3.float元素务必指定width属性 很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何，一定要为其指定width属性。 另外指定元素时尽量使用em而不是px做单位。 4.float元素不能指定margin和padding等属性 IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性(可以在float元素内部嵌套一个div来设置margin和padding)。也可以使用hack方法为IE指定特别的值。 5.float元素的宽度之和要小于100% 如果float元素的宽度之和正好是100%，某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。 二十四、浏览器的兼容性问题（针对FF/IE6/IE7） 1.CSShack:区分IE6，IE7，firefox 区别FF，IE7，IE6： background:green!important; background:orange; *background:blue; IE6能识别*，但不能识别!important, IE7能识别*，也能识别!important; FF不能识别*，但能识别!important; 另外再补充一个，下划线"_", IE6支持下划线，IE7和firefox均不支持下划线。 于是大家还可以这样来区分firefox，IE7，IE6 background:green!important; *background:orange; _background:blue; 注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。 2.在firefox和IE中的BOX模型解释不一致导致相差2px解决方法 div{ margin:30px!important; margin:28px; } 注意这两个margin的顺序一定不能写反，!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：div{ maring:30px; margin:28px} 重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important; 3.条件性注释来选择不同的浏览器（比CSShack简洁） 4.区分IE8 .color{ background-color:#CC00FF; /*所有浏览器都会显示为紫色*/ background-color:#FF0000\9; /*IE6、IE7、IE8会显示红色*/ *background-color:#0066FF; /*IE6、IE7会变为蓝色*/ _background-color:#009933; /*IE6会变为绿色*/ 二十五、W3C遵循的标准原则 1.在排布表格之前，请大家一定要好好思考一个最佳的方案，表格的嵌套尽量控制在三层以内，并且应该尽量避免两个标记，经验表明，这两个标记会带来许多麻烦。 2.一个网页要尽量避免用整个一张大表格，所有的内容都嵌套在这个大表格之内，因为浏览器在解释页面的元素时，是以表格为单位逐一显示，如果一张网页是嵌套在一个大表格之内，那么很可能造成的后果就是，当浏览者敲入网址，他要先面对一片空白很长时间，然后所有的网页内容同时出现。如果必须这样做，请使用标记，以便能够使这个大表格分块显示。 3.排版中我们经常会遇到需要进行首行缩进的处理，不要使用或者全角空格来达到效果，规范的做法是在样式表中定义p{ text-indent:2em; } 然后给每一段加上标记，注意，一般情况下，请不要省略
结束标记。 4.原则上，我们禁止用来人为干预图片显示的尺寸，而且建议来人工干预分段。 6.不同语种的文字之间应该有一个半角空格，但避头的符号之前和避尾的符号之后除外汉字之间的标点要用全角标点，英文字母和数字周围的括号应该使用半角括号。 7.所有的字号都应该用样式表来实现，禁止在页面中出现标记。 8.请不要在网页中连续出现多于一个的也尽量少使用全角空格（英文字符集下，全角空格会变成乱码），空白应该尽量使用text-indent,padding,margin,hspace,vspace以及透明的gif图片来实现。 9.中英文混排时，我们尽可能的将英文和数字定义为verdana和arial两种字体。 10.行距建议用百分比来定义，常用的两个行距的值是line-height:120%/150%. 11.网站中的路径全部采用相对路径，一般链接到某一目录下的缺省文件的链接路径不必写全名，如我们不必这样：而应该这样： 12.嵌入图形文本的使用较大的字体，建议不要在图形中包括文本。 13."网页大小"定义为网页的所有文件大小的总和，包括HTML文件和所有的嵌入的对象。用户喜欢快的而不是新奇的站点。对于解调器用户，网页大小保持在34K以下为合适。 14.float元素务必指定width属性 很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何，一定要为其指定width属性。 另外指定元素时尽量使用em而不是px做单位。 15.float元素不能指定margin和padding等属性 IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性（可以在float元素内部嵌套一个div来设置margin和padding）。也可以使用hack方法为IE指定特别的值。 16.float元素的宽度之和要小于100% 如果float元素的宽度之和正好是100%，某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。 二十六、列表元素ulollidldtdd释义
- 内容1
- 内容2
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： css规则是什么
本文地址： https://pptw.com/jishu/664804.html