一、内联式
一般都写在特定的标签元素里面来实现对元素的修改。例如将 人生应该奋斗不止的字体颜色设置为红色
<p style="color: red;">人生应该奋斗不止</p>
并且css样式代码要写在style=""双引号中,如果有多条css样式代码设置可以写在一起,中间用分号隔开。如下代码:
<p style="color:red;font-size:12px">这里文字是红色。</p>
二、嵌入式
嵌入式css样式必须写在<style></style>之间,并且一般情况下嵌入式css样式写在<head></head>之间。如下面的代码将文字设置为粉色:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<meta http-equiv="content-type"content="text/html; charset=UTF-8" />
<title>这是演示实例</title>
<style type="text/css">
p{
color:pink;
}
</style>
</head>
<body>
<p >人生应该奋斗不止</p>
</body>
</htmL>
三、外部式
外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在<head>内(不是在<style>标签内)使用<link>标签将css样式文件链接到HTML文件内,如下面代码:
<link href="base.css" rel="stylesheet" type="text/css" />
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌入式css样式</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<!---
href后面跟的是css的文件 rel="stylesheet" type="text/css"为固定格式
--->
</head>
<body>
<pre>吉日兮辰良,穆将愉兮上皇。
<span>抚长剑兮玉珥,璆锵鸣兮琳琅。</span>
瑶席兮玉瑱, 盍将把兮琼芳。
<span>蕙肴蒸兮兰藉, 奠桂酒兮椒浆。 </span>
扬枹兮拊鼓, 疏缓节兮安歌,陈竽瑟兮浩倡。
<span>灵偃蹇兮姣服,芳菲菲兮满堂。 </span>
五音纷兮繁会, 君欣欣兮乐康。 !</pre>
</body>
</html>
四、选择器(标签选择器,类选择器,ID选择器,全部选择器,子选择器)
定义:每一条css样式声明(定义)由两部分组成,形式如下:
选择器{
样式;
}
在{}之前的部分就是“选择器”,“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素。比如右侧代码中的“body”就是选择器。
1标签选择器(就是直接对标签进行修改) ----权值为1
标签选择器其实就是html代码中的标签。如代码中的<html>、<body>、<h1>、<p>、<img>。
<style type="css/text">
p{
color:red;
}
</style>
2类选择器(.+类选择器的名字+修改)-------权值为10
<head>
<style type="css/text">
.color
{
color:red;
}
</style >
<head>
<body>
<p class="color">人生应该奋斗不止</P>
</body>
3ID选择器(#+ID选择器的名字+修改)------权值为100
在很多方面,ID选择器都类似于类选择符,但也有一些重要的区别:
1、为标签设置id="ID名称",而不是class="类名称"。
2、ID选择符的前面是井号(#)号,而不是英文圆点(.)。
<head>
<style type="css/text">
#color
{
color:red;
}
</style>
</head>
<body>
<p id="color">人生应该奋斗不止</p>
</body>
4全部选择器(*+修饰)//对于全部的标签元素进行修改
<head>
<style type="css/text">
*{color:red;
}
</style >
</head>
<body>
<p>人生应该奋斗不止</p>
5子选择器(父类名字+>+子类名字 或父类名字+空格+子类名字)
<style type="text/css">
.first span{color:red;}
.food>li{
border:1px solid red;/*添加边框样式(粗细为1px, 颜色为红色的实线)*/
}
</style>
6伪选择符(对于标签的状态的某种修饰,比如鼠标滑过标签)
a:hover{color:red;}
ID选择器与类选择器的比较
相同点:可以应用于任何元素不同点:1、ID选择器只能在文档中使用一次。与类选择器不同,在一个HTML文档中,ID选择器只能使用一次,而且仅一次。而类选择器可以使用多次。