本章内容 CSS
一、css注释
css一般是独立的文件。
注释写法:/*注释内容*/
注释格式:
/*这是首页的css样式文件*/
/*页面通用样式*/
/*顶部导航条样式*/
/*侧边菜单栏样式*/
二、css语法结构
选择器{属性名1:属性值1;
属性名2:属性值2;
}
三、css的引入方式
1.外部css文件
<link rel="stylesheet" herf="mycss.css">
2.head内style标签内部直接书写css代码
3.标签内部通过style属性直接书写
四、选择器的分类
1.基本选择器
标签选择器:选择所有p标签
p {
color:red;
}
-----------------------------------------
id选择器:选择所有id=‘id_user’的标签
#id_user{
color:red;
}
-----------------------------------------
(class)类选择器:选择所有class=‘cls’的标签
.cls{
color:red
}
-----------------------------------------
通配选择器:选择所有的标签
*{
color:red
}
2.组合选择器
后代选择器:用空格表示,选择div内的所有span标签
div span{
color:red;
}
---------------------------------------------------
子代选择器:用>表示,选择div内一个层级的span标签
div>span{
color:read
}
---------------------------------------------------
毗邻选择器:用+表示,div紧挨着的下一个标签(span)
div + span{
color:red;
}
----------------------------------------------------
弟弟选择器:用~表示。div下面统计的所有span标签
div ~span{
color:red;
}
-----------------------------------------------------
3.属性选择器
属性选择器:选择页面上所有具有board属性的标签
[board]{
color:red;
}
找到具有属性board并且值为‘out’的标签
[board='out']{
color:red;
}
找到input中具有属性board且值为‘out’的标签
input[board='out']{
color:red;
}
4.分组嵌套
div,p,span{
color:red;
}
.c1,#d1,p{
color:red;
}
.c1 h1{
color:green;
}
选择器可以组合嵌套使用。
5.伪类选择器
a:link{
color:red;
}
a:hover{
color:red;
}
a:active{
color:red;
}
a:visited{
color:gray
}
input:focus{
background-color:red;
}
6.伪元素选择器
p:before{
content:'AAA';
color:red;
}
p:after{
content:'?';
color:blue;
}
p:first-letter{
color:red;
font-size:48px;
}