CSS基础语法和选择器的使用
jopen
10年前
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="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>