CSS基本語法及頁面引用

時間 2020-07-03

標籤 css 基本語法頁面引用欄目 CSS 简体版

原文原文鏈接

css基本語法及頁面引用

(1)css基本語法

css的定義方法是：css

選擇器 { 屬性:值; 屬性:值; 屬性:值;}html

選擇器是將樣式和頁面元素關聯起來的名稱，屬性是但願設置的樣式屬性每一個屬性有一個或多個值。代碼示例：前端

/*
    css註釋 ctrl+shift+"/"
*/
div{ 
    width:100px; 
    height:100px; 
    color:red 
}

(2)css頁面引入方法(三種方法)

外聯式：經過link標籤，連接到外部樣式表到頁面中。

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

嵌入式：經過style標籤，在網頁上建立嵌入的樣式表。

<style type="text/css">
    div{ width:100px; height:100px; color:red }
    ......
</style>

內聯式：經過標籤的style屬性，在標籤上直接寫樣式。

<div style="width:100px; height:100px; color:red ">......</div>

(3)css文本設置

經常使用的應用文本的css樣式：瀏覽器

color 設置文字的顏色，如： color:red;
font-size 設置文字的大小，如：font-size:12px;
font-family 設置文字的字體，如：font-family:'微軟雅黑';
font-style 設置字體是否傾斜，如：font-style:'normal'; 設置不傾斜，font-style:'italic';設置文字傾斜
font-weight 設置文字是否加粗，如：font-weight:bold; 700 設置加粗 font-weight:normal 400設置不加粗
line-height 設置文字的行高，設置行高至關於在每行文字的上下同時加間距，如：line-height:24px;
font 同時設置文字的幾個屬性，寫的順序有兼容問題，建議按照以下順序寫： font：是否加粗字號/行高字體；如： font:normal 12px/36px '微軟雅黑';
text-decoration 設置文字的下劃線，如：text-decoration:none; 將文字下劃線去掉
text-indent 設置文字首行縮進，如：text-indent:24px; 設置文字首行縮進24px。
text-align 設置文字水平對齊方式，如text-align:center 設置文字水平居中。

(4)css顏色表示法

css顏色值主要有三種表示方法：
1. 顏色名錶示，好比：red 紅色，gold 金色
2. rgb表示，好比：rgb(255,0,0)表示紅色
3. 16進制數值表示，好比：#ff0000 表示紅色，這種能夠簡寫成 #f00

(5)css選擇器

經常使用的選擇器有以下幾種：編輯器

一、標籤選擇器

標籤選擇器，此種選擇器影響範圍大，建議儘可能應用在層級選擇器中。
舉例：佈局

*{margin:0;padding:0}
div{color:red}   


<div>....</div>   <!-- 對應以上兩條樣式 -->
<div class="box">....</div>   <!-- 對應以上兩條樣式 -->

二、id選擇器

經過id名來選擇元素，元素的id名稱不能重複，因此一個樣式設置項只能對應於頁面上一個元素，不能複用，id名通常給程序使用，因此不推薦使用id做爲選擇器。
舉例：post

#box{color:red} 

<div id="box">....</div>   <!-- 對應以上一條樣式，其它元素不容許應用此樣式 -->

三、類選擇器

經過類名來選擇元素，一個類可應用於多個元素，一個元素上也可使用多個類，應用靈活，可複用，是css中應用最多的一種選擇器。
舉例：性能

.red{color:red}
.big{font-size:20px}
.mt10{margin-top:10px} 

<div class="red">....</div>
<h1 class="red big mt10">....</h1>
<p class="red mt10">....</p>

四、層級選擇器

主要應用在選擇父元素下的子元素，或者子元素下面的子元素，可與標籤元素結合使用，減小命名，同時也能夠經過層級，防止命名衝突。
舉例：字體

.box span{color:red}
.box .red{color:pink}
.red{color:red}

<div class="box">
    <span>....</span>
    <a href="#" class="red">....</a>
</div>

<h3 class="red">....</h3>

五、組選擇器

多個選擇器，若是有一樣的樣式設置，可使用組選擇器。
舉例：動畫

.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}

<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>

六、僞類及僞元素選擇器

經常使用的僞類選擇器有hover，表示鼠標懸浮在元素上時的狀態，僞元素選擇器有before和after,它們能夠經過樣式在元素中插入內容。

.box1:hover{color:red}
.box2:before{content:'行首文字';}
.box3:after{content:'行尾文字';}


<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>

(6)CSS盒子模型

盒子模型解釋
元素在頁面中顯示成一個方塊，相似一個盒子，CSS盒子模型就是使用現實中盒子來作比喻，幫助咱們設置元素對應的樣式。

把元素叫作盒子，設置對應的樣式分別爲：盒子的寬度(width)、盒子的高度(height)、盒子的邊框(border)、盒子內的內容和邊框之間的間距(padding)、盒子與盒子之間的間距(margin)。

設置寬高

width:200px;  /* 設置盒子的寬度，此寬度是指盒子內容的寬度，不是盒子總體寬度(難點) */ 
height:200px; /* 設置盒子的高度，此高度是指盒子內容的高度，不是盒子總體高度(難點) */

設置邊框
設置一邊的邊框，好比頂部邊框，能夠按以下設置：

border-top-color:red;    /* 設置頂部邊框顏色爲紅色 */  
border-top-width:10px;   /* 設置頂部邊框粗細爲10px */   
border-top-style:solid;  /* 設置頂部邊框的線性爲實線，經常使用的有：solid(實線)  
  dashed(虛線)  dotted(點線); */

上面三句能夠簡寫成一句：

border-top:10px solid red;

設置其它三個邊的方法和上面同樣，把上面的'top'換成'left'就是設置左邊，換成'right'就是設置右邊，換成'bottom'就是設置底邊。

四個邊若是設置同樣，能夠將四個邊的設置合併成一句：

border:10px solid red;

設置內間距padding

設置盒子四邊的內間距，可設置以下：

padding-top：20px;     /* 設置頂部內間距20px */ 
padding-left:30px;     /* 設置左邊內間距30px */ 
padding-right:40px;    /* 設置右邊內間距40px */ 
padding-bottom:50px;   /* 設置底部內間距50px */

上面的設置能夠簡寫以下：

padding：20px 40px 50px 30px; /* 四個值按照順時針方向，分別設置的是 上 右 下 左  
四個方向的內邊距值。 */

padding後面還能夠跟3個值，2個值和1個值，它們分別設置的項目以下：

padding：20px 40px 50px; /* 設置頂部內邊距爲20px，左右內邊距爲40px，底部內邊距爲50px */ 
padding：20px 40px; /* 設置上下內邊距爲20px，左右內邊距爲40px*/ 
padding：20px; /* 設置四邊內邊距爲20px */

設置外間距margin

外邊距的設置方法和padding的設置方法相同，將上面設置項中的'padding'換成'margin'就是外邊距設置方法。

(7)盒模型的實際尺寸

按照下面代碼製做頁面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子的真實尺寸</title>
    <style type="text/css">
        .box01{width:50px;height:50px;background-color:gold;}
        .box02{width:50px;height:50px;background-color:gold;border:50px
         solid #000}
        .box03{width:50px;height:50px;background-color:gold;border:50px
         solid #000;padding: 50px;}
    </style>
</head>
<body>
    <div class="box01">1</div>
    <br />
    <div class="box02">2</div>
    <br />
    <div class="box03">3</div>
</body>
</html>

經過上面的頁面得出結論：盒子的width和height設置的是盒子內容的寬和高，不是盒子自己的寬和高，盒子的真實尺寸計算公式以下：

盒子寬度 = width + padding左右 + border左右
盒子高度 = height + padding上下 + border上下

(8)盒模型使用技巧及相關問題

margin相關技巧
一、設置元素水平居中： margin:x auto;
二、margin負值讓元素位移及邊框合併

外邊距合併

外邊距合併指的是，當兩個垂直外邊距相遇時，它們將造成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。解決方法以下：

一、使用這種特性
二、設置一邊的外邊距，通常設置margin-top
三、將元素浮動或者定位

margin-top 塌陷

在兩個盒子嵌套時候，內部的盒子設置的margin-top會加到外邊的盒子上，致使內部的盒子margin-top設置失敗，解決方法以下：

一、外部盒子設置一個邊框
二、外部盒子設置 overflow:hidden
三、使用僞元素類：

.clearfix:before{
    content: '';
    display:table;
}

(9)css元素溢出

當子元素的尺寸超過父元素的尺寸時，須要設置父元素顯示溢出的子元素的方式，設置的方法是經過overflow屬性來設置。

overflow的設置項：
一、visible 默認值。內容不會被修剪，會呈如今元素框以外。
二、hidden 內容會被修剪，而且其他內容是不可見的，此屬性還有清除浮動、清除margin-top塌陷的功能。
三、scroll 內容會被修剪，可是瀏覽器會顯示滾動條以便查看其他的內容。
四、auto 若是內容被修剪，則瀏覽器會顯示滾動條以便查看其他的內容。
五、inherit 規定應該從父元素繼承 overflow 屬性的值。

(10)塊元素、內聯元素、內聯塊元素

元素就是標籤，佈局中經常使用的有三種標籤，塊元素、內聯元素、內聯塊元素，瞭解這三種元素的特性，才能熟練的進行頁面佈局。

塊元素
塊元素，也能夠稱爲行元素，佈局中經常使用的標籤如：div、p、ul、li、h1~h六、dl、dt、dd等等都是塊元素，它在佈局中的行爲：

支持所有的樣式
若是沒有設置寬度，默認的寬度爲父級寬度100%
盒子佔據一行、即便設置了寬度

內聯元素
內聯元素，也能夠稱爲行內元素，佈局中經常使用的標籤如：a、span、em、b、strong、i等等都是內聯元素，它們在佈局中的行爲：

支持部分樣式（不支持寬、高、margin上下、padding上下）
寬高由內容決定
盒子並在一行
代碼換行，盒子之間會產生間距
子元素是內聯元素，父元素能夠用text-align屬性設置子元素水平對齊方式

解決內聯元素間隙的方法
一、去掉內聯元素之間的換行
二、將內聯元素的父級設置font-size爲0，內聯元素自身再設置font-size

內聯塊元素
內聯塊元素，也叫行內塊元素，是新增的元素類型，現有元素沒有歸於此類別的，img和input元素的行爲相似這種元素，可是也歸類於內聯元素，咱們能夠用display屬性將塊元素或者內聯元素轉化成這種元素。它們在佈局中表現的行爲：

支持所有樣式
若是沒有設置寬高，寬高由內容決定
盒子並在一行
代碼換行，盒子會產生間距
子元素是內聯塊元素，父元素能夠用text-align屬性設置子元素水平對齊方式。

這三種元素，能夠經過display屬性來相互轉化，不過實際開發中，塊元素用得比較多，因此咱們常常把內聯元素轉化爲塊元素，少許轉化爲內聯塊，而要使用內聯元素時，直接使用內聯元素，而不用塊元素轉化了。

display屬性
display屬性是用來設置元素的類型及隱藏的，經常使用的屬性有：
一、none 元素隱藏且不佔位置
二、block 元素以塊元素顯示
三、inline 元素之內聯元素顯示
四、inline-block 元素之內聯塊元素顯示

(11)浮動

浮動特性

一、浮動元素有左浮動(float:left)和右浮動(float:right)兩種

二、浮動的元素會向左或向右浮動，碰到父元素邊界、其餘元素才停下來

三、相鄰浮動的塊元素能夠並在一行，超出父級寬度就換行

四、浮動讓行內元素或塊元素自動轉化爲行內塊元素(此時不會有行內塊元素間隙問題)

五、浮動元素後面沒有浮動的元素會佔據浮動元素的位置，沒有浮動的元素內的文字會避開浮動的元素，造成文字饒圖的效果

六、父元素若是沒有設置尺寸(通常是高度不設置)，父元素內總體浮動的元素沒法撐開父元素，父元素須要清除浮動

七、浮動元素之間沒有垂直margin的合併

清除浮動

父級上增長屬性overflow：hidden
在最後一個子元素的後面加一個空的div，給它樣式屬性 clear:both（不推薦）

使用成熟的清浮動樣式類，clearfix

.clearfix:after,.clearfix:before{ content: "";display: table;}
.clearfix:after{ clear:both;}
.clearfix{zoom:1;}

清除浮動的使用方法：

.con2{... overflow:hidden}
或者
<div class="con2 clearfix">

(12)定位

文檔流
文檔流，是指盒子按照html標籤編寫的順序依次從上到下，從左到右排列，塊元素佔一行，行內元素在一行以內從左到右排列，先寫的先排列，後寫的排在後面，每一個盒子都佔據本身的位置。

關於定位
咱們可使用css的position屬性來設置元素的定位類型，postion的設置項以下：

relative 生成相對定位元素，元素所佔據的文檔流的位置保留，元素自己相對自身原位置進行偏移。
absolute 生成絕對定位元素，元素脫離文檔流，不佔據文檔流的位置，能夠理解爲漂浮在文檔流的上方，相對於上一個設置了定位的父級元素來進行定位，若是找不到，則相對於body元素進行定位。
fixed 生成固定定位元素，元素脫離文檔流，不佔據文檔流的位置，能夠理解爲漂浮在文檔流的上方，相對於瀏覽器窗口進行定位。
static 默認值，沒有定位，元素出如今正常的文檔流中，至關於取消定位屬性或者不設置定位屬性。
inherit 從父元素繼承 position 屬性的值。

定位元素的偏移
定位的元素還須要用left、right、top或者bottom來設置相對於參照元素的偏移值。

定位元素層級
定位元素是浮動的正常的文檔流之上的，能夠用z-index屬性來設置元素的層級

僞代碼以下:

.box01{
    ......
    position:absolute;  /* 設置了絕對定位 */
    left:200px;            /* 相對於參照元素左邊向右偏移200px */
    top:100px;          /* 相對於參照元素頂部向下偏移100px */
    z-index:10          /* 將元素層級設置爲10 */
}

定位元素特性
絕對定位和固定定位的塊元素和行內元素會自動轉化爲行內塊元素

(13)background屬性

屬性解釋
background屬性是css中應用比較多，且比較重要的一個屬性，它是負責給盒子設置背景圖片和背景顏色的，background是一個複合屬性，它能夠分解成以下幾個設置項：

background-color 設置背景顏色
background-image 設置背景圖片地址
background-repeat 設置背景圖片如何重複平鋪
background-position 設置背景圖片的位置
background-attachment 設置背景圖片是固定仍是隨着頁面滾動條滾動

實際應用中，咱們能夠用background屬性將上面全部的設置項放在一塊兒，並且也建議這麼作，這樣作性能更高，並且兼容性更好，好比：「background: #00FF00 url(bgimage.gif) no-repeat left center fixed」，這裏面的「#00ff00」是設置background-color；「url(bgimage.gif)」是設置background-image；「no-repeat」是設置background-repeat；「left center」是設置background-position；「fixed」是設置background-attachment，各個設置項用空格隔開，有的設置項不寫也是能夠的，它會使用默認值。

相關代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test background</title>
    <style type="text/css">
        .backshow{
            width:320px;
            height:160px;
            border:3px solid #333;
            float:left;
            margin:10px;            
        }
        .bg1{background:cyan url(bg.jpg);}
        .bg2{background:cyan url(bg.jpg) repeat-x;}
        .bg3{background:cyan url(bg.jpg) repeat-y;}
        .bg4{background:cyan url(bg.jpg) no-repeat;}
        .bg5{background:cyan url(bg.jpg) no-repeat left center;}
        .bg6{background:cyan url(bg.jpg) no-repeat right center;}
    </style>
</head>
<body>
    <div class="backshow bg1"></div>
    <div class="backshow bg2"></div>
    <div class="backshow bg3"></div>
    <div class="backshow bg4"></div>
    <div class="backshow bg5"></div>
    <div class="backshow bg6"></div>
</body>
</html>

background-position的設置，能夠在水平方向設置「left」、「center」、「right」，在垂直方向設置「top」、「center」、「bottom」，除了設置這些方位詞以外，還能夠設置具體的數值。

對應代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test background</title>
    <style type="text/css">
        .backshow{
            width:320px;
            height:160px;
            border:3px solid #333;
            float:left;
            margin:10px;            
        }        
        .bg{width:94px;
            height:94px;
            border:3px solid #666;
            background:url(location_bg.jpg) -110px -150px;
        }
    </style>
</head>
<body>
    <div class="bg"></div>
</body>
</html>

(14)前端頁面開發流程

一、建立頁面項目目錄

二、使用Photoshop對效果圖切圖，切出網頁製做中須要的小圖片

三、將裝飾類圖像合併，製做成雪碧圖

四、結合Photoshop和代碼編輯器，參照效果圖，進行html和css代碼書寫，製做頁面

(15)經常使用css列表

color 設置文字的顏色，如： color:red;
font-size 設置文字的大小，如：font-size:12px;
font-family 設置文字的字體，如：font-family:'微軟雅黑';
font-style 設置字體是否傾斜，如：font-style:'normal'; 設置不傾斜，font-style:'italic';設置文字傾斜
font-weight 設置文字是否加粗，如：font-weight:bold; 設置加粗 font-weight:normal 設置不加粗
line-height 設置文字的行高，設置行高至關於在每行文字的上下同時加間距，如：line-height:24px;
font 同時設置文字的幾個屬性，寫的順序有兼容問題，建議按照以下順序寫： font：是否加粗字號/行高字體；如： font:normal 12px/36px '微軟雅黑';
text-decoration 設置文字的下劃線，如：text-decoration:none; 將文字下劃線去掉
text-indent 設置文字首行縮進，如：text-indent:24px; 設置文字首行縮進24px
text-align 設置文字水平對齊方式，如text-align:center 設置文字水平居中
text-overflow 設置一行文字寬度超過容器寬度時的顯示方式，如：text-overflow:clip 將多出的文字裁剪掉 text-overflow:ellipsis 將多出的文字顯示成省略號
white-space 通常用來設置文本不換行，如：white-space:nowrap 設置文本不換行通常與text-overflow和overflow屬性配合使用來讓一行文字超出寬度時顯示省略號
list-style 通常用來設置去掉ul或者ol列表中的小圓點或數字如：list-style:none
width 設置盒子內容的寬度，如： width：100px;
height 設置盒子內容的高度，如： height：100px;
border-top 設置盒子頂部邊框的三個屬性如：border-top:5px solid red;設置盒子頂部邊框爲3像素寬的紅色的實線
border-left 設置盒子左邊邊框的三個屬性如：border-left:3px dotted red;設置盒子左邊邊框爲3像素寬的紅色的點線
border-right 設置盒子右邊邊框的三個屬性如：border-right:2px dashed red;設置盒子右邊框爲2像素寬的紅色的虛線
border-bottom 設置盒子底部邊框的三個屬性如：border-bottom:1px solid red;設置盒子底部邊框爲1像素寬的紅色的實線
border 同時設置盒子的四個邊框，若是四個邊的樣式統一就使用它如：border:1px solid #000 設置盒子四個邊都是1像素寬的黑色實線
padding 設置盒子四個邊的內邊距如：padding:10px 20px 30px 40px 分別設置盒子上邊(10px)、右邊(20px)、下邊(30px)、左邊(40px)的內邊距(順時針)
margin 設置盒子四個邊的外邊距如：margin:10px 20px 30px 40px 分別設置盒子上邊(10px)、右邊(20px)、下邊(30px)、左邊(40px)的外邊距(順時針)
overflow 設置當子元素的尺寸超過父元素的尺寸時，盒子及子元素的顯示方式如：overflow:hidden 超出的子元素被裁切
display 設置盒子的顯示類型及隱藏，如：display:block 將盒子設置爲以塊元素顯示 display:none 將元素隱藏，
float 設置元浮動如：float:left 設置左浮動 float:right 設置右浮動
clear 在盒子兩側清除浮動如：clear:both 在盒子兩側都不容許浮動
position 設置元素定位如：position:relative 設置元素相對定位
background 設置元素的背景色和背景圖片，如：background:url(bg.jpg) cyan;設置盒子的背景圖片爲bg.jpg，背景色爲cyan
background-size 設置盒子背景圖的尺寸，如：background-size:30px 40px;設置背景圖的尺寸寬爲30px，高爲40px，這個屬性不能合到background屬性中
opacity 設置元素總體透明度，通常爲了兼容須要加上filter屬性設置如：opacity:0.1;filter:alpha(opacity=10)
cursor 設置鼠標懸停在元素上時指針的形狀如：cursor:pointer 設置爲手型
outline 設置文本輸入框周圍凸顯的藍色的線，通常是設爲沒有如：outline:none
border-radius 設置盒子的圓角如：border-radius:10px 設置盒子的四個角爲10px半徑的圓角
box-shadow 設置盒子的陰影，如：box-shadow:10px 10px 5px 2px pink;設置盒子有粉色的陰影
transition 設置盒子的過渡動畫，如：transition:all 1s ease;設置元素過渡動畫爲1秒完成，全部變更的屬性都作動畫
animation 設置盒子的關鍵幀動畫
transform 設置盒子的位移、旋轉、縮放、斜切等變形，如：transform:rotate(45deg);設置盒子旋轉45度
box-sizing 設置盒子的尺寸計算方式，如：box-sizing:border-box 將盒子的尺寸計算方法設置爲按邊框計算，此時width和height的值就是盒子的實際尺寸
border-collapse 設置表格邊框是否合併，如：border-collapse:collapse，將表格邊框合併，這樣就能夠製做1px邊框的表格。