Heim > Artikel > Web-Frontend > css基础语法和选择器的使用_html/css_WEB-ITnose
css基础语法和选择器的使用_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:52:111142Durchsuche
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>
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn