CSS3

時間 2019-11-16

標籤 css3 css 欄目 CSS 简体版

原文原文鏈接

一.CSS
Cascading Style Sheet 級聯樣式表

1.表現HTML或XHTML文件樣式的計算機語言
2.包括對字體、顏色、邊距、高度、寬度、背景圖片、網頁定位等設定

二.css的優點：

1.內容與表現分離
2.網頁的表現統一，容易修改
3.豐富的樣式，使得頁面佈局更加靈活
4.減小網頁的代碼量，增長網頁的瀏覽速度，節省網絡帶寬
5.運用獨立於頁面的CSS，有利於網頁被搜索引擎收錄

三.css語法基本結構：
選擇器{

聲明1;

聲明2;
}

h1 {

font-size:12px;
color:#F00;
}

四.三種樣式：
1.行內樣式
<h1 style="color:blue;font-size: 10px;">今天可能下冰雹，你們每人回家準備一口鍋，蓋頭上</h1>

行內樣式有style屬性控制，雙引號中間的內容就是樣式列表，且內個樣式用分號分割

2.內部樣式表

在<head></head>標籤中寫<style type="text/css"></style>

<head lang="en">
<meta charset="UTF-8">
<title>內部樣式效果</title>
<style type="text/css">
h1{
color: green;
font-size: 100px;
}
</style>
</head>

注意：將所有符合條件的標籤所有變樣式

3.外部樣式表
須要建立.css文件
style.css
h1{
color: aqua;
font-size: 15px;
}
在HTML文件當中引用樣式
連接式：<link href="文件路徑" rel="stylesheet" type="text/css"/>
導入式：<style type="text/css">

@import "文件路徑";

</style>

4.連接式和導入式的區別

4.1<link/>標籤屬於XHTML，@import是屬於CSS2.1
4.2使用<link/>連接的CSS文件先加載到網頁當中，再進行編譯顯示
4.3使用@import導入的CSS文件，客戶端顯示HTML結構，再把CSS文件加載到網頁當中
4.4@import是屬於CSS2.1特有的，對不兼容CSS2.1的瀏覽器是無效的

5.樣式優先級
1.行內樣式>內部樣式表>外部樣式表
2.就近原則

6.三種基本選擇器

6.1 標籤

<h1>支佳寧說p和h1有什麼區別</h1>
h1 {
color: green;
}

6.2 class選擇器
<h1 class="ZJN">支佳寧說p和h1有什麼區別</h1>
.ZJN{
color:yellow;
}
6.3 id選擇器
<h1 id="ZJNHH">支佳寧說p和h1有什麼區別</h1>
#ZJNHH{
color：black;
}
遵循id>class>標籤，注意，id不能重複

7.層次選擇器

7.1 /*後代選擇器*/
body p{
background: yellow;
}
body標籤下的全部p標籤都要變

7.2 /*子類選擇器*/
body>p{
background: blue;
}
只有body下的p變，其餘包含p的不變

7.3/*相鄰兄弟選擇器*/

.active+p{
background: green;
}
定位class爲active相鄰的第一個p變

7.4/*通用選擇器*/
.active~p{
background: red;
}

8.結構僞類選擇器
<style type="text/css">
/*定位ul下的第一個li*/
ul li:first-child{
background: yellow;
}
/*定位ul下的最後一個li*/
ul li:last-child{
background: blue;
}
/*定位第三個p*/
p:nth-child(3){
background: green;
}
/*定位第一個p*/
p:first-of-type{
background: red;
}
/*定位指定位置的p*/
p:nth-of-type(2){
background: blueviolet;
}
</style>

<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>

E:first-child 做爲父元素的第一個子元素的元素E
E:last-child 做爲父元素的最後一個子元素的元素E
E F:nth-child(n) 選擇父級元素E的第n個子元素F，（n能夠是一、二、3），關鍵字爲even、odd
E:first-of-type 選擇父元素內具備指定類型的第一個E元素
E:last-of-type 選擇父元素內具備指定類型的最後一個E元素
E F:nth-of-type(n) 選擇父元素內具備指定類型的第n個F元素

9.屬性選擇器
<style type="text/css">
.demo a {
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
text-align: center;
background: #aac;
color: blue;
font: bold 20px/50px Arial;
margin-right: 5px;
text-decoration: none;
margin: 5px;
}
/*屬性*/
a[id]{
background: red;
}
/*屬性值*/
a[href=efc]{
background: yellow;
}
/*屬性開頭*/
a[href^=s]{
background: orange;
}
/*屬性結尾*/
a[target$=k]{
background: palevioletred;
}
/*屬性包含*/
a[href*=a]{
background: purple;
}
</style>

<p class="demo">
<a href="http://www.baidu.com" class="links item first" id="first" >1</a>
<a href="" class="links active item" title="test website" target="_blank" >2</a>
<a href="sites/file/test.html" class="links item" >3</a>
<a href="sites/file/test.png" class="links item" > 4</a>
<a href="sites/file/image.jpg" class="links item" >5</a>
<a href="efc" class="links item" title="website link" >6</a>
<a href="/a.pdf" class="links item" >7</a>
<a href="/abc.pdf" class="links item" >8</a>
<a href="abcdef.doc" class="links item" >9</a>
<a href="abd.doc" class="linksitem last" id="last">10</a>
</p>

E[attr] 選擇匹配具備屬性attr的E元素
E[attr=val] 選擇匹配具備屬性attr的E元素,而且屬性值爲val（其中val區分大小寫）
E[attr^=val] 選擇匹配元素E，且E元素定義了屬性attr，其屬性值是以val開頭的任意字符串
E[attr$=val] 選擇匹配元素E，且E元素定義了屬性attr，其屬性值是以val結尾的任意字符串
E[attr*=val] 選擇匹配元素E，且E元素定義了屬性attr，其屬性值包含了「val」，換句話說，字符串val與屬性值中的任意位置相匹配css

相關標籤/搜索

每日一句

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