CSS 筆記整理（一）

2021-10-24 19:00:56 字數 2114 閱讀 5851

布局這一塊可以學習flex 布局

（1）id選擇器和class(類)選擇器

1-1： id 選擇器以 "#" 來定義

#xx
1-2: 類選擇器以乙個點"."號顯示

.center
（2）background（背景）

2-1： background-color： 背景顏色

body
body
2-3： background-repeat： 設定定位與不平鋪

body
2-4： background-attachment：背景影象是否固定或者隨著頁面的其餘部分滾動

body
2-5： background-position：設定背景影象的起始位置

body
(2) 文字

/*  文字顏色 */


h1 /*


文字對齊方式, 當text-align設定為"justify"，


每一行被展開為寬度相等，左，右外邊距是對齊


*/ h2 


p.main 


/* text-decoration 屬性用來設定或刪除文字的裝飾


*/a
文字轉換**：



this is some text


this is some text


this is some text
(3) 字型

3-1:  設定字型大小畫素

h1 


p
3-2： 用em來設定字型大小，1em的預設大小是16px

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元素的黑色邊框。

table, th, td
6-2： 摺疊邊框

border-collapse 屬性設定**的邊框是否被摺疊成乙個單一的邊框或隔開

table


table,th, td
6-3： **寬度和高度

width和height屬性定義**的寬度和高度，下面的例子是設定100％的寬度，50畫素的th元素的高度的**。

table 


th
6-4 **文字對齊

td
6-5: **填充

td
6-6: **顏色

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...