css教程

時間 2019-11-26

標籤 css 教程欄目 CSS 简体版

原文原文鏈接

CSS定義

CSS全稱爲「層疊樣式表 (Cascading Style Sheets)」，它主要是用於定義HTML內容在瀏覽器內的顯示樣式，如文字大小、顏色、字體加粗等。css

css語法格式

聲明：在英文大括號「｛｝」中的的就是聲明，屬性和值之間用英文冒號「：」分隔。當有多條聲明時，中間能夠英文分號「;」分隔，以下所示：html

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

CSS 類型

CSS樣式能夠寫在哪些地方呢？從CSS 樣式代碼插入的形式來看基本能夠分爲如下3種：內聯式、嵌入式和外部式三種。這一小節先來說解內聯式。瀏覽器

內聯式

內聯式css樣式表就是把css代碼直接寫在現有的HTML標籤中，style="color=red"以下面代碼：編輯器

<p style="color:red">這裏文字是紅色。</p>

而且css樣式代碼要寫在style=""雙引號中，若是有多條css樣式代碼設置能夠寫在一塊兒，中間用分號隔開。以下代碼：佈局

<p style="color:red;font-size:12px">這裏文字是紅色。</p>

嵌入式

嵌入式就是把內聯式css樣式寫在head標籤的style標籤中，其屬性爲type="text/css"，具體代碼以下字體

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌入式css樣式</title>
<style type="text/css">
span{
   color:red;
}
</style>
</head>

外部式

外部式css樣式(也可稱爲外聯式)就是把css代碼寫一個單獨的外部文件中，這個css樣式文件以「.css」爲擴展名，在<head>內（不是在<style>標籤內）使用<link>標籤將css樣式文件連接到HTML文件內，以下面代碼：ui

<link href="style.css" rel="stylesheet" type="text/css" />

三種css屬性的優先級是：spa

內聯式 > 嵌入式 > 外部式code

總的來講，css的優先級聽從就近原則orm

類名

.類選器名稱{css樣式代碼;}

使用方法：

第一步：使用合適的標籤把要修飾的內容標記起來，以下：

<span>膽小如鼠</span>

第二步：使用class="類選擇器名稱"爲標籤設置一個類，以下：

<span class="stress">膽小如鼠</span>

第三步：設置類選器css樣式，以下：

.stress{color:red;}/*類前面要加入一個英文圓點*/

id 選擇器

ID選擇器都相似於類選擇符，但也有一些重要的區別：

一、爲標籤設置id="ID名稱"，而不是class="類名稱"。

二、ID選擇符的前面是井號（#）號，而不是英文圓點（.）。

id選擇器只能用一次，每一個元素只能有一個id，而類選擇器能夠有不少元素是同一個類，一個元素也能夠同時屬於多個類

子選擇器

先寫一個類，而後用大於符號>指向類中的某個元素，對齊設置樣式表：

.food>li{
  border:1px red solid;
}

子選擇器效果圖：

包含後代的選擇器

把子選擇器的>符號換成空格，其與子選擇器的主要區別是：包含後代的選擇器會把子類中的全部符合條件的子類都改變，而子選擇器只改變第一代後代，代碼以下：

.food li{
    border:1px solid red;
}

後代選擇器效果圖：

適配符

通用適配符：*，用於匹配任意樣式

僞類適配符：:hover,它容許給html不存在的標籤（標籤的某種狀態）設置樣式，好比說咱們給html中一個標籤元素的鼠標滑過的狀態來設置字體顏色:

a:hover{color:red}

分組選擇符：,，同時爲多個標籤設置樣式

繼承

若是對某個父類標籤設置了某種樣式，其子標籤也會自動繼承這種樣式，好比你爲<p>標籤設置了color=red，那麼<p>標籤包含的<span>標籤也會自動繼承這個顏色樣式

權重

系統根據權重判斷到底使用哪一種樣式，具體來講：繼承權重爲0.1，標籤的權重爲1，類選擇符權重爲10，id選擇符權值爲100

p{color:red;} /*權值爲1*/
p span{color:green;} /*權值爲1+1=2*/
.warning{color:white;} /*權值爲10*/
p span.warning{color:purple;} /*權值爲1+1+10=12*/
#footer .note p{color:yellow;} /*權值爲100+10+1=111*/

若是遇到權重相同的狀況：就近原則

設置最高權重：在分號以前加入importantp.first{color:green!important;}，注意後代選擇器是空格，p.first中間不加空格（由於不是後代）,同理p#id也不加空格

格式化排版

設置字體：font-family屬性
字號：font-size:20px
顏色：color:red
粗體：font-weight：bold
斜體：font-style:italic
下劃線：text-decoration：underline
刪除線：text-decoration：line-through
首行縮進：text-indent：2em
行間距：line-height：1.5em
字間距：letter-spacing：50px
對齊方式：text-align：center

使用方式以下：

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
body{
  font-family:"微軟雅黑"；
  font-size:20px;
  color:red;
}
</style>
</head>
</html>

元素分類

在講解CSS佈局以前，咱們須要提早知道一些知識，在CSS中，html中的標籤元素大致被分爲三種不一樣的類型：塊狀元素、內聯元素(又叫行內元素)和內聯塊狀元素。

經常使用的塊狀元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

經常使用的內聯元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

經常使用的內聯塊狀元素有：

<img>、<input>

塊級元素

什麼是塊級元素？在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是塊級元素。設置display:block就是將元素顯示爲塊級元素。以下代碼就是將內聯元素a轉換爲塊狀元素，從而使a元素具備塊狀元素特色。

a{display:block;}

塊級元素特色：

一、每一個塊級元素都重新的一行開始，而且其後的元素也另起一行。（真霸道，一個塊級元素獨佔一行）

二、元素的高度、寬度、行高以及頂和底邊距均可設置。

三、元素寬度在不設置的狀況下，是它自己父容器的100%（和父元素的寬度一致），除非設定一個寬度。

內聯元素

在html中，<span>、<a>、<label>、 <strong> 和<em>就是典型的內聯元素（行內元素）（inline）元素。固然塊狀元素也能夠經過代碼display:inline將元素設置爲內聯元素。以下代碼就是將塊狀元素div轉換爲內聯元素，從而使 div 元素具備內聯元素特色。

div{
     display:inline;
 }

......

<div>我要變成內聯元素</div>

內聯元素特色：

一、和其餘元素都在一行上；

二、元素的高度、寬度及頂部和底部邊距不可設置；

三、元素的寬度就是它包含的文字或圖片的寬度，不可改變。

內聯塊狀

內聯塊狀元素（inline-block）就是同時具有內聯元素、塊狀元素的特色，代碼display:inline-block就是將元素設置爲內聯塊狀元素。(css2.1新增)，<img>、<input>標籤就是這種內聯塊狀標籤。

inline-block 元素特色：

一、和其餘元素都在一行上；

二、元素的高度、寬度、行高以及頂和底邊距均可設置。

盒子模型

盒子：div
內容與盒子的距離：padding，一共四個方向，padding-top，padding-bottom，padding-left，padding-right
盒子與另外一個盒子的距離：margin
盒子邊框：border

邊框

盒子模型的邊框就是圍繞着內容及補白的線，這條線你能夠設置它的粗細、樣式和顏色(邊框三個屬性)。

以下面代碼爲 div 來設置邊框粗細爲 2px、樣式爲實心的、顏色爲紅色的邊框：

div{
    border:2px  dotted  red;
}

上面是 border 代碼的縮寫形式，能夠分開寫：

div{
    border-width:2px;
    border-style:dotted;/*虛線*/
    border-color:red;
}

也能夠單獨爲一邊設置邊框

div{
    border-bottom:2px  dotted  red;
}

寬度和高度

寬度和高度分別使用width和height來表示

填充

元素與邊框之間的距離用padding，其設置的順序爲：上，右，下，左(順時針)

CSS佈局模型

CSS包含3種基本的佈局模型，用英文歸納爲：Flow、Layer 和 Float。
在網頁中，元素有三種佈局模型：

流動模型（Flow）
浮動模型 (Float)
層模型（Layer）

流動模型

流動模型是默認的網頁佈局模式，2個典型特徵：

塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分佈，由於在默認狀態下，塊狀元素的寬度都爲100%。實際上，塊狀元素都會以行的形式佔據位置。如右側代碼編輯器中三個塊狀元素標籤(div，h1，p)寬度顯示爲100%。
第二點，在流動模型下，內聯元素都會在所處的包含元素內從左到右水平分佈顯示。（內聯元素可不像塊狀元素這麼霸道獨佔一行）

清除浮動：①clear：both ② width：100%，overflow：hidden

浮動模型

塊狀元素這麼霸道都是獨佔一行，若是如今咱們想讓兩個塊狀元素並排顯示，怎麼辦呢？不要着急，設置元素浮動就能夠實現這一願望。使用float屬性設置浮動：

div{
    width:200px;
    height:200px;
    border:2px red solid;
    float:left;
}
<div id="div1"></div>
<div id="div2"></div>

層模型

什麼是層佈局模型？層佈局模型就像是圖像軟件PhotoShop中很是流行的圖層編輯功能同樣，每一個圖層可以精肯定位操做。

CSS定義了一組定位（positioning）屬性來支持層佈局模型。層模型有三種形式：

一、絕對定位(position: absolute)
加入position:absolute

div{
    width:200px;
    height:200px;
    border:2px red solid;
    position:absolute;
    left:100px;
    top:50px;
}
<div id="div1"></div>

二、相對定位(position: relative)
absolute心口如一，移動了就是移動了。relative只是表面顯示移動了，但實際還在文檔流中原有位置，別的元素沒法佔據。若是想爲元素設置層模型中的相對定位，須要設置position:relative（表示相對定位），它經過left、right、top、bottom屬性肯定元素在正常文檔流中的偏移位置

三、固定定位(position: fixed)
fixed：表示固定定位，與absolute定位類型相似，但它的相對移動的座標是視圖（屏幕內的網頁窗口）自己。因爲視圖自己是固定的，它不會隨瀏覽器窗口的滾動條滾動而變化，所以固定定位的元素會始終位於瀏覽器窗口內視圖的某個位置，不會受文檔流動影響，這與background-attachment:fixed;屬性功能相同

相對定位和絕對定位配合

必須相對於父輩元素進行定位：在父輩元素加position:relative，須要進項相對的加position:absolute

盒模型代碼簡寫

一般有下面三種縮寫方法:

一、若是top、right、bottom、left的值相同，以下面代碼：

margin:10px 10px 10px 10px;

可縮寫爲：

margin:10px;

二、若是top和bottom值相同、left和 right的值相同，以下面代碼：

margin:10px 20px 10px 20px;

可縮寫爲：

margin:10px 20px;

三、若是left和right的值相同，以下面代碼：

margin:10px 20px 30px 20px;

可縮寫爲：

margin:10px 20px 30px;

顏色值縮寫

關於顏色的css樣式也是能夠縮寫的，當你設置的顏色是16進制的色彩值時，若是每兩位的值相同，能夠縮寫一半。

例子1：

p{color:#000000;}

能夠縮寫爲：

p{color: #000;}

例子2：

p{color: #336699;}

能夠縮寫爲：

p{color: #369;}

字體設置縮寫

網頁中的字體css樣式代碼也有他本身的縮寫方式，下面是給網頁設置字體的代碼：

body{
    font-style:italic;
    font-variant:small-caps; 
    font-weight:bold; 
    font-size:12px; 
    line-height:1.5em; 
    font-family:"宋體",sans-serif;
}

這麼多行的代碼其實能夠縮寫爲一句：

body{
    font:italic  small-caps  bold  12px/1.5em  "宋體",sans-serif;
}

注意：

一、使用這一簡寫方式你至少要指定 font-size 和 font-family 屬性，其餘的屬性(如 font-weight、font-style、font-variant、line-height)如未指定將自動使用默認值。

二、在縮寫時 font-size 與 line-height 中間要加入「/」斜扛。

顏色值

顏色值有3中設置方式：

英文命令顏色
p{color:red;}
RGB顏色

p{color：RGB(133,45,200)
十六進制顏色

p{color：#00ffff}

長度值

像素px
字體大小em：就是本元素的字體大小，好比字體大小爲14px，那麼em大小就位14px
百分比：p{font-size:12px;line-height:130%}

CSS樣式設置小技巧

設置居中

p{text-align:center;}

定寬塊狀元素居中

div{margn:20px auto;}

不定寬度的塊狀元素有三種方法居中（這三種方法目前使用的都不少）：

加入 table 標籤
設置 display: inline 方法：與第一種相似，顯示類型設爲行內元素，進行不定寬元素的屬性設置
設置 position:relative 和 left:50%：利用相對定位的方式，將元素向左偏移 50% ，即達到居中的目的
方法三：經過給父元素設置float，而後給父元素設置 position:relative 和 left:50%，子元素設置 position:relative 和 left: -50% 來實現水平居中。

垂直居中

設置height和line-height值同樣

<style>
.container{
    height:100px;
    line-height:100px;
    background:#999;
}
</style>

父元素高度肯定的多行文本、圖片等的豎直居中的方法有兩種：

使用插入 table (包括tbody、tr、td)標籤，同時設置 vertical-align：middle。
設置塊級元素的 display 爲 table-cell（設置爲表格單元顯示），激活 vertical-align 屬性，但注意 IE六、7 並不支持這個樣式, 兼容性比較差。

隱性改變display類型

position : absolute
float : left 或 float:right

簡單來講，只要html代碼中出現以上兩句之一，元素的display顯示類型就會自動變爲以 display:inline-block（塊狀元素）的方式顯示，固然就能夠設置元素的 width 和 height 了，且默認寬度不佔滿父元素。

相關標籤/搜索

每日一句

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