简介
Cascading Style
Sheets(级联样式表),是一种用来表现HTML或XML等文件央视的计算机语言。
选择器
id 选择器
id 选择器可以为标有特定id的HTML 元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS 中 id 选择器以“#”
来定义。以下的样式规则应用于元素属性 id="para1"
#para1 { text-align:center; color:red; }
class 选择器
class 选择器用户描述一组元素的样式,class 选择器可以在多个元素中使用。class
选择器在HTML中以class属性表示,在CSS中,类选择器以一个点“.”号表示:
所有拥有center类的HTML元素均居中: .center {text-align:center;}
所有拥有center类的P元素均居中: p.center
{text-align:center;}
引入方式
行内式:即在表示的style属性中设定CSS样式。这种方式本质上没有体现出CSS得优势,不推荐。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Text Demo</title> </head> <body> <h1 style=color:white;background-color=blue;> This is a line of Text. </h1> </body> </html>
内嵌式:将对页面中各元素的设置几种写在<head>和</head>之间。对单一网页,还比较方便
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Text Demo</title> <style type="text/css"> h1{ color:white; background-color:boue; } </style> </head> <body> <h1>This is a line of Text.</h1> <h1>This is another line of Text.</h1> </body> </html>
导入式:将一个独立的css文件导入HTML文件中
<style type="text/css">
@import"mystyle.css";
</style>
链接式:将一个独立的css文件导入HTML文件中
<link href="mystyle.css" rel="stylesheet" type="text/css"
/>