一、选择器：
css 由两部分组成：标签和声明
css 中有三种最基本的选择器：
1.标签选择器：2.类选择器：3.ID选择器
1.标签选择器：HTML中标签的名称都可以作为相对应得标签选择 器的名称。
例：
<head>
<title>标题</title>
<style type="text/css">
//h1 是标签、也是选择器。font-size：属性。100x是值。
h1{font-size:100px}
p{font-size:100px}
h2{font-size:10px}
</style>
</head>
<body>
<h1>这是h1标题</h1>
<p>这是段落</p>
<h2>这是h2的标签</h2>
</body>
2.类选择器：《如果class的 名称 一样可以直接（.名称）》
例：
<head>
<title>标题</title>
<style type="text/css">
// .size 是类名。font-size:100px;是声明。后面的color是改字体的颜色。
.size1{background-color:blue;color:yellow;}
.size2{font-size:100px;color:blue;}
</style>
</head>
<body>
<p class="size1">这是第一个段落</p>
<p class="size2">这是第二个段落</p>
</body>
3.ID选择器：《如果id的 名称 一样可以直接（#名称）》
例：
<head>
<title>标题</title>
<style type="text/css">
// #first 是类名。font-size:20px;是声明。后面的color是改字体的颜色。
#first{font-size:20px;color:#ffff00;}
#second{font-size:10px;color:#3300cc;}
</style>
</head>
<body>
<p id="first">这是第一个段落</p>
<p id="second">这是第二个段落</p>
</body>
二、在HTML中引入css样式：
1.《行内样式》在每个html标签上面都有一个属性 style，把css和html结合在一起
-- <p style="background-color:red;color:green;">内容</p>
2.《内部样式》使用html的一个标签实现 <style> 标签，写在head里面
例：
<head>
<style type="text/css">
p{
background-color:blue; //这句改变了div里面内容的背景颜色
color:red; //这句改变了div里面内容字体的颜色 }
</style>
</head>
<body>
<p>内容</p>
</body>
3.《外部样式 1》在 stjyle 标签里面使用： @import url(css文件的路径)；
--第一步：创建一个css文件
例：《假如 css文件名为：div.css 代码如下：》
<head>
<style type="text/css">
div{
<!--
@import url(div.css); //这里改变div里面内容字体和背景颜色 -->//加个注释照样可以运行 写在css文件中
}
</style>
</head>
<body>
<div>内容<div>
</body>
4.《外部样式 2》使用头标签 link，引入外部css文件
-- 第一步，创建一个长沙市文件
-- <link rel="stylesheet" type="text/css" href="css文件的路径">
例：《假如 css文件名为：div.css 代码如下：》
<head>
<link rel="stylesheet" type="text/css" href="div.css"/>
//这里改变div里面内容字体和背景颜色的代码写在css文件中
</head>
<body>
<div>内容<div>
</body>
**** 第三种有缺点（在某些浏览器下不起作用），一般使用第四种。
三、样式优先级：
1.行内样式 > 内部样式 > 外部样式：即（就近原则）后些的样式优先于先写的样式。
2. style > ID选择器 > 类选择器 > 标签选择器。
四、复合选择器 或 扩展选择器：
1.后代选择器 或 关联选择器：
例 1：《按标签关系嵌套》语法：外层标签 空格 内层标签{ }
<head>
<style type="text/css">
div p{
background-color:green;
}
</style>
</head>
<body>
<div><p>后代选择器 或 关联选择器</p></div>
</body>
例 2：《选择器嵌套》《当最外层为类选择器，内层为标签选择器、ID选择器、类选择器》
《类选择器》语法： .外层选择器名称 .内层选择器名称{ }
《ID选择器》语法： .外层选择器名称 #内层选择器名称{ }
《标签选择器》语法： .外层选择器名称 内层选择器名称{ }
2.1《类选择器 与 ID选择器 嵌套》
<head>
<title>CSS</title>
<style type="text/css" >
.name #second{font-size:60px;color:red;}
</style>
</head>
<body>
<p class="name">这是第一个段落<h1 id="second">这是第二</h1>个段落</p>
</body>
2.2《类选择器 与 类选择器 嵌套》
<head>
<title>CSS</title>
<style type="text/css" >
.name .second{font-size:60px;color:red;}
</style>
</head>
<body>
<p class="name">这是第一个段落<h1 class="second">这是第二</h1>个段落</p>
</body>
2.3《类选择器 与 标签选择器 嵌套》
<head>
<title>CSS</title>
<style type="text/css" >
.name h1{font-size:60px;color:red;}
</style>
</head>
<body>
<p class="name">这是第一个段落<h1>这是第二</h1>个段落</p>
</body>
例 3：《当最外层为 ID选择器《内层为 标签选择器、ID选择器、类选择器》》
《类选择器》语法： #外层选择器名称 .内层选择器名称{ }
《ID选择器》语法： #外层选择器名称 #内层选择器名称{ }
《标签选择器》语法： #外层选择器名称 内层选择器名称{ }
3.1《ID选择器 与 ID选择器 嵌套》
<head>
<title>CSS</title>
<style type="text/css" >
#name #second{font-size:60px;color:red;}
</style>
</head>
<body>
<p id="name">这是第一个段落<h1 id="second">这是第二</h1>个段落</p>
</body>
3.2《ID选择器 与 类选择器 嵌套》
<head>
<title>CSS</title>
<style type="text/css" >
#name .second{font-size:60px;color:red;}
</style>
</head>
<body>
<p id="name">这是第一个段落<h1 class="second">这是第二</h1>个段落</p>
</body>
3.3《ID选择器 与 标签选择器 嵌套》
<head>
<title>CSS</title>
<style type="text/css" >
#name h1{font-size:60px;color:red;}
</style>
</head>
<body>
<p id="name">这是第一个段落<h1>这是第二</h1>个段落</p>
</body>
2.组合选择器：
-- <div>组合选择器</div>
<p>aaaaaaaaaaaa</p>
* 把div和p标签设置成相同的样式，把不同的标签设置成相同的样式
例：
<style type="text/css">
div,p{
background-color:green;
}
</style>
css 由两部分组成：标签和声明
css 中有三种最基本的选择器：
1.标签选择器：2.类选择器：3.ID选择器
1.标签选择器：HTML中标签的名称都可以作为相对应得标签选择 器的名称。
例：
<head>
<title>标题</title>
<style type="text/css">
//h1 是标签、也是选择器。font-size：属性。100x是值。
h1{font-size:100px}
p{font-size:100px}
h2{font-size:10px}
</style>
</head>
<body>
<h1>这是h1标题</h1>
<p>这是段落</p>
<h2>这是h2的标签</h2>
</body>
2.类选择器：《如果class的 名称 一样可以直接（.名称）》
例：
<head>
<title>标题</title>
<style type="text/css">
// .size 是类名。font-size:100px;是声明。后面的color是改字体的颜色。
.size1{background-color:blue;color:yellow;}
.size2{font-size:100px;color:blue;}
</style>
</head>
<body>
<p class="size1">这是第一个段落</p>
<p class="size2">这是第二个段落</p>
</body>
3.ID选择器：《如果id的 名称 一样可以直接（#名称）》
例：
<head>
<title>标题</title>
<style type="text/css">
// #first 是类名。font-size:20px;是声明。后面的color是改字体的颜色。
#first{font-size:20px;color:#ffff00;}
#second{font-size:10px;color:#3300cc;}
</style>
</head>
<body>
<p id="first">这是第一个段落</p>
<p id="second">这是第二个段落</p>
</body>
二、在HTML中引入css样式：
1.《行内样式》在每个html标签上面都有一个属性 style，把css和html结合在一起
-- <p style="background-color:red;color:green;">内容</p>
2.《内部样式》使用html的一个标签实现 <style> 标签，写在head里面
例：
<head>
<style type="text/css">
p{
background-color:blue; //这句改变了div里面内容的背景颜色
color:red; //这句改变了div里面内容字体的颜色 }
</style>
</head>
<body>
<p>内容</p>
</body>
3.《外部样式 1》在 stjyle 标签里面使用： @import url(css文件的路径)；
--第一步：创建一个css文件
例：《假如 css文件名为：div.css 代码如下：》
<head>
<style type="text/css">
div{
<!--
@import url(div.css); //这里改变div里面内容字体和背景颜色 -->//加个注释照样可以运行 写在css文件中
}
</style>
</head>
<body>
<div>内容<div>
</body>
4.《外部样式 2》使用头标签 link，引入外部css文件
-- 第一步，创建一个长沙市文件
-- <link rel="stylesheet" type="text/css" href="css文件的路径">
例：《假如 css文件名为：div.css 代码如下：》
<head>
<link rel="stylesheet" type="text/css" href="div.css"/>
//这里改变div里面内容字体和背景颜色的代码写在css文件中
</head>
<body>
<div>内容<div>
</body>
**** 第三种有缺点（在某些浏览器下不起作用），一般使用第四种。
三、样式优先级：
1.行内样式 > 内部样式 > 外部样式：即（就近原则）后些的样式优先于先写的样式。
2. style > ID选择器 > 类选择器 > 标签选择器。
四、复合选择器 或 扩展选择器：
1.后代选择器 或 关联选择器：
例 1：《按标签关系嵌套》语法：外层标签 空格 内层标签{ }
<head>
<style type="text/css">
div p{
background-color:green;
}
</style>
</head>
<body>
<div><p>后代选择器 或 关联选择器</p></div>
</body>
例 2：《选择器嵌套》《当最外层为类选择器，内层为标签选择器、ID选择器、类选择器》
《类选择器》语法： .外层选择器名称 .内层选择器名称{ }
《ID选择器》语法： .外层选择器名称 #内层选择器名称{ }
《标签选择器》语法： .外层选择器名称 内层选择器名称{ }
2.1《类选择器 与 ID选择器 嵌套》
<head>
<title>CSS</title>
<style type="text/css" >
.name #second{font-size:60px;color:red;}
</style>
</head>
<body>
<p class="name">这是第一个段落<h1 id="second">这是第二</h1>个段落</p>
</body>
2.2《类选择器 与 类选择器 嵌套》
<head>
<title>CSS</title>
<style type="text/css" >
.name .second{font-size:60px;color:red;}
</style>
</head>
<body>
<p class="name">这是第一个段落<h1 class="second">这是第二</h1>个段落</p>
</body>
2.3《类选择器 与 标签选择器 嵌套》
<head>
<title>CSS</title>
<style type="text/css" >
.name h1{font-size:60px;color:red;}
</style>
</head>
<body>
<p class="name">这是第一个段落<h1>这是第二</h1>个段落</p>
</body>
例 3：《当最外层为 ID选择器《内层为 标签选择器、ID选择器、类选择器》》
《类选择器》语法： #外层选择器名称 .内层选择器名称{ }
《ID选择器》语法： #外层选择器名称 #内层选择器名称{ }
《标签选择器》语法： #外层选择器名称 内层选择器名称{ }
3.1《ID选择器 与 ID选择器 嵌套》
<head>
<title>CSS</title>
<style type="text/css" >
#name #second{font-size:60px;color:red;}
</style>
</head>
<body>
<p id="name">这是第一个段落<h1 id="second">这是第二</h1>个段落</p>
</body>
3.2《ID选择器 与 类选择器 嵌套》
<head>
<title>CSS</title>
<style type="text/css" >
#name .second{font-size:60px;color:red;}
</style>
</head>
<body>
<p id="name">这是第一个段落<h1 class="second">这是第二</h1>个段落</p>
</body>
3.3《ID选择器 与 标签选择器 嵌套》
<head>
<title>CSS</title>
<style type="text/css" >
#name h1{font-size:60px;color:red;}
</style>
</head>
<body>
<p id="name">这是第一个段落<h1>这是第二</h1>个段落</p>
</body>
2.组合选择器：
-- <div>组合选择器</div>
<p>aaaaaaaaaaaa</p>
* 把div和p标签设置成相同的样式，把不同的标签设置成相同的样式
例：
<style type="text/css">
div,p{
background-color:green;
}
</style>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
