1.id选择器
语法:标记>#id名{
属性:属性值;
}
eg:
共享博客
#box{color:red;
}
注:①id选择器的优先级最高,id名是唯一的,不能出现同名id;
②id名的命名要语义化,常用的命名方法:驼峰命名法(#subNavTitle),下划线连接命名法(main_left_con)。
2.类选择器(class选择器)
语法:标记>.class名{
属性:属性值;
}
eg:
共享博客.box{
color:red;
}
注:还可以使用类名词列表的方式设置样式,用法如下:共享博客标记>.c1{
font-size:12px;
color:red;
}
.c2{
text-decoration:none;
}
当某个元素有部分样式和其他元素相同,也有个别样式和其他元素不同时,可以使用类名词列表的方式。
3.标签选择器(类型选择符/元素选择符)
语法:标记名称{
属性:属性值;
}
eg:a{
text-decoration:none;
}
body{
font-family:"微软雅黑",Arial;
}
注:①如果想改变某个元素的默认样式时,可以使用类型选择符;
②当统一文档某个元素的显示效果时,可以使用类型选择符。
4.群组选择器
语法:选择符1,选择符2,选择3,{
属性:属性值;
}
eg:ul,ol{
list-style:none;
}
.news,.intro,.job{
float:left;
}
注:你想为html中多个标签元素设置同一个样式时,可以使用群组选择器(多出现在共同样式中)
5.后代选择器
语法:选择符1选择符2{
属性:属性值;
}
eg:.boxa{
color:black;
}
注:选择符1和选择符2必须包含与被包含的关系
6.通用选择器(通配符)
语法:*{
属性:属性值;
}
eg:*{
margin:0;
padding:0;
}
注:*匹配html根元素所有的标签元素
7.伪类选择器
语法:选择器:hover{
属性:属性值;
}
超链接的四个状态:
a:link 链接没有被访问过后的状态
a:visited 链接被访问过后的状态
a:hover 鼠标滑过时的状态
a:active 鼠标按下时的状态
注:为了方便使用,我们将a的四个状态简写一下形式a{
color:black;
}
a:hover{
color:red;
}
分享
分享海报
扫一扫 - 分享本文
打赏
微信
扫一扫 - 打赏鹏仔
收藏
请按下 Ctrl + D
即可收藏当前文章
手机看
分享到微信朋友圈
扫一扫 - 手机阅读
侵权投诉
侵权、举报、建议
↓