前端CSS基礎7 8

2022-07-13 07:30:09 字數 1504 閱讀 4046

1、css選擇器:相當於乙個標識,有3種選擇器

第一種選擇器:標籤選擇器 p

第二種選擇器:class選擇器 .c1 可被多次呼叫

第三種選擇器:id選擇器 #d1 獨有

優先順序:標籤注意:乙個標籤可以有多個class,但是只能有乙個id

2、css文字效果:

字型:font-family

字型大小:font-size

顏色:color

粗體:font-weight

下劃線:text-decoration:underline(刪除線:line-through;頂劃線:overline

英文首字母大寫:text-transform:capitalize(全部大寫:uppercase;全部小寫:lowercase)

字母間距:letter-spacing

水平位置:text-align

居中:水平居中:text-align:center

垂直居中:line-height:300px;(和文字所在的div的高度一樣)

3、css繼承性:

#d1 p 表示id為d1的標籤下面的p標籤

#d1,p 表示id等於d1的標籤和p標籤

4、邊框:

樣式 粗細 顏色

border: solid 1px red;

等同於下面3句話:

邊框樣式:border-style:solid;(實線:solid;虛線:dashed;點劃線:dotted)

邊框粗細:border-width:1px;

邊框顏色:border-color:red;

5、背景:

背景顏色:background-color:#00ff00;

背景:background-image:url(路徑);

背景重複:background-repeat:no-repeat;(不重複:no-repeat;橫向重複:repeat-x;縱向重複:repeat-y)

背景方位:background-position:5px 10px;(左邊、上邊)

背景固定:background-attachment:fixed;

綜合:background:blue url(xx.jpg) no-repeat fixed 5px 10px;

6、補充內容:

·table**的css屬性:border-collapse:collapse;(**間隙合併)

常用屬性:width、height、border、cellspacing、cellpadding、bordercolor、bgcolor、align

寬    高    邊框    內框寬   文字到邊框距  邊框顏色      背景色    水平位置

前端CSS基礎

頁面布局要學習三大核心,盒子模型,浮動 和 定位。學習好盒子模型能非常好的幫助我們布局頁面 網頁布局過程 先準備好相關的網頁元素,網頁元素基本都是盒子 box 利用 css 設定好盒子樣式,然後擺放到相應位置。往盒子裡面裝內容 網頁布局的核心本質 就是利用 css 擺盒子 所謂盒子模型 就是把htm...

前端CSS基礎

目錄二 scc 書寫位置 引入方式實戰 三 css注釋管理 四 基本選擇器 重要 五 組合選擇器 重點 六 屬性選擇器 七 分組與巢狀 八 偽類選擇器 一 css 1.什麼是css?css cascading style sheet,層疊樣式表 定義如何顯示html元素。當瀏覽器讀到乙個樣式表,它就...

前端基礎 css筆記

css的四種引入方式 1.行內式 顯示優先順序最高 hello 2.嵌入式3 鏈結式 4.匯入式注意 匯入式會在整個網頁裝載完後再裝載css檔案,因此這就導致了乙個問題,如果網頁比較大則會兒出現先顯示無樣式的頁面,閃爍一下之後,再出現網頁的樣式。這是匯入式固有的乙個缺陷。使用鏈結式時與匯入式不同的是...