css基礎整理(1)之css導入和選擇器

最近一直在學JS,但老是以爲有些吃力,因此想把CSS和html的基礎知識再整理一下,如今先複習一下CSS的導入,相對單位來常見的和選擇器中常見的。
css

CSS的的外部樣式表導入的兩種方法:html

1)使用<link>標籤導入瀏覽器

<link href="001.css" type="text/css"/>

href能夠是相對地址也能夠是絕對地址;ide

2)使用@import關鍵字導入url

<style type="text/css">
@import url("001.css");
</style>


css中的相對單位:spa

em:一個em等於font-size的屬性值,若是設置font-zize屬性的單位爲em,則em的值將根據父元素的font-size值來肯定;如code

p{
font-size:12px;
line-height:2em;//行高爲24px
}

px:通常參考父對象中相同屬性的值;若是父元素高爲500,子元素爲50%,則子元素的實際高度爲250 px;orm

基本選擇器:htm

1)標籤選擇器:標籤名{ 屬性:屬性值 }
對象

p{font-size:12px;
color:red;}

2 )類選擇器:.類名{ 屬性:屬性值 }

<style type="text/css">
.size{font-size:14px;}
</style>
<body>
<div class="size">世界,你好!</div>
<p class="size">你好!</p>
</body>

它能夠精準到某個具體的元素對象;

3)ID選擇器;#box{ 屬性:屬性值}

<style type="text/css">
#box{height:200px;width:200px;}
</style>
<div id="box">四月裂帛</div>

div#box的優先級>#box 的優先級

4)通配選擇器:*{ magin:0;padding=0;}

通配選擇器能夠影響到頁面中全部的元素,通常都用來,清楚頁面的原有格式,使他兼容各瀏覽器;

複合選擇器:

1)子選擇器:指定父元素所包含的子元素的樣式:用>表示,如

<style type="text/css">
#box>.yangshi{
    height:200px;width:200px;
    }
 </style>
 <body>
 <div id="box"><span class="yangshi">世界這麼大,我想去看看</div>
 </body

2)相鄰選擇器:指定一個元素相鄰的下一個元素的樣式,用+表示,如

<style type="text/css">
h2{font-size:12px;}
h2+div{font-size:20px;}//爲div元素指定樣式
</style>
<body>
<h2>結構</h2>
<div>春眠不覺曉</div>
</body>

3)包含選擇器:經過空格表示符來表示,如

<style type="text/css">
#header p{};
</style>
<body>
<div id="header>
<p></p>
<p></p>
<p></p>
</div>
</body>

#header p{}定義了header中全部p元素的樣式;

4)僞選擇器:僞類和僞元素以(:)爲前綴表示,而且與先後名稱之間不要有空格;

下面是利用超連接的4個僞類選擇器定義超連接文本的4中不一樣顯示狀態:

<style type="text/css">
a:link{color:#ff0000;}
a:visited{color:#0000FF;}
a:hover{color:00ff00;}
a:active{color:ff00ff;}
</style>
<body>
<a href="#">超連接文本</a>
</body>

5)選擇器分組:把樣式相同的元素寫在一塊兒,定義樣式,如

html,body,h1,h2,h3,h4,h5,p,table,caption,tr,td,th,ul,li,ol,di,dl,dt,dd,form,legend,fidest
{
margin:0;
padding:0;
    }

這樣能夠把全部元素的樣式清楚爲0;除了能夠對標籤元素進行分組,還能夠給類選擇器和ID選擇器進行分組,用,隔開;

相關文章
相關標籤/搜索