CSS-style的三种⽅式（内联、嵌⼊、外部）
⼀、内联式
⼀般都写在特定的标签元素⾥⾯来实现对元素的修改。例如将    ⼈⽣应该奋⽃不⽌的字体颜⾊设置为红⾊
<p >⼈⽣应该奋⽃不⽌</p>
并且css样式代码要写在双引号中，如果有多条css样式代码设置可以写在⼀起，中间⽤分号隔开。如下代码：
<p >这⾥⽂字是红⾊。</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>
css选择器分为哪几类</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选择器只能使⽤⼀次，⽽且仅⼀次。⽽类选择器可以使⽤多次。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。