CSS-层叠样式表基础教程

　　这个段落会被显示为黄底红字粗体。

　　</p>

　　</body>

　　</html>

　　1.网页设计中常用的CSS属性

　　文字或元素的颜色：color

　　字体：font-family

　　文字大小：font-size

　　段落首行缩进：text-indent（如「p {text-indent: 5em;}」）

　　文本对齐方式：text-align（如「text-align:center」）

　　背景颜色：background-color

　　背景图像：background-image

　　列表样式：list

　　鼠标样式：cursor

　　边框样式：border

　　内补白：padding

　　外边距：margin

　　2.缩写规则

　　①颜色缩写：16进制的色彩值，如果每两位的值相同，可以进行缩写，例如：

　　000000可以缩写为#000，#336699可以缩写为#369;

　　②边框缩写

　　边框的属性如下：

　　border-width: 1px;

　　border-style: solid;

　　border-color: #000;

　　可以缩写为一句：border: 1px solid #000;

　　③背景缩写

　　background-color: #F00;

　　background-image: url(background.gif);

　　background-repeat: no-repeat;

　　background-attachment: fixed;

　　background-position: 0 0;

　　可以缩写为一句：background: #F00 url(background.gif) no-repeat fixed 0 0;

　　④合并相同属性的元素

　　所有的标题元素都是绿色的，可以这样缩写：

　　h1,h2,h3,h4,h5,h6 {

　　color: green;

　　}

　　三、使用<head>植入样式表

　　还可以使用<style>...</style>标记在HTML文档中定义嵌入式样式表，该标记必须放在<head>与</head>标记之间。

　　<html>

　　<head>

　　h1 {color:red}

　　p {color:blue}

　　</style>

　　</head>

　　<body>

　　<h1>Header-1</h1>

　　<p>This is a paragraph.</p>

　　</body>

　　</html>

　　四、使用 <link> 标签链接调用外部样式表

　　HTML和CSS将网页文件的结构、内容与显示样式分隔开来，这里正是样式表功能发挥优势的地方。

　　<head>

　　</head>

　　p+CSS

　　p+css是一种常见的网页布局方法。p是用来排版的，而css是用来定义p的样式。p+css通常采用外链的方式来调用层叠样式表文件（style.css），用id和class来标识区分网页中不同结构的特征。

　　随着HTML5的到来，无处不在的<p id="header">和<p id="footer">传统代码方法，将变成标签<Header>和<footer>。

【CSS-层叠样式表基础教程】相关文章：

上一篇：CSS技术在WEB设计中的应用下一篇：没有了

CSS-层叠样式表基础教程(2)