层叠样式表
本章将阐述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上做文章。