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

CSS基础1——CSS样式表及样式规则

2014-10-08 22:00 183 查看

1、CSS(Cascading Style Sheets)层叠样式表。用于定义HTMl元素的显示形式，是W3C推出的格式化网页内容的标准技术

2、CSS作为每个网站设计者必须掌握的技术之一，有几个优点：

(1)提高页面浏览速度，比传统文本设计方法至少节约50%以上的文件尺寸

(2)缩短改版时间，降低维护费用

(3)结合CSS和DIV，更好的控制页面布局

(4)实现表现和结构、内容相分离

(5)更方便搜索引擎的搜索

3、CSS样式表

(1) 嵌入式样式表

用<style>元素将样式包含在网页内部的样式设置，<style>段必须出现在文档的<head>段内，可以有多个<style>段

如：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
<style type="text/css">
div{
width: 100px;
color: red;
background: #eee;
font-weight: bold;
}
</style>
</head>
<body>
<div>嵌入式样式</div>
</body>
</html>

(2)外部样式表

在外部创建.CSS文件，编写CSS代码，然后在.html文件中链接使用。

语法：<link rel="stylesheet" type="text/css" href="样式表中的URL"/>

(3)内联样式表

仅用于部分网页元素，其作用范围仅限于应用它的网页元素，内联样式在HTML标记中

如：<div style="color:red; font-weight:bold;"> 内联样式</div>

4、样式规则

(1)选择器：指定样式规则可作用于HTML文档中哪个元素或者那些元素，在样式规则中左大括号左边的就是选择器。

如： h1{ color:orange; background-color: #eea; }中的h1

(2)声明块：大括号之间的部分

如： h1{ color:orange; background- color: #eea;} 中的 color:orange; background- color: #eea; 部分

(3)声明：每个声明都要以分号(;)结束。

如：h1{color:red; } 中的 color:red; 部分就是一个声明

在一个声明块内，可以有多个声明，每个声明必须以分号隔开

(4)属性

如： h1{ color:red; } 中的color就是一个属性，每个声明只能有一个属性。

(5)注释

CSS的注释为：/* 注释内容 */

快捷键为：ctrl + "/"

5、样式表优先级：内联样式 > 嵌入式样式 > 外部样式 > 浏览器自定义样式

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航