首页 > 代码库 > css基础语法和选择器的使用
css基础语法和选择器的使用
css语法
selector{
property:value
}
例：h1{color:red; font-size:14px}
属性大于1个之后，属性之间用分号隔开
如果值大于1个单词，则需要加上引号
p{font-family:"sans serif";}
选择器分组：
h1,h2,h3,h4,h5,h6{color:red;}
继承：
body{
color:green;
}
css-派生选择器
通过依据元素在其位置的上下文关系来定义样式
css-id选择器
id选择器可以为标有id的HTML元素指定特定的样式
id选择器以“#”来定义
id选择器常常用于建立派生选择器
css-类选择器
类选择器以一个点显示
class也可以用作派生选择器
css-属性选择器
对带有指定属性的HTML元素设置样式
属性和值选择器
body{
color:red;
}
h1,h2,p{
color: bisque;
}
/*派生选择器*/
li strong{
color: black;
}
strong{
color: blue;
}
/*id选择器*/
#divId{
color: brown;
}
/*id选择器和派生选择器一起作用*/
#pid a{
color: crimson;
}
/*类选择器*/
.pclass{
color: chartreuse;
}
/*类选择器派生选择器一起作用*/
.divclass a{
font-size: 100px;
color: black;
}
/*属性选择器*/
[title]{
color: chartreuse;
font-size: 50px;
}
/*属性和值选择器*/
[title=te]{
color: chocolate;
font-size: 10px;
}
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link href="http://www.mamicode.com/myCss.css" type="text/css" rel="stylesheet"> </head> <body> <p>aaaaa</p> <h1>123</h1> <a>aaaaaaa</a> <!--派生选择器--> <p><strong>p标签hello css</strong></p> <ul> <li><strong>li标签hello css</strong></li> </ul> <!--id选择器和派生选择器一起作用--> <p id="pid">hello css <a href="http://www.baidu.com">baidu</a></p> <!--id选择器的使用--> <div id="divId"> 这是一个div </div> <!--类选择器的使用--> <p class="pclass">这是一个class效果</p> <div class="divclass"> Hello Div <a href="http://www.baidu.com">baidu</a> </div> <!--属性选择器的使用--> <p title="t">属性选择器的使用</p> <!--属性和值选择器的使用--> <p title="te">属性和值选择器的使用</p> </body> </html>
css基础语法和选择器的使用
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。