CSS學習筆記

概念：樣式表是文件的表現，層疊樣式表是把一組樣式在一起層疊使用，控制某乙個或多個html元素。

特點：1.控制頁面中的每乙個元素

2.對html語言處理樣式的最好補充

3.把內容和格式處理相分離，減少工作量

用鑲嵌css控制標記的顯示效果

linux apache mysql

php

定義元素的顏色及字型大小屬性

直接在html元素中使用style屬性宣告樣式

css注釋

例子 /* 注釋內容*/

長度單位

單位解釋

em(front_size:2em)

大致與乙個字元高度相同

px(front_size:12px)

表示畫素的單位

pt(front_size:12pt)

一磅%（front_size:80%)

百分比pc,cm,mm,in

活字，厘公尺，公釐，英吋

顏色單位和url值

顏色位置：color,background-color,border-color

顏色值是乙個關鍵字（aquq,black,blue等）或乙個rgb格式數字

rgb顏色四種形式

#rrggbb(如#00cc00)

#rgb(如#0c0)

rgb(x,x,x) x=0~225

rgb(y%,y%,y%)

指定背景

url(addr)

body

在html文件中放置css的幾種方式

名字用法

內聯樣式表

嵌入一張樣式表

連線到一張外部樣式表

賦予內部或外部樣式表的名字

html選擇器

p

h1

類選擇器

p.dark-row p.light-row /* 定義類的背景顏色*/ /* 引用 */ 第一段 /*用於多個元素的類*/ .note /*同時使用多個類選擇器*/

第一段

id選擇器

#main /*id名稱前需要加稱號*/ /* 使用id屬性匹配id="main"的段落元素*/ 文字縮排 3em

關聯選擇器

table a /**table內連線a改變了樣式/

組合選擇器

h1,h2,h3,h4,h5,h6 /組合選擇器修飾標題/

偽元素選擇器

html 標籤:偽元素

a:link /*超連線沒有動作前的狀態*/ a:hover/*游標移動到超連線上的狀態*/ a:active /*選中超連線的狀態*/

a:visited /*訪問過的超連線狀態*/

css常見的樣式屬性和值

字型屬性

屬性描述

屬性值font-family

字型族科

使用times,serif等任意字型族科，使用多個族科賦值

font-size

字型大小

使用絕對，相對大小，長度，百分比等

font-style

字型風格

normal普通,italic斜體,oblique傾斜

font-weight

字型加粗

normal,bold,bolder,lighter

font-varignt

字型變形

normal,small-caps

p
font:[《字型風格》||《字型變形》||《字型加粗》]?《字型大小》[/《行高》]?《字型族科》
p  /*所有字型屬性一行解決*/

顏色屬性

h1

h2 h3

背景屬性

屬性描述

屬性值background-color

背景顏色

與color值相同，透明為transparent

backgrounp-image

背景影象

url或none

background-repeat

背景重複

repeat,repeat-x,repeat-y,no-repeat

background-attachment

背景附件

scroll(滾動）或fixed（固定）

background-position

背景位置

橫向關鍵字（left,center,right)縱向關鍵字（top,center,botton),百分比長度

background: 《背景顏色》||《背景圖案》||《背景重複》||《背景附件》||《背景位置》
body 
h1 p 
table

屬性

描述屬性值

letter-spacing

字母間隔

必須符合長度格式

word-spacing

文字間隔

必須符合長度格式

text-decoration

文字修飾

uderline(下畫線)，overline(上畫線)，line-through(刪除線)，blink(閃爍),預設為無

text-align

橫向排列

left,right,center,justify

text-indent

文字縮排

必須是乙個長度或百分比

line-height

行高可以接受控制文字基線間隔的值，為數字則為元素乘以該值。百分比值相對於元素字型大小而定，不允許使用負值。

邊框風格屬性

h1 /*設定段落四個邊框為直線式邊框*/

p /*設定段落上下邊框為直線式，左右邊框為雙線式*/

邊框寬度屬性

p

/* border-top-eidth,border-bottom-width,border-left-width,border-right-width*/

邊框顏色屬性

略寫邊框屬性

p border-width,border-style,border-color三屬性

滑鼠游標屬性

p 列表屬性

屬性描述

list-style-type

設定引導列表項的符號型別如：disc,circle,square

list-style-image

使用影象作為定製列表符號

list-style-position

決定列表專案縮排的程式

ul 綜合例項

輸出乙個分類欄目

/*html選擇器為html的body元素新增樣式*/ body /*組合選擇器和偽元素選擇器設定超連線樣式*/ a:link,a:visited /*id選擇器，定義整個欄目容器*/ width: 300px; text-align:left; }/*class選擇器，定義欄目容器中的標題區塊的類選擇器*/ .tit /*關聯選擇器，設定欄目標題區塊中的h3標題*/ .tit h3 /*class選擇器，定義欄目容器中的內容列表區塊的類選擇器*/ .list /*html選擇器，為html列表元素ul設定樣式 ul/*關聯選擇器，為html列表項元素li設定樣式*/ ul li /*關聯選擇器，為列表中的元素中的超連結定義樣式*/ ul a /*設定網頁超連線被訪問時的樣式*/

ul a:hover

CSS學習筆記

CSS學習 CSS學習筆記

CSS學習 CSS學習筆記

CSS 學習筆記

CSS學習筆記

CSS學習 CSS學習筆記

CSS學習 CSS學習筆記

CSS 學習筆記

相關推薦