第二天H5進階(Css)
css介紹
1. css是什麼
CSS 指層疊樣式表 (Cascading Style Sheets)
樣式定義如何顯示 HTML 元素
樣式通常儲存在樣式表中
把樣式新增到 HTML 4.0 中，是為了解決內容與表現分離的問題
外部樣式表可以極大提高工作效率
外部樣式表通常儲存在 CSS 檔案中
多個樣式定義可層疊為一
2. css作用
1. 樣式表解決了html的內容與表現分離
2. 使用樣式表極大的提高了工作效率。
3. css書寫規則
基本語法 Css規則主要由兩部分組成
1.選擇器2.一條或多條宣告
選擇器主要作用是為了確定需要改變樣式的HTML元素
每一條宣告由一個屬性和一個值組成，使用花括號來包圍宣告，屬性與值之間使用冒號(:)分開
如圖:
值的單位
書寫注意事項
1. 如果值為若干單詞，則要給值加引號
2. 多個宣告之間使用分號(;)分開
3. css對大小寫不敏感,如果涉及到與html文件一起使用時，class與id名稱對大小寫敏感
匯入CSS
1.內聯樣式表
要使用內聯樣式，你需要在相關的標籤內使用樣式（style）屬性。Style屬性可以包含任何 CSS屬性
例如:<div style=”border:1px solid black”>這是一個DIV</div>
注意:慎用這種方式，它將內容與顯示混合在一起，損失了樣式表的優勢。一般情況下，這種方式只有在一個標籤上只應用一次樣式時才會使用
2.內部樣式表
我們可以使用<style>標籤在html文件的<head>中來定義樣式表。
例如:
這種方式，樣式只適合應用於一個頁面
3.外部樣式表
如果想要在多個頁面使用同一個樣式表，可以使用外部樣式表來匯入。
我們可以在html頁面上使用<link>標籤來匯入外部樣式表。
例如:
瀏覽器會從mystyle.css檔案中讀取樣式，並對頁面上的html進行修飾。
外部樣式表，應該以
下面是mystyle.css檔案的內容:
@import匯入
這種方式也是外部匯入。
使用方式如下：
關於@import與引用外部樣式表的區別:
1. @import這種方式只有firefox支援，而ie不支援。
[email protected]這種方式匯入的css，會在整個頁面載入後，才會載入樣式。如果網路不好情況下，會先看到無樣式修飾的頁面，閃爍一下後，才會看到有樣式修飾的頁面。
而使用外部樣式表，會先裝載樣式表，這樣看到的就是有樣式修飾的頁面。
優先順序問題
內聯樣式表>內部樣式表>外部樣式表
css選擇器
css選擇器主要是用於選擇需要新增樣式的html元素。
對於css來說，它的選擇器有很多，我們主要介紹以下幾種:
1.id選擇器
Id選擇器使用#引入，它引用的是id屬性中的值。
2.類選擇器
類選擇器使用時,需要在類名前加一個點號(.)
3.元素選擇器
這是最常見的選擇器，簡單說，文件中的元素就是選擇器
4.屬性選擇器
如果需要選擇有某個屬性的元素，而不論屬性是什麼，可以使用屬性選擇器
5.複合選擇選擇器（交集選擇器）：
作用：可以選中同時滿足多個條件的元素
語法：選擇器1選擇器2選擇3{}
例子：
- 會選中頁面中所有的class屬性值為p的div元素
6.選擇器的分組（並集選擇器）：
作用：可以選中多個選擇器對應的元素
語法：選擇器1,選擇器2,選擇3{}
- 會選中頁面中的所有的div和所有的class屬性值為d的元素和所有的p元素
7.通配選擇器
作用：選擇頁面中的所有元素
語法：*{}
注意：通配選擇器效能比較差，儘量避免使用
偽類
css偽類用於向某些選擇器新增特殊效果。
下面我們介紹一下錨偽類。
在支援css的瀏覽器中，連結的不同狀態都可以不同的方式顯示，這些狀態包括：活動狀態，已被訪問狀態，未被訪問狀態，和滑鼠懸念狀態。
css屬性
字型
Css字型屬性定義文字的字體系列，大小，加粗，風格(如斜體)和變形(如小型大寫字母)
常用屬性: font:簡寫屬性，作用是把所有針對字型的屬性設定在一個宣告中。
font-family:定義字體系列
font-size:定義字型的尺寸
font-style:定義字型風格
文字
CSS 文字屬性可定義文字的外觀。通過文字屬性，您可以改變文字的顏色、字元間距，對齊文字，裝飾文字，對文字進行縮排，等等。
常用屬性
color:定義文字顏色
text-align:定義文字對齊方式
letter-spacing:定義字元間隔
word-spacing:定義字間隔
背景
CSS 允許應用純色作為背景，也允許使用背景影象建立相當複雜的效果。CSS在這方面的能力遠遠在 HTML之上。
常用屬性:
background:簡寫屬性，作用是將背景屬性設定在一個宣告中
background-color:定義背景顏色
background-image:定義背景圖片
background-position:定義背景圖片的起始位置
background-repeat:定義背景圖片是否及如何重複。
尺寸
CSS 尺寸 (Dimension) 屬性允許你控制元素的高度和寬度。
常用屬性:
width:設定元素的寬度
height:設定元素的高度
列表
CSS 列表屬性允許你放置、改變列表項標誌，或者將影象作為列表項標誌。
常用屬性:
list-style:簡寫屬性。用於把所有用於列表的屬性設置於一個宣告中。
list-style-image:定義列表項標誌為圖象
list-style-position:定義列表項標誌的位置
list-style-type:定義列表項標誌的型別。
表格
CSS 表格屬性可以幫助您極大地改善表格的外觀
常用屬性:
border-collapse:定義是否把表格邊框合併為單一的邊框。
border-spacing:定義分隔單元格邊框的距離
caption-side:定義表格標題的位置
輪廓
輪廓（outline）是繪製於元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的作用。
CSS outline 屬性規定元素輪廓的樣式、顏色和寬度。
常用屬性:
outline:在一個宣告中設定所有的輪廓屬性
outline-color:定義輪廓的顏色
outline-style:定義輪廓的樣式
outline-width:定義輪廓的寬度
定位
CSS 定位 (Positioning)屬性允許你對元素進行定位。
定位的基本思想很簡單，它允許你定義元素框相對於其正常位置應該出現的位置，或者相對於父元素、另一個元素甚至瀏覽器視窗本身的位置
CSS 有三種基本的定位機制：普通流、浮動和絕對定位。
常用屬性:
position:把元素放置到一個靜態的,相對的，絕對的，或固定的位置中。
top:定義了定位元素的上外邊距邊界與其包含塊上邊界之間的偏移量
right: 定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移
left: 定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移
bottom: 定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移。
分類
CSS 分類屬性允許你控制如何顯示元素，設定影象顯示於另一元素中的何處，相對於其正常位置來定位元素，使用絕對值來定位元素，以及元素的可見度。
常用屬性
clear:設定一個元素的側面是否允許其它的浮動元素
float:定義元素在哪個方向浮動
cursor:當指向某元素之上時顯示的指標型別
display:定義是否及如何顯示元素
visibility:定義元素是否可見或不可見。
CSS框模型
盒子模型
CSS 框模型 (Box Model) 規定了元素框處理元素內容、內邊距、邊框 和外邊距 的方式。
元素框的最內部分是實際的內容，直接包圍內容的是內邊距。內邊距呈現了元素的背景。內邊距的邊緣是邊框。邊框以外是外邊距，外邊距預設是透明的，因此不會遮擋其後的任何元素
邊框
元素的邊框 (border)是圍繞元素內容和內邊距的一條或多條線。
CSS border 屬性允許你規定元素邊框的樣式、寬度和顏色。
常用屬性:
border:簡寫屬性，用於把針對於四個邊的屬性設定在一個宣告。
border-color:簡寫屬性，定義元素邊框中可見部分的顏色，或為四個邊分別設定顏色。
border-style:用於定義所有邊框的樣式，或者單獨為各邊設定邊框樣式。
border-width:簡寫屬性，用於為元素的所有邊框設定寬度，或則單獨地為各邊邊框設定寬度
border-top:簡寫屬性，用於把上邊框的所有屬性設定到一個宣告中
border-right:簡寫屬性，用於把右邊框所有屬性設定到一個宣告中
border-bottom:簡寫屬性，用於把下邊框的所有屬性設定到一個宣告中
border-left:簡寫屬性，用於把左邊框的所有屬性設定到一個宣告中。
外邊距
圍繞在元素邊框的空白區域是外邊距。設定外邊距會在元素外建立額外的“空白”。
設定外邊距的最簡單的方法就是使用 margin屬性，這個屬性接受任何長度單位、百分數值甚至負值。
常用屬性:
margin:簡寫屬性，在一個宣告中設定所有外邊距屬性
margin-top:定義元素的上外邊距
margin-right:定義元素的右外邊距
margin-bottom:定義元素的下外邊距
margin-left定義元素的左外邊距
注意:在使用margin來定義所有外邊距時，可以使用值複製。
如果缺少左外邊距的值，則使用右外邊距的值。
如果缺少下外邊距的值，則使用上外邊距的值。
如果缺少右外邊距的值，則使用上外邊距的值。
內邊距
元素的內邊距在邊框和內容區之間。控制該區域最簡單的屬性是 padding 屬性。
CSS padding 屬性定義元素邊框與元素內容之間的空白區域。
常用屬性:
padding:簡寫屬性，作用是在一個宣告中設定元素的所有內邊距屬性
padding-top:定義元素的上內邊距
padding-right:定義元素的右內邊距
padding-bottom:定義元素的下內邊距
padding-left:定義元素的左內邊距。
相關推薦
第二天H5進階(Css)
css介紹 1. css是什麼 CSS 指層疊樣式表 (Cascading Style Sheets) 樣式定義如何顯示 HTML 元素 樣式通常儲存在樣式表中 把樣式新增到 HTML 4.0 中，是為了解決內容與表現分離的問題 外部樣式表可以
巨蟒python全棧開發-第10天 函式進階
一.今日主要內容總覽(重點) 1.動態傳參(重點) *,** *: 形參:聚合 位置引數*=>元組 關鍵字**=>字典 實參:打散 列表,字串,元組=>* 字典=&g
python就業班第25天----jquery進階
jquery動畫效果： 淡入：fadeIn() 淡出：fadeOut() 切換淡入淡出：fadeToggle() toggle：切換的意思 fade：逐漸消失，褪色的意思 顯示元素：show() 隱藏元素：hide() 切換元素可見狀態：toggle()
Kotlin詳解:第二章，進階
一，高階函式 1，基本概念：將函式作為引數或返回一個函式，稱為高階函式，常用的高階函式如下。 ①，forEach函式，用於遍歷集合 fun main(args: Array<String>): Unit { val list : List<String
第十天函式進階
---恢復內容開始--- 一 名稱空間： 全域性名稱空間：在定義函式和變數的時候會生成一個全域性名稱空間，在程式從上到下被執行的過程中被一次載入進記憶體。 例如：我們曾經定義過的函式名或變數名稱。 區域性名稱空間：就是函式內部定義的名稱。在函式呼叫過程中才會被放到記憶體中 內建名
ZeroMQ 中文指南 第二章 ZeroMQ進階【轉載】
作者資訊如下。 ZMQ 指南 作者: Pieter Hintjens [email protected], CEO iMatix Corporation. 翻譯: 張吉 [email protected], 安居客集團 好租網工
Linux入門進階第二天——軟件安裝管理（上）
軟件包 軟件安裝 alt dpkg 代碼包 mage 進階 部分 images 一、大綱介紹 二、簡介 軟件包分類： 源碼包： 二進制包：（源碼包編譯後的包，將不能再看到源代碼） MySQL PhP等開發環境的搭
Python初學者第二十三天 函數進階（2）裝飾器
分享 username 執行 ... ret 傳參 als print n) 23day 裝飾器： 1、用戶不執行前不調用函數，在調用的時候再執行函數 a、傳函數時不加參數 user_status = False # 用戶登錄了就把這個改成True def login(
Java進階學習第二十三天（Spring框架：代理模式、AOP程式設計、jdbc支援）
一、共性問題 1、伺服器啟動報錯，什麼原因？ ① jar包缺少或者jar包衝突 ◆ 先檢查專案中是否缺少jar包引用 ◆ 伺服器：檢查jar包有沒有釋出到伺服器下；使用者庫jar包，需要手動釋出到tomcat（每次新建專案） ◆ 重新發布專案 ② 配置檔案錯誤（
Java進階學習第二十四天（Spring框架：事務管理、Spring與Hibernate整合）
一、事務控制 1、引入 使用者訪問 > Action > Service > Dao 如何保證： 在service中呼叫2次dao，其中一個dao執行失敗，整個操作要回滾 2、事務控制概述 ① 程式設計式事務控制：自己手動控制事務 Jdbc程式
Java進階學習第二十六天（JavaScript增強、AJAX基礎）
一、JavaScript增強 1、什麼是JavaScript ① 基於物件 JS本身就有一些現成的物件可供程式設計師使用，例如：Array、Math、String ② 事件驅動 JS程式碼寫好後，需要外界觸發後，方可執行，例如：單擊事件，定時執行 ③ 解釋性 每
Java進階學習第二十六天（JSON基礎、jQuery基礎）
一、JSON基礎 1、JSON的定義 ① JSON（Java Script Object Notation）是一種輕量級的資料交換語言，以文字字串為基礎，且易於讓人閱讀 注意：XML就是一個重量級的資料交換語言 ② JSON採用完全獨立於任何程式語言的文字格式，
Linux進階第二天
刷新 英文 change 查看文本 字符 工作目錄 其他 都是 bdc 工作目錄切換命令： 17.pwd命令pwd命令用於顯示用戶當前所處的工作目錄，格式為“pwd [選項]” 18.cd命令cd命令用於切換工作路徑，格式為“cd [目錄名稱]”這個命令應該是最常用的一個
CSS進階之路
模式 ant 表格 weight mil 比較 標題 根據 amp 下面主要引用http://www.cnblogs.com/wangfupeng1988/tag/css知多少/ CSS進階筆記： 一、學習CSS的三個突破點 1.瀏覽器如何加載和解析CSS——CSS的5個來
php高級進階系列文章--第二篇（PHP基礎知識復習）
new val 大小寫 包括 所在 復習 part option ogl php基礎知識復習 本文中對於簡單的知識點只會提及一下（例如什麽控制結構什麽的），對於較有難度的詳細復習下（例如面向對象的反射等等） 再次申明，本系列文章不是從最基礎的開始復習，對於零基礎的可能不適用
CSS進階之模擬Bootstrap網格布局
源代碼 div adding 分享 yellow doc right http media 目前暫時實現效果，容後面整理心得，先貼上源代碼。 <!DOCTYPE html> <html> <head> <title>
我的進階--css3 第二章 為了移動端
可能 表單 郵箱地址 fresh text 時間間隔 ria 手機瀏覽器 port meta 當服務器向瀏覽器發送文檔時，會先發送許多名稱/值對。雖然有些服務器會發送許多這種名稱/值對，但是所有服務器都至少要發送一個：content-type:text/html。這將告
Python基礎-第七天-面向對象編程進階和Socket編程簡介
python本篇內容：1.面向對象編程進階-靜態方法2.面向對象編程進階-類方法3.面向對象編程進階-屬性方法4.面向對象編程進階-特殊成員（內置方法）5.面向對象編程進階-反射6.異常處理、斷言7.Socket編程簡介一、面向對象編程進階-靜態方法1.靜態方法的實現通過@staticmethod裝飾器可以把
Python基礎 - 第八天 - Socket編程進階
python本篇內容：1.解決socket粘包問題2.通過socket傳輸大數據3.socketserver的使用一、解決socket粘包問題1.粘包現象怎麽出現的粘包是通過socket傳輸數據時不可避免的問題，也是我們要註意的問題。當上次發送的數據和本次發送的數據是通過一次發送動作發送出去的，這樣就出現了粘
深入理解javascript函數進階系列第二篇——函數柯裏化
計算 all urn ray body turn () 通過 null 前面的話 函數柯裏化currying的概念最早由俄國數學家Moses Schönfinkel發明，而後由著名的數理邏輯學家Haskell Curry將其豐富和發展，currying由此得