CSS基础
CSS基础
一)简介
·CSS 指层叠样式表 (Cascading Style Sheets)
·样式定义如何显示 HTML 元素
·样式通常存储在样式表中
·把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
·外部样式表可以极大提高工作效率
·外部样式表通常存储在 CSS 文件中
·多个样式定义可层叠为一
二)语法
1)基本语法:选择器 { 属性: 值 }
body {color: blue}
p {font-family: "sans serif", arial, serif;}
p {text-align:center; color:red; padding: 1px 2px 3px 4px;}
p {font-family: "sans serif", arial, serif;}
p {text-align:center; color:red; padding: 1px 2px 3px 4px;}
2)选择器分组
h1,h2,h2,h3,h5,h6 {color: green;}
3)派生选择器
li a {color: blue;}
4)id 选择器
#id{color: red;}
#id a{color: blue;}
#id a{color: blue;}
<p id="id">color is red.<a>color is blue.</a></p>
5)类选择器
.class{color: red;}
.class a{color: blue;}
<p class="class">color is red.<a>color is blue.</a></p>
a.class {color: blue;}
p.class {color: red;}
<a class="normal">normal a</a><br />
<a class="class">blue a</a>
<p class="class">red p</p>
.class a{color: blue;}
<p class="class">color is red.<a>color is blue.</a></p>
a.class {color: blue;}
p.class {color: red;}
<a class="normal">normal a</a><br />
<a class="class">blue a</a>
<p class="class">red p</p>
三)使用样式表
1)内部样式
<html>
<head>
<style type="text/css">
a.class {color: blue;}
p.class {color: red;}
</style>
</head>
<body>
<a class="normal">normal a</a><br />
<a class="class">blue a</a>
<p class="class">red p</p>
</body>
</html>
2)内联样式
<html>
<head>
</head>
<body>
<p style="color: red;">color p</p>
</body>
</html>
3)外部样式
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
<body>
<p style="color: red;">color p</p>
</body>
</html>
mystyle.css
p{color: red;}
<html>
<head>
<style type="text/css">
a.class {color: blue;}
p.class {color: red;}
</style>
</head>
<body>
<a class="normal">normal a</a><br />
<a class="class">blue a</a>
<p class="class">red p</p>
</body>
</html>
2)内联样式
<html>
<head>
</head>
<body>
<p style="color: red;">color p</p>
</body>
</html>
3)外部样式
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
<body>
<p style="color: red;">color p</p>
</body>
</html>
mystyle.css
p{color: red;}
当同一个 HTML 元素被不止一个样式定义时,样式的优先级由低到高排列如下:
1:浏览器缺省设置
2:外部样式表
3:内部样式表(位于 <head> 标签内部)
4:内联样式(在 HTML 元素内部)