布局這一塊可以學習flex 布局
(1)id選擇器和class(類)選擇器
1-1: id 選擇器以 "#" 來定義
1-2: 類選擇器以乙個點"."號顯示#xx
.center
(2)background(背景)
2-1: background-color: 背景顏色
body
body
2-3: background-repeat: 設定定位與不平鋪
2-4: background-attachment:背景影象是否固定或者隨著頁面的其餘部分滾動body
body
2-5: background-position:設定背景影象的起始位置
(2) 文字body
文字轉換**:/* 文字顏色 */
h1 /*
文字對齊方式, 當text-align設定為"justify",
每一行被展開為寬度相等,左,右外邊距是對齊
*/ h2
p.main
/* text-decoration 屬性用來設定或刪除文字的裝飾
*/a
(3) 字型
this is some text
this is some text
this is some text
3-1: 設定字型大小畫素
3-2: 用em來設定字型大小,1em的預設大小是16pxh1
p
h1
3-2: 設定百分比
body
(4)鏈結
鏈結的樣式,可以用任何css屬性(如顏色,字型,背景等)
這是乙個鏈結
注意:a:hover 必須在 a:link 和 a:visited 之後,需要嚴格按順序才能看到效果。
注意:a:active 必須在 a:hover 之後。
(5)列表
在 html中,有兩種型別的列表:
使用 css,可以列出進一步的樣式,並可用影象作列表項標記。
(6)**
無序列表例項:
有序列表例項:咖啡茶
可樂長沙
深圳湘潭
6-1: **邊框
指定css**邊框,使用border屬性,下面的例子指定了乙個**的th和td元素的黑色邊框。
6-2: 摺疊邊框table, th, td
border-collapse 屬性設定**的邊框是否被摺疊成乙個單一的邊框或隔開
6-3: **寬度和高度table
table,th, td
width和height屬性定義**的寬度和高度,下面的例子是設定100%的寬度,50畫素的th元素的高度的**。
6-4 **文字對齊table
th
6-5: **填充td
6-6: **顏色td
table, td, th
th
知了堂學習筆記 CSS樣式整理(一)
height width 在height width屬性中使用 值,需要對包含它的塊級物件設定寬高,否則height width屬性設定無效。因為 是基於包含它的塊級物件的百分比高度。無效 有效 paading margin 1.使用paading margin外補白在已知單個子元素寬高情況下實現居...
CSS學習知識整理(一)Css 布局
overflow屬性有以下值 值描述 visible 預設值。內容不會被修剪,會呈現在元素框之外。hidden 內容會被修剪,並且其餘內容是不可見的。scroll 內容會被修剪,但是瀏覽器會顯示滾動條以便檢視其餘的內容。auto 如果內容被修剪,則瀏覽器會顯示滾動條以便檢視其餘的內容。inherit...
css3 flex筆記整理
flex 是 flexible box 的縮寫,意為 彈性布局 用來為盒狀模型提供最大的靈活性。採用 flex 布局的元素,稱為flex 容器 flex container 簡稱 容器 它的所有子元素自動成為容器成員,稱為 flex 專案 flex item 簡稱 專案 一 容器的屬性 flex d...