以前只关心语言代码,对CSS没有深入了解。今天对一个论坛进行改头换面,发现CSS功能的强大,决意学习下,特把精髓总结了一下, 并用CSS把偶的博客改了下。
一、CSS语法
1、CSS定义:层叠样式表单,可以通过简单的更改CSS文件,改变网页的整体表现形式, 在多个页面,可以减少我们的工作量。
2、CSS结构:
一个基本CSS节点示例:
Table { color : red ; background-color:#ff0000; }
名称 元素 冒号 属性 分号 元素 大括号
3、CSS组成:
类:前面以点号.开始,名称自定义。例:.CustomClass{}
ID: 在网页代码中控件的ID。 例:#ButtonID{}
HTML标签。 例:body, a , table, ul, td, input, div{}
4、CSS组合方法:
u 选择符(HTML标签):
一般是你要定义样式的HTML标签,
例:selector {property: value} (选择符 {属性:值})
u 选择符组(逗号分割):
你可以把相同属性和值的选择符组合起来书写,用逗号将选择符分开,这样可以减少样式重复定义:
例:h1, h2, h3, h4, h5, h6 { color: green }
u 类选择符(句点):
在自定类的名称前面加一个点号。
例:p.right {text-align: right} p.center {text-align: center}
.p_right{text-align: right}
u ID选择符(#):
在自定名称(Html控件ID)前面加一个#号。
例:#ButtonID{ color: green } #TextID{ color: green }
u 包含选择符(空格分隔)(作用域)
对嵌套在其他控件里的控件进行样式定义。
例:div table a{ color: green } 即对“层”里的“表格”里的“超链接”进行样式定义。
u 注释:/* ... */
例:/* 这个是谁定制的*/ /* 文字为黑色 */
u 各种符号嵌套使用:
例:#mainMenu ul li a{ color:#000000; } 运用了包含选择符。
5、样式表的层叠性(继承性):
不同的选择符定义相同的元素时,要考虑到不同的选择符之间的优先级。
优先级规则:最后加上的优先级最高,重复的会覆盖,不同的会继承前面定义的(优先级低的)。
一般:ID选择符>类选择符>HTML标记选择符
因为ID选择符是最后加上元素上的,所以优先级最高,其次是类选择符。如果想超越这三者之间的关系,可以用!important提升样式表的优先权,例如: p { color: #FF0000!important }
二、CSS在网页中的应用:
1、链入外部样式表文件:
你可以先建立外部样式表文件(.css),然后使用HTML的link对象。示例如下:
<head>
<link rel=stylesheet href=" CSS.css" type="text/css">
</head>
而在XML中,你应该如下例所示在声明区中加入:
<? xml-stylesheet type="text/css" href="CSS.css" ?>
2、定义内部样式块对象:
你可以在你的HTML文档的<HTML>和<BODY>标记之间插入一个<STYLE>...</STYLE>块对象。示例如下:
<head>
<style type="text/css">
<!--
body {font: 10pt "Arial"}
-->
</style>
</head>
3、内联定义:
内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。示例如下:
<p style="background-color:red; color:white">
三、CSS设计网页的经验
1、命名规范:
提倡采用匈牙利命名法。匈牙利命名法关键是:标识符的名字以一个或者多个小写字母开头作为前缀;前缀之后的是首字母大写的一个单词或多个单词组合,该单词要指明变量的用途。
2、用class_name方式写类名。
以前喜欢用class-name写,不过好像两样也没什么差别。但我比较反对用className写类名,因为始终对浏览器大小写敏感的问题抱有怀疑态度。但是id我会写成驼峰式,理由见下一条。
3、样式都用class而不用id。
有三个理由,一,id不可以重复,所以用class的话,可以肆无忌惮的用无数次。二,id的优先级太高,若是写了一个#page_content a {color:#f60} ,那你完蛋了,里面要改链接颜色,都必须加上#page_content才能越过这个优先级。三,id专门留给JS用,这样才符合表现与行为分离的原则。所以id我用驼峰式,也是为了体现这一点。
4、margin和padding,尽量省略最后一个值。
比如margin: 20px 10px 5px 10px; ,左右值是一样的,就应该省略掉最后一个值,写成margin: 20px 10px 5px; 这样到时候要改左右间距,改一个就好,免得改漏了。其实这个问题虽然很细小,但是可以看得出对margin四个值省略规则的熟练程度。
5、按标准写CSS,再针对特定浏览器作hack。
.BorderCol {
float: left;
margin-left: 20px;
}
* . BorderCol {
_display:inline; /*hacked for IE 6*/
}
6、记得加空格。
.class_name { property: value; } 。我个人觉得合理的空格是优秀代码的一个指标。按英文的习惯,标点后面都应该带空格(如果你写This is a pen.That’s a pencil.句点后面不加空格, word里面会有错误提示)。所以既然CSS是外国人发明的,应该按他们的格式来写。类似的,在JS里var a = b + c;里面的空格也应该都要加。
7、适当的层叠(Cascading)或缩进以定义CSS的“作用域”。
啥叫“CSS的作用域”?其实并不是所有的样式都在所有的地方使用。有的样式只用在某一块里面,比如“导航栏”里的“搜索框”,可能应该写成:
.nav .search {}
可以用以下三种方式将样式表加入您的网页。而最接近目标的样式定义优先权越高。高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义