css基礎整理（1）之css導入和選擇器

時間 2019-11-26

標籤 css 基礎整理導入選擇器欄目 CSS 简体版

原文原文鏈接

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

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

１）使用<link>標籤導入瀏覽器

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

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

２）使用＠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選擇器進行分組，用，隔開；

1. CSS基礎（1.選擇器）
2. css基礎,css選擇器
3. CSS基礎和選擇器
4. css的導入方式基礎選擇器高級選擇器
5. CSS基礎選擇器溫故-1
6. CSS學習之基礎選擇器和高級選擇器
7. css基礎選擇器
8. CSS基礎（三）：選擇器
9. CSS基礎選擇器
10. HTML基礎-css選擇器
更多相關文章...
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• CSS 指南 - 網站建設指南
• Java Agent入門實戰（三）-JVM Attach原理與使用
• Docker 清理命令

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。