CSS 學習筆記

最後更新：2017-08-01 來源：互聯網

上載者：User

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

標籤：header 布局 index 使用多重 ... 賬戶消失 over

CSS 常用協助文檔

CSS：被用來同時控制多重網頁的樣式和布局。
HTML頁面中CSS樣式的寫法有3種：
1：標籤中寫入
　　<body style=‘margin o auto;‘>
2：head頭標籤內
　　<style>
　　　　body { margin:0 auto;}
　　</style>
3：head頭標籤內引入css檔案
　　<link rel=‘stylesheet‘ href=‘commons.css‘ />

優先順序：標籤上的style最高，編寫順序，就近原則

CSS注釋方法：/* ... */

CSS 選取器有以下幾種：
第一種：id選取器(#i1)
　　<標籤 id=‘i1‘>
　　　　#i1{
　　　　　　background-color: #00000;
　　　　　　height: 48px;
　　　　　　}

第二種：class選取器
　　　　<標籤 class=‘c1‘></標籤>
　　　　　　.c1{
　　　　　　　　background-color: #00000;
　　　　　　　　height: 48px;
　　　　　　　　}

第三種: 標籤選取器
　　　　<div></標籤>
　　　　　　div{
　　　　　　　　background-color: #00000;
　　　　　　　　height: 48px;
　　　　　　　　}

第四種：層級模式（可以多個層級）
　　　　<span><div>test</div></span>
　　　　　　span div{ ... } 表示span下的div標籤使用此樣式

　　　　　　.c1 div{...} 表示class為c1下的div標籤

第五種：組合選取器
　　　　<div id=‘i1‘></div>
　　　　<div id=‘i2‘></div>
　　　　<div id=‘i3‘></div>
　　　　　　#i1,#i2,#i3{...}
　　　　　　.c1,.c2,.c3{...}

第六種：屬性選取器，對選擇到的標籤再通過屬性進行一次賽選
　　　　<input type=‘text‘>
　　　　input[type=‘text‘]{width:100px;height:200px;}

以下主要介紹些常用的css樣式

border: 1px solid red; 邊框屬性依次為，邊框寬度，邊框樣式，邊框顏色
height：標籤高度
width：標籤寬度（像素，百分比）
min-height 設定元素的最小高度。
min-width 設定元素的最小寬度。
line-height：垂直方向根據標籤高度置中
text-aligh：center水平方向置中
color：字型顏色
font-size：字型大小
font-weight：字型加粗

float：標籤進行漂移，也就是塊級標籤堆疊，（left 左漂，right 右漂），注意：如果將父級覆蓋，則在最後使用參數：<style=‘clear:both;‘>

display：選擇性參數如下
　　- block：將內聯標籤轉換為塊級標籤
　　-inline：將塊級標籤轉換為內聯標籤
　　- inline-block：同時具有塊級標籤和內聯標籤的屬性。（內聯標籤不具有padding,margin,高，寬等屬性設定）
　　-none：設定此屬性的標籤消失

padding：內邊距,元素邊框與元素內容之間的空間
margin：外邊距，定義元素周圍的空間，div整體置中（0,auto）

position：元素定位，參數如下
　　- fixed：固定元素在遊覽器視窗的指定位置，不隨頁面的滾動而移動。舉例：（position:fixed,top:0,left:0,right:0)
　　- relative + absolute：這2個元素要一起使用，二者之間是相對定位
　　- Relative 定位：相對定位元素的定位是相對其正常位置。
　　- Absolute 定位：絕對位置的元素的位置相對於最近的已定位父元素，如果元素沒有已定位的父元素，那麼它的位置相對於<html>

舉例：

　　<div style=‘position:relative;‘>
　　　　<div style=‘position:absolute;top:0,left:0;‘></div>
　　</div>
　　這裡absolute的位置是相對於relative標籤的位置周邊定位

opcity：透明度，取值範圍（0 - 1）

z-index：層級順序，要結合opcity進行透明度設定。
2層寫法舉例：
　　<div style=‘z-index:10;position:fixed;top:50px;left:100px;background-color:white;‘>
　　# 這裡在引入一層，需要通過z-index:10值的高低來確定優先度，數字越大越在最上層。
　　<div style=‘z-index:9;position:fixed;background-color:black;top:0,bottom:0;right:0;left;0;opacity:0.5;></div> # 這個就是設定透明度(1就完全覆蓋）
　　<div style=‘height:5000px;background-color:green;‘>sdf</div>

overflow：設定當元素的內容溢出其地區時發生的事情,參數如下
　　- auto：當圖片大小超過設定的大小，則在設定的範圍出現滑輪。
　　- hidden：當圖片大小超過設定的大小，則只顯示設定大小的視窗。

hover：當滑鼠移動到當前標籤上時，以下css屬性才生效，
　　寫法：.pg-header .menu:hover{ background-color:blue}

background-image：背景映像。body {background-image:url(‘paper.gif‘);}
background-color：背景顏色，使用在body。 body {background-color:#b0c4de;}
background-repeat：背景映像增加方式，參數如下：
　　- repeat-x：只橫向增加
　　- repeat-y：只縱向增加
　　- no-repeat：不堆疊

background-position：改變映像在背景中的位置，如：background-position:10px,10px；
執行個體：賬戶輸入框內最右側增加使用者名稱的圖片
　　<div style=‘height:35px;width:400px;position;relative;‘>
　　　　<input type=‘text‘ style=‘height:35px;width:370px;padding-right:30px;‘>
　　　　<span style=‘position:absolute;right:6px;top:10px;background-image:url(i_name.jpg);height:16px;width:16px;display:inline-block;‘></span>
　　</div>

技巧：
1：CSS重用功能
　　<style>
　　　　.c{ 共有}
　　　　.c1{ 專屬}
　　　　.c2{ 專屬}
　　</style>
　　<div class=‘c,c1‘></div>
　　<div class=‘c,c2‘></div>
2：預設圖片的外邊框是1px，去掉：img:{broder:0}

舉例：常用頁面的布局
1：主站的布局

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