CSS中的常用选择器
常用三种选择器
标签选择器
p{
color: red;
}
id选择器
id:(唯一性)
id命名:数字、字母、下划线、中划线(-),不能用数字开头
#p_1{
font-size: 30px;
color: yellowgreen;
}
class选择器
.p_2{
font-weight: bold;
color: yellow;
}
三种选择器的优先级:
id选择器>class选择器>标签选择器
CSS中其他选择器
后代选择器 只要包含该标签对象即可
div span{
font-size: 27px;
font-family: 宋体;
color: red;
}
子选择器 直系子标签
div>span{
color: red;
}
兄弟选择器 只会改变下面相邻的元素对象
#p_1+p{
color: green;
}
兄弟选择器 后面所有的兄弟对象都会改变
#p_1~p{
color: red;
font-size: 30px;
}
伪类选择器 需要按照顺序写,否则效果将不显示
a:link{text-decoration:none}未访问过的。
a:visited{color:#ccc} 访问过
a:hover{color: red;text-decoration:red}鼠标放在超链接上,显示红色并有下划线。
a:active{color:#FF7400} 选定链接
字体:(font)
/*字体的颜色*/
color: gray;
/*字体的大小*/
font-size: 12px;
/*字体的加粗*/
/*font-weight: bold;*/
/*字体的风格*/
/*font-family: 宋体;*/
/*字体倾斜*/
/*font-style: italic;*
文本(text)
/*下划线展示*/
text-decoration: underline;
/*去除下划线*/
text-decoration: none;
/*表示某段文字不可用*/
text-decoration:line-through;
/*文本居中*/
text-align: center;
/**文本水平居中*/
Line-height=文本所在父元素的高度
border属性有三个修饰属性
?border-color
?border-color:red;
?border-top-color:blue;
?border-width
?border-width: 1px;
?border-left-width: 3px;
?border-style
?border-style: solid
?border-bottom-style: solid;
?可以使用border统一设置
?border: 1px solid red;
border-right: 5px dotted blue;
.border: 边框的大小 边框的样式 边框的颜色
===========================================================================