您的位置：首页 > Web前端 > CSS

《CSS3实战》读书笔记 第2章 层叠样式表（CSS）

2016-11-22 02:01 295 查看

## 层叠样式表

本章将阐述CSS的基本规则。

### 解构CSS

所谓CSS，由选择器（selector）和声明块（declaration block）组成。再进一步细分，每个声明包括了属性和值。

selector：{
property:value;
}

### 内联还是外链？

大多时候显然是外链更高效。样式文件可以缓存到用户电脑，如果你一个网站用一套css，当用户访问同一个网站其它页面时，就不用再次加载样式。

然而，缓存对于开发者来说是个坏东西。在本地调试时，修改样式表之后可能无法马上看到变化这时应该通过ctrl+F5来强制刷新清空缓存。

内联样式

同在在head标记内建一个style标记，样式在里面写。在H5以前的规范中，style必须加上属性
type="text/css"
,现在已经不作要求。如果head内还有javascript，需要把script标记放到样式的后面。

单个网页而言，内联样式相对较快，但是可维护性较差。

外链样式

外链样式起名随意，但是最好是相关的。全站的表单用同一套样式时，可以命名为form.css。

对于外链css还可以使用在线工具进行验证。http://jigsaw.w3.org/css-validator/

外链css必须关联。可以选择
<link>
标记也可以用
@import
来指向想要被引用的css，浏览器对此二者的解释并无区别。

link
h5的link调用格式为：

<link rel="stylesheet" href="css/styles.css">

xhtml的格式为：

<link type="texxt/css" rel="stylesheet" href="....."/>

h5省略了
type="texxt/css"


通过
@import
调用：
<style>
@import url(css/style.css)/*路径加不加引号都可以*/
</style>

@import
的不同之处：link语法属于html，而@import属于css语言，作为css语言，意味着你还可以在后面继续写其它css。这样一来，style内的css就是一个关联了其它样式的样式文件。可以认为是内联样式的一种变体。需要在网页加载之后才开始加载。最大的问题：不支持javascript控制DOM修改样式。

小结：有研究指出，在某些时候，采用
@import
方式引入的css会拖慢速度，因此建议只使用link。

两者都是外部引用CSS的方式，但是存在一定的区别：

### 第一个样式

比如说一个html5文档信息如下：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS:The Missing Manual -- Chapter 2</title>
</head>

<body>
<h1>CSS: The Missing Manual</h1>
<p>...(假文) </p>
<h2>标题2</h2>
<p>...(假文)</p>
<p>...(假文)</p>
<h2>Nisi Ut Aliquid </h2>
<p>...(假文)</p>
<p>...(假文)</p>
<address>
Copyright 2016, Dang Jingtao
</address>
</body>
</html>

行间样式

行间样式并非一无是处：比如邮件等明确要有的信息。

比如：

<h1 style="color:#666:font-size:3em;">

内联样式

<style>
/*格式化h1*/
h1{
color:#666;
font-size:3em;
margin-top:10px;
margin-left:80px;
}
/*格式化段落*/
p{
color:#616161;
line-height: 150%;
margin-top:10px;
margin-left: 80px;
}
</style>

外链css

在网页文件head元素中关联：

<link rel="stylesheet" href="styles.css">

在根目录下的styles.css文件写入CSS：

/*格式化页面*/
html{
/*上内间距25px*/
padding-top:25px;
background-image:url(images/bg_page.png);
}
body{
width: 80%;
padding:20px;
margin:0 auto;
box-shadow: 10px 10px 10px rgba(0,0,0,.5);
background-color: #e1edeb;
}

/*格式化h1*/
h1{
font-family: 'Gravitas One','Arial Black',serif;
font-weight: normal;
color:#666;
font-size:3em;
margin-top:10px;
margin-left:80px;
}
/*格式化段落*/
p{
color:#616161;
line-height: 150%;
margin-top:10px;
margin-left: 80px;
}

初步效果如下：



对于用户的系统字体不满意的话可以采用谷歌字体：

<link rel="stylesheet" href="http://fonts.googleleaps.com/css?family=Gravitas+One">

根据同样的机制，可以给文档加上更丰富的样式（字体，色彩，边距）

html {
padding-top: 25px;
background-image: url(images/bg_page.png);
}
body {
width: 80%;
padding: 20px;
box-shadow: 10px 10px 10px rgba(0,0,0,.5);
margin: 0 auto;
background-color: #E1EDEB;
}
h1 {
color: #666666;
font-size: 3em;
font-family: 'Gravitas One', 'Arial Black', serif;
font-weight: normal;
margin: 0;
}

p {
font-family: "Palatino Linotype", Baskerville, serif;
color: #616161;
line-height: 150%;
margin-top: 10px;
margin-left: 60px;
}
h2 {
color: #B1967C;
font-family: 'Gravitas One', 'Arial Black', serif;
font-weight: normal;
font-size: 2.2em;
border-bottom: 2px white solid;
background: url(images/head-icon.png) no-repeat 10px 10px;
padding: 0 0 2px 60px;
margin: 0;
}
.intro {
color: #6A94CC;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.2em;
margin-left: 0;
margin-bottom: 25px;
}

最后效果：（在线字体引用失败时可FQ试试）



### 技巧总结：

响应式居中可以直接用body百分比宽度，居中实现，可以加阴影。html文档的背景可以实现网页背景纹理，不需要body上做文章。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航