1.CSS基本语法结构
文章目录
选择器{声明1；
声明2；}
声明包括属性和值
html
p{
color:#F00;
font-size:14px;
}<style>标签
CSS代码是放在style标签中,它可以放在head中也可以放在body中 ,可以放到代码的任意位置
html
<style>
p{
color:green
}
</style>2.HTML中引入CSS样式
2.1行内样式
使用style属性引入CSS样式
<p style="color:green; font-size:14px;" >直接引入</style>
2.2内部样式表
CSS代码写在style标签中
html
<style>
p{
color:green;
}
</style>2.3外部样式表
2.3.1链接式
使用link标签链接
html
<link rel="stylesheet" href="path"/>2.3.2导入式
使用@import导入
html
@import url("path")2.4CSS基本选择器
2.4.1标签选择器
选择器直接使用HTML元素名称，用于选中页面中所有该类型的元素，并应用样式
css
p {
color: blue;
}2.4.2类选择器
以.开头，后面跟随类名，用于选中具有指定类属性的所有元素
css
.a {
background-color: yellow;
}页面中任何拥有class="a"的元素背景色都会变成黄色
2.4.3ID选择器
以#开头，后面跟随ID名，用于精确选中具有指定ID属性的单个元素。ID应保证页面中唯一
css
#a {
font-weight: bold;
}这会使得ID为a的元素文本加粗
3.CSS的高级选择器
3.1层次选择器
3.1.1后代选择器
后代选择器也叫包含选择器，祖先元素直接或间接的包含后代元素
html
<style>
.a p{
color:green;
}
</style>
<div class="a">
<p>
000
</p>
<div>
<p>
111
</p>
</div>
</div>
<p>
222
</p>此时000和111会变成绿色
3.1.2子代选择器
使用>来选择直接子元素
html
<style>
ul>li{
list-style-type: none;
}
</style>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>选择所有ul元素的直接子元素li，去除列表样式
3.1.3相邻兄弟选择器
使用+，选择紧接在另一个元素之后的元素
html
<style>
h1 + p{
text-indent: 2em;
}
</style>
<h1>000</h1>
<p>111</p>
<p>222</p>111会首行缩进2，但222不会
3.1.4通用兄弟选择器
使用~，选择某个元素之后的所有同级元素
html
<style>
.a ~ li{
text-indent: 2em;
}
</style>
<ul>
<li>111</li>
<li class="a">222</li>
<li>333</li>
<li>444</li>
<li>555</li>
</ul>333,444,555会首行缩进2
3.2结构伪类选择器
++以child结尾的是在父级里从一个元素开始查找，不分类型++
**:first-child**选择作为父元素的第一个子元素的元素
**:last-child**选择作为父元素的最后一个子元素的元素
**:nth-child(n)**选择父元素中的第n个子元素
n 第n个 n的范围0到正无穷（全选）
even或2n 选中偶数位的元素
odd或2n+1 选中奇数位得到元素
++以type结尾的是在父级里先看类型，再看位置++
**:first-of-type **第一个子元素
:last-of-type最后一个子元素
**:nth-of-type() **选择同类型子元素中的第n个元素
html
<style>
/*a下面的第一个元素变，也就是标题1变*/
.a :first-child{
border: 2px solid blue;
}
/*a下面的第1个子元素是p的时候变,此时无变化*/
.a p:first-child{
border: 2px solid blue;
}
.a h1:first-child{
border: 2px solid blue;
}
/*a下面的最后一个元素是p的时候变 ，此时段落4变*/
.a p:last-child{
border: 2px solid blue;
}
/*a下面的第2个元素是p的时候变，此时段落1变*/
.a p:nth-child(2){
border: 2px solid blue;
}
/*a下面的偶数元素变*/
.a :nth-child(2n){
border: 2px solid blue;
}
/* n是从0开始的数列 把n=0开始往n+3里面计算就可 */
/* n=0 n+3=3 */
/* n=1 n+3=4 */
/* n=2 n+3=5... 结果就是第3,4,5,6,7,8,9...变*/
/*a下面第二个元素以后是h1的变*/
.a h1:nth-child(n+2){
border: 2px solid red;
}
.a :first-child{
border: 2px solid red;
}
/*a下面同类型的第一个变，结果标题1和段落1变（a下面共两个类型）*/
.a :first-of-type{
border: 2px solid blue;
}
/*a下面的最后一个元素是p时变，此时段落5变*/
.a p:last-of-type{
border: 2px solid blue;
}
/*a下面的h1类型中的第二个变，此时标题2变*/
.a h1:nth-of-type(2){
border: 2px solid red;
}
</style>
<div class="a">
<h1>标题1</h1>
<p>段落1</p>
<h1>标题2</h1>
<p>段落2</p>
<p>段落3</p>
<h1>标题3</h1>
<p>段落4</p>
<h1>标题4</h1>
<p>段落5</p>
</div>3.3属性选择器
1.某某[属性]
2.某某[属性=属性值]
3.某某[属性^=属性值]
4.某某[属性$=属性值]
5.某某[属性*=属性值]
6.某某[属性~=属性值]
7.某某[属性|=属性值]
html
<style>
/*某某[属性] 选择到a标签且有title属性的变 */
a[title]{
background: yellow;
}
/*某某[属性=属性值] 选择到有某某标签有指定属性且属性值必须一模一样的，多一个空格都不行 */
a[lang="zh"]{
background: yellow;
}
/* id是last且有title属性且有class属性,属性值只能是links的变 */
#last[title][class="links"]{
background: yellow;
}
/*某某[属性^=属性值] a标签有class属性且属性值是li开头的 */
a[class^="li"]{
background-color: yellow;
}
/*某某[属性$=属性值] a标签有class属性且属性值结尾是t的变 */
a[class$="t"]{
background-color: yellow;
}
/*a标签有href属性且属性值结尾是.png的变*/
a[href$=".png"]{
background-color: green;
}
/*某某[属性*=属性值] 选择到a标签且有href属性且只要有字母b就可以 */
a[href*="b"]{
background-color: green;
}
/*某某[属性~=属性值] 选择到的是a标签且有class属性,且属性值有完整的itme词的变 */
a[class~="item"]{
background-color: green;
}
/*某某[属性|=属性值] 选择到有a标签,且有属性title,且属性值只有1个是link的或者属性值有多个但是得是link-开头的变 */
a[title|="link"]{
background-color: green;
}
</style>