CSS基础(一):开篇

背景

HTML是一种超文本标记语言,用来定义文档的结构和内容,例如标题、段落和列表等等,而文档内容如何渲染、如何展示,这就需要样式来修饰了。 CSS正是可以与HTML很好地结合。如果将HTML比作水,那么CSS就是水杯,用怎样形状的水杯来装水,水就显示不一样的形状。

什么是CSS?

CSS 指层叠样式表 (Cascading Style Sheets),定义如何显示 HTML 元素,是为了解决文档内容与表现分离的问题,通常是统一存储在样式表中,使用外部样式表可以方便管理,提高工作的效率,具有继承性和层叠性的特点。

CSS继承性

它是依赖于祖先-后代的关系的。继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代。但是,并不是所有的属性都会自动传给它的后代,例如边框Border,边距Margin,补白Padding等等。

例如定义了body的样式

<!DOCTYPE HTML>
<html>
<head>
<title>开篇一 | CSS继承</title>
</head>
<style type="text/css">
body {
    height: 100px;
    color: red;
    border: 1px solid #CCC;
}
</style>
<body>
<p> 字体颜色显示为红色,但是没有边框 </p>
</body>
</html>

可以得到的效果是body有1px的灰色实线边框,p标签里面的字体为红色,但是没有边框,所以border属性没有被继承。

CSS层叠性

CSS样式在针对同一元素配置同一属性时,依据层叠规则(权重)来处理冲突,选择应用权重高的CSS选择器所指定的属性,一般也被描述为权重高的覆盖权重低的,因此也称作层叠。

例如定义了样式

<!DOCTYPE HTML>
<html>
<head>
<title>开篇一 | CSS层叠</title>
</head>
<style type="text/css">
body {
    height: 100px;
    border: 1px solid #CCC;
}
.main {
    color: red;
    font-size: 18px;
}
.main p {
    color: #000;
    font-weight: bold;
}
</style>
<body>
<div class="main">
  <p> 字体颜色显示为黑色,字号为加粗18px </p>
</div>
</body>
</html>

可以得到的效果是p标签里面的字体为黑色,字号为加粗18px,.main选择器中的color属性被.main p中的color属性覆盖。

实际上由CSS的继承性和层叠性,是可以得到p标签组合的css样式为

p{color:#000; font-size: 18px; font-weight: bold;}

更多关于权重高低请参考

CSS代码规范

1.使用Reset但并非全局Reset

全局Reset不仅仅因为它是缓慢和低效率的方法,而且还会导致一些不必要的元素也重置了外边距和内边距。

*{ margin:0; padding:0; }

2.良好的命名规范

ID和class的命名尽可能短,并符合语义。多个单词的拼接用 '-' 符号链接,尽量使用小写字母。

3.代码缩写

CSS代码缩写可以提高你写代码的速度,精简你的代码量。

li{
    font-family:Arial, Helvetica, sans-serif;
    font-size: 1.2em;
    line-height: 1.4em;
    padding-top:5px;
    padding-bottom:10px;
    padding-left:5px;
}

可以缩写成

li{
    font: 1.2em/1.4em Arial, Helvetica, sans-serif;
    padding:5px 0 10px 5px;
}

4.利用CSS继承

如果页面中父元素的多个子元素使用相同的样式,那最好把他们相同的样式定义在其父元素上,让它们继承这些CSS样式。这样你可以很好的维护你的代码,并且还可以减少代码量。

那么本来这样的代码:

#container li{ font-family:Georgia, serif; }
#container p{ font-family:Georgia, serif; }
#container h1{font-family:Georgia, serif; }

就可以简写成:

#container{ font-family:Georgia, serif; }

5.使用多重选择器

你可以合并多个CSS选择器为一个,如果他们有共同的样式的话。这样做不但代码简洁且可为你节省时间和空间。

如:

h1{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h2{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

可以合并为

h1, h2, h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

6.适当的代码注释

代码注释可以让别人更容易读懂你的代码,且合理的组织代码注释,可使得结构更加清晰。

7.给你的CSS代码排序

如果代码中的属性都能按照字母排序,那查找修改的时候就能更加快速。

/*** 样式属性按字母排序 ***/
div{
    background-color:#3399cc;
    color:#666;
    font:1.2em/1.4em Arial, Helvetica, sans-serif;
    height:300px;
    margin:10px 5px;
    padding:5px 0 10px 5px;
    width:30%;
    z-index:10;
}

8.保持CSS的可读性

书写可读的CSS将会使得更容易查找和修改样式。

/*** 每个样式属性写一行 ***/
div{
    background-color:#3399cc;
    color:#666;
    font: 1.2em/1.4em Arial, Helvetica, sans-serif;
    height:300px;
    margin:10px 5px;
    padding:5px 0 10px 5px;
    width:30%;
    z-index:10;
}
 
/*** 所有的样式属性写在同一行 ***/
div{background-color:#3399cc; color:#666; font: 1.2em/1.4em Arial, Helvetica, sans-serif; height:300px; margin:10px 5px; padding:5px 0 10px 5px; width:30%; z-index:10;}

9.选择更优的样式属性值

CSS中有些属性采用不同的属性值,虽然达到的效果差不多,当性能上却存在着差异,如:

区别在于 border:0 把 border 设为 0px,虽然在页面上看不见,但按border默认值理解,浏览器依然对 border-width/border-color 进行了渲染,即已经占用了内存值。

而 border:none 把 border 设为“none”即没有,浏览器解析“none”时将不作出渲染动作,即不会消耗内存值。所以建议使用 border:none;

同样的,display:none 隐藏对象浏览器不作渲染,不占用内存。而 visibility:hidden 则会。

10.<link>代替@import

@import不属于XHTML标签,也不是Web标准的一部分,它对于较早期的浏览器兼容也不高,并且对于网站的性能有某些负面的影响。所以,请避免使用@import

11.使用外部样式表使用

这个原则始终是一个很好的设计实践。不单可以更易于维护修改,更重要的是使用外部文件可以提高页 面速度,因为CSS文件都能在浏览器中产生缓存。内置在HTML文档中的CSS则会在每次请求中随HTML文档重新下载。所以,在实际应用中,没有必要把 CSS代码内置在HTML文档中。

12.代码压缩

当你决定把网站项目部署到网络上,那你就要考虑对CSS进行压缩,除去注释和空格,以使得网页加载得更快。压缩您的代码,可以采用一些工具,如YUI Compressor 利用它可精简CSS代码,减少文件大小,以获得更高的加载速度。

13.避免使用css hack

14.代码格式

(1)每个css属性声明后都要使用一个分号,即使是最后的那个。

(2)在紧跟属性名的冒号后使用一个空格。

(3)每一个css选择器或是属性声明都要新起一行。

(4)在每一个css规则之间应该空一行。

15.如果css属性的值为0,则后面不要带上单位。除非真的是需要。

规范参考

CSS3.0新特性

目前CSS已经发展到3.0的版本,但是3.0的属性大多不支持低版本的浏览器。

新特性如CSS圆角边框、阴影、动画等,后面将会另有系列课程专门学习介绍。

原文链接:HelloWeb前端网 » CSS基础(一):开篇 » 感谢您的浏览,希望能有所帮助。

欢迎您加入“Helloweb” 学习交流群:HelloWeb-学习交流群 196291215 共同交流并结识同行,在这里说出您的收获与感想或有什么不同的观点,我们期待您的留言,分享,让我们一起进步!

喜欢 ()or分享