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