CSS(Cascading Style Sheet,层叠样式表)是指定HTML文档视觉表现的标准,它允许设计师精确地指定文档元素的字体、颜色、外边距、缩进、边框、定位等。
h1 {
color: red;
}h1就是选择器,选择器的作用是找出某类元素,以便我们使用style元素或者外部样式表对这类元素设置样式;<head> <meta charset="UTF-8" /> <title>El Palau de la Música</title> <link rel="stylesheet" href="style.css" /> </head>可以让网站上的每个页面都加载同一个外部样式表,从而达到页面风格的统一,因此推荐使用外部样式表。
<head>
<meta charset="UTF-8" />
<title>El Palau de la Música</title>
<style>
img {
border: 4px solid red;
}
</style>
</head>注意只有当style元素出现在link元素后面的时候,嵌入样式表中的样式才会覆盖外部样式表中的样式。<img src="img/palau.jpg" width="250" height="163" alt="El Palau de la Música" style="border: 4px solid red" /> <img src="img/tickets.jpg" width="87" height="163" alt="The Ticket Window" />注意需要使用冒号为属性赋值,多个属性使用分号分隔。内联样式的优先级高于其它所有样式,除非其他地方标注了!important。
<head> <meta charset="UTF-8" /> <title>El Palau de la Música</title> <link rel="stylesheet" href="style.css" media="screen" /> <link rel="stylesheet" href="print.css" media="print" /> </head>另一种方式是在样式表中使用@media规则:
/* 针对所有媒体的样式 */
img {
border: 4px solid red;
}
p {
color: orange;
font-style: italic;
}
/* 打印样式表 */
@media print {
body {
/* 加大字号 */
font-size: 25pt;
}
p {
/* 黑色的十六进制值 */
color: #000;
}
img {
/* 不显示图像 */
display: none;
}
}@media print {}中的样式将专门用于打印的样式。原文:http://blog.csdn.net/tomato__/article/details/50731586