css day1
1. 插入样式表
外部样式表
<head>
<link rel="stylesheet" href="xxx.css" type="text/css">
</head>
内部样式表
<head>
<style type="text/css">xxxx</style>
</head>
内联样式
<a style="color:red">hi</a>
优先级比较:外部样式表<内部样式表<内联样式表
2. 选择器
类选择器
HTML <div class="z"></div>
css .z{backgroundcolor:red}
标签选择器
HTML <p></p>
css p{color:grey}
调用了此css文件的网页在用到p的时候他的css样式都会得到继承
id选择器
HTML <p id="select"></p>
css #select{color:green}
id选择器在同一个页面内只能被使用一次,id是唯一的。
派生选择器包括子选择器,后代选择器,相邻兄弟选择器
子选择器
HTML <p><strong>haha</strong></p>
<p><em>lalala<strong>123</strong></em></p>
<p><em>wuwu</em><strong>233</strong></p>
css p>strong{color:red}
此选择器代表strong的上一级必须是p才有效,两者之间不能穿插其他标签
haha就具有效果,但是123就不具有效果,因为strong的上一级是em
但是233还是具有效果,因为em和strong标签是同级的。
后代选择器
HTML <p><em>haha</em></p>
CSS p em{color:red}
此选择器只要是在p标签中的em都会具有效果,中间穿插其他标签也无妨。
类选择器和ID选择器的派生选择器
例如类选择器
HTML <div class="air><p>red</p></div>
css .air p{color:red}
类名为 air 的比<p>更大的元素内部的p标签里都是红色,air可以使div也可以是其他标签的选择器。
基于类被选择的元素
HTML <p class="ballon">hi</p>
css p.ballon{color:red}