2网页的血肉：CSS
HTML 决定了网页中包含哪些内容，而CSS 则决定了这些内容呈现的样式
CSS 为层叠样式表
2.1 基本结构
CSS 语法的基本结构由两部分组成：选择器（selector），样式（style）。选择器指定了CSS作用的目标DOM元素，样式决定了在目标元素上应用何种样式，包括样式名（property）和样式值（value）。
例：
h2
{
color:blue
}
2.2使用CSS
使用css 的方法有3种：
1引入外部CSS文件
Head中加入 <link rel="stylesheet" href="out.css">
引用外部 out.css 文件
2在HTML中定义CSS
在head 和body中加入
<style>
h2
{
color: red
}
</style>
优先级比引入外部CSS文件高
3在DOM元素中使用内嵌CSS
<h2 style = "color:green">我是二号标题<h2>
优先级比 在HTML中定义CSS 优先级还要高
2.3常用选择器
元素名
h2
{
color:red
}
Id
#main
{
color:red
}
Class
Class作为选择器，适用于同时控制多个元素的样式，只需将它们设为同一个class即可，
.context
{
color:gray
}
如果某个元素符合多个选择器，则会对CSS样式进行合并覆盖操作，不同的属性名进行合并，其对应的属性值叠加作用于元素之上，相同的属性名进行覆盖，仅应用优先级最高的选择器对应的属性值。标签名，class ，id 选择器优先级依次提高，并且它们组合之后的选择器优先级更高。总而言之，选择器越具体越细化，条件越严格，对应的优先级越高。
标签名，id，class 可以组合使用，例如：h1#main表示id为main的h1标签，p.content表示class为content的p标签。
后代选择器
例 h1 span为后代选择器，表示h1标签中的span标签，样式作用于所有符号要求的span （h1 里面的所有span）所以孙子span 和儿子span 均变为绿色
<style>
h1span
{
color:green
}
</style>
<body>
<h1 class ="context">
<p>
<span>孙子span</span>
</p>
<span>儿子span</span>
</h1>
子元素选择器
例 h1>span为子元素选择器，表示h1标签直接子元素中的span标签，h1必须是span的直接父元素，所以此处只有儿子span变成绿色
<style>
h1>span
{
color:green
}
</style>
<body>
<h1 class ="context">
<p>
<span>孙子span</span>
</p>
<span>儿子span</span>
</h1>
相邻兄弟选择器
.test+h1为相邻兄弟选择器，表示和h1标签处于同一层级并且直接相邻的类为test标签，样式作用于所有符合要求的h1，至多一前一后共两个。此处老二字体变绿
<style>
.test+h1
{
color:green
}
</style>
<body>
<h1class="test">老大</h1>
<h1>老二</h1>
<h1>老三</h1>
<span>儿子span</span>
普通相同兄弟选择器
.test~h1 为普通相同兄弟选择器，表明和.test类 对应的h1标签处于同一层级的全部h1标签，两者处于同一级别即可，限制不及相邻兄弟选择器严格，此处除 test类对应的h1标签字体未变绿外，其他同级的h1标签字体全变绿了
<style>
.test~h1
{
color:green
}
</style>
<body>
<h1class="test">老大</h1>
<h1>老二</h1>
<h1>老三</h1>
<span>儿子span</span>
伪类选择器
例：”:hover” 表示鼠标悬浮时才生效的样式，此处鼠标停留在 老大 ，老二 ，老三字体上字体就会变绿，离开字体恢复正常。
<style>
h1:hover
{
color:green
}
</style>
<body>
<h1>老二</h1>
<h1class="test">老大</h1>
<h1>老二</h1>
<h1>老三</h1>
<span>儿子span</span>
扫一扫
808
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
