css之基礎及布局屬性

最後更新：2017-06-18 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：idg add head class選取器包含定義類 font 檔案夾 style

css之基礎及布局屬性

1.CSS三種關聯方式

行間樣式
　　如<p style=”color:#f00” >divcss8</p>
內聯表方式　　

　　(1):先在<head></head>之間加上<style>*********樣式***********</style>

　　(2):html裡面採用選取器調用所有的樣式;

　　<head>

　　<style>
　　　　div{color:red font-weight:hold}
　　</style>
　　</head>
　　<div></div>

　　外聯表方式

外聯表的原則：結構（html）與表現（css）進行分離
在css檔案夾裡建立檔案，寫樣式,在原html檔案中寫<link href=“css/css.css”rel=“stylesheet” type=“text/css”> (放在head裡面)

2.常用樣式選取器

html標記符選取器：選擇原頁面上的元素；在css樣式中 div{color:red; border:1px solid #000; width:200px;height:200px;}
有上下文關係的定義：div p{color:blue；}
選擇定義類（class）選取器：.body{color:yellow}
id選取器：只能唯一存在；#top{color:pink}

盒子四大元素：content(內容)，margin(外邊距)，padding(內填充)，border(邊框)

--------------------------選取器( css有就近原則)-------------------------------

　　選取器名稱在css表的形態在html中的調用

html標記符選取器： p,a,img,div,span.... 不用另外加任何東西
具有上下關係的選取器: div span a (中間是空格) 不用另外加任何東西
類（class）選取器： . ( 比如: .header) <div class="header "></div>
id選取器（一般不用id，留給js來操作） # ( 比如: #text ) <div id="text "></div>
群組選取器 (最佳化代碼) .left , .right , p , ul , li
偽類別選取器（選取器上加上：hover） a:hover{color:#ccc}

選取器的優先順序: 行間 > id選取器 > class選取器 > 標記符選取器

3.盒子模型之外邊距（margin)

　　框邊界屬性
　　1、margin-bottom:底邊距 margin-left:左邊距 margin-right:右邊距 margin-top:上邊距

---------------------margin(外邊距)-------------------------

margin:1數字------上右下左 margin:10px;

2數字------上下左右 margin:10px 10px;

3數字------上左右下 margin:10px 10px 10px;

4數字------上右下左 margin:10px 10px 10px 10px;

　　這四個屬性用來設定元素與其相鄰元素間的距離。
　　2、margin功能：簡寫屬性，
　　用於設定元素的所有邊界。這是用於描述元素的內容的邊緣到框邊緣的距離的。

4.盒子模型之內填充（padding）
　　框填充屬性
　　1、padding-bottom padding-left padding-top padding-right
　　功能：毎個容器都有邊框，這些屬性設定邊框與框內元素間的距離

　　用法同margin.

---------------------padding(內邊距/內填充)------------------------- padding:縮寫與外邊距一樣;

注意:使用了padding之後,要減去寬高的值;

5.盒子模型之邊框（border）
　　框邊框屬性
　　1、border-top border-bottom border-right border-left
　　功能：這四個屬性都是簡寫屬性，分別設定上，下，右，左的邊框屬性。缺少情況下，邊框沒有樣式設定。
　　包含的數值：共有三個邊框屬性：border{1px solid red;} border:寬度線的樣式顏色;----------屬性沒寫完敲空格;

　　
　　2、border-color:功能：簡寫屬性，設定四個邊框的顏色值。
　　數值：可以用顏色名或RGB值。
　　如果指定單個顏色，則四個邊框都顯示為這個顏色；
　　如果指定兩個顏色，則順序為上下，左右；
　　如果指定三種顏色，則順序為上，左右，下；
　　如果指定四種顏色，則順序為上，右，下，左。　　

　　3、border-width:邊框的寬度指定長度。

　　功能：簡寫屬性，可同時設定四個邊框的寬度。

　　數值：thin -細邊框。 medium -中等線寬。 thick -粗線。

　　長度 -用相對或絕對單位設定邊框寬度

border-top-width border-bottom-width border-right-width border-left-width功能：分別設定各個邊框的厚度。

　　4、border-style:設定用於修飾邊框的底紋。可以設定下列樣式：

　　　　none -不顯示邊框，為預設值　　　　dotted -點線
　　　　dashed -虛線
　　　　solid -實線
　　　　double -雙線
　　　　groove - 3D陷入線
　　　　ridge - 3D山脊狀線
　　　　inset -使頁面有沉入感
　　　　outset -使頁面有浮出感

6.浮動（float）

　　功能：用於在普通元素流布置規則以外放上元素。
　　數值： none -無改動。
　　　　　left -將其它元素內容放到浮動元素右邊。
　　　　 right -將其它元素內容放到浮動元素左邊

---------------------float(浮動)-------------------------

為什麼要清除浮動????

浮動帶來的負面影響:會使父級對象的高度消失,導致背景圖片,邊框不能正常顯示,margin,padding設定值不能正確顯示（特別是上下邊的padding和margin不能正確顯示）;

清除浮動的三種方式:( 1 ):直接給父級確定的高度; (項目中的擴充,不現實 )

　　　　　　　　 ( 2 ):在父級的css裡直接加上 overflow:hidden; 但是不能和height同時出現; overflow:hidden;和height同時出現(功能:超出部分被隱藏; )

　　　　　　　　 ( 3 ):a:在css裡面 .***{ clear:both;} b:在父級結束之前新添 <div class="***"></div>

　　　　　　　　　　　　<div>

　　　　　　　　　　　　</div>

css之基礎及布局屬性

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

css之基礎及布局屬性

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support