一.CSS样式表和选择器
1.插入样式表的方法
- 外部样式
- 内部样式
- 内联样式
外部样式表
通过使用<link>标签调用外部样式表,一般加在HTML文档头部(head).
<link rel="stylesheet" href="test.css">
通过<link>标签关联外部样式表(test.css)
内部样式表
使用<style>标签在HTML文档内部定义内部样式表。
<style>
he {color: blue;}
hr {background-color: black;}
</style>
内联样式
又称“行内样式”,即在相关标签内使用style属性来定义样式
<p style="color:blue"></p>
style属性仅在P标签内应用
优先级
一般情况下:内联样式>内部样式>外部样式>浏览器默认样式
自定义样式>浏览器默认样式>继承样式
2.CSS常用选择器
标签选择器
h1 {
color: black;
background: red;
}
属性选择器
一般属性使用方法:
h2[title='name'] {
color: aquamarine;
}
class属性使用方法(使用符号.):
h2.name2 {
color: aquamarine;
}
id属性使用方法(使用符号#):
h2#name1 {
color: aquamarine;
}
群组选择器
h2#name1,h2.name2 {
color: aquamarine;
}
通配选择器(全选所有父级下面子级的所有标签 例如: body)
body * {
background-color: aqua;
}
3.上下文选择器
子元素选择器(使用符号>)
<ul class="list">
<li class="item">itme1</li>
<li class="item">itme2</li>
<li class="item">itme3</li>
</ul>
使用方法如下:
.list>.item {
background-color: aqua;
}
后代元素选择器(使用空格符号)
<ul class="list">
<li class="item">itme1</li>
<li class="item">itme2</li>
<ul>
<li class="item">itme2-1</li>
<li class="item">itme2-2</li>
</ul>
<li class="item">itme3</li>
使用方法如下(所有元素生效):
.list .itme {
background-color: aqua;
}
相邻兄弟选择器
<ul class="list">
<li class="item">itme1</li>
<li class="item two">itme2</li>
<li class="item">itme3</li>
</ul>
使用方法如下(使用+符号,并带上通配*符号):
.list>.item.two + * {
background-color: aqua;
}
所有兄弟选择器
<ul class="list">
<li class="item">itme1</li>
<li class="item two">itme2</li>
<li class="item">itme3</li>
<li class="item">itme4</li>
<li class="item">itme5</li>
</ul>
使用方法如下(使用~符号,并带上通配*符号):
.list>.item.two ~ * {
background-color: aqua;
}