CSS3學習筆記 上

2021-06-28 14:56:08 字數 3256 閱讀 7518

1、css是什麼?

css是cascadingstylesheets(級聯樣式表)的縮寫。

2、css可以用來做什麼?

css是一種樣式表語言,用於為html文件定義布局。例如,css涉及字型、顏色、邊距、高度、寬度、背景影象、高階定位等方面。

3、css跟html的區別在**?

html用於結構化內容;css用於格式化結構化的內容。

在tim berners-lee發明全球資訊網(world wide web)的那個年代,html語言是唯一用於給文字新增結構的語言。作者可以通過宣告「這是乙個標題」(利用h1標籤)或「這是乙個段落」(利用p標籤)的方式來標記文字。

隨著web逐漸流行起來,網頁設計者們開始尋求為網頁增添布局的可能性。為此,當時的瀏覽器廠商們發明了一些新的html標籤(比如等),以引入了新的布局——而非新的結構。

這也導致了原本用於進行文字的結構化的標籤(比如等)越來越多地被誤用於進行頁面的布局。許多新的布局標籤(比如)只有一種瀏覽器支援。「您需要使用某某瀏覽器來瀏覽本頁面」成為當時常見於許多**的宣告。

css的發明正是為了改善這一狀況,它為web設計師們提供了完善的、所有瀏覽器都支援的布局能力。而且,文件的表現樣式與內容的分離,也令**維護容易了許多。

4、採用css有哪些好處?

css是web設計界的一次革命。css的具體優點包括:

(1)           通過單個樣式表控制多個文件的布局;

(2)           更精確的布局控制;

(3)           為不同的**型別(螢幕、列印等)採取不同的布局;

(4)           無數高階、先進的技巧。

5、css在html中的使用方法

(1)行內樣式表(style屬性);
(2)內部樣式表(style元素)放在頭部;
(3)外部樣式表(引用乙個樣式表檔案)。

詳見:

二、顏色與背景

1、前景色

2、背景顏色

(1)      background-color:transparent;

(2)      background-color:rgb(255,0,0)

(3)      background-color:rgba(255,0,0,0.5)

ps:「a」通道用來設定透明度,為0-1之間的值,0為全透明,1為不透明

(4)      background-color:#ff0000;

3、背景

background-repeat:no-repeat;  /*repeat-x或repeat-y*/

background-attachment:fixed;  /*fixed固定  scroll滾動*/

background-position:center;

三、文字

padding:10px;                                ---邊距

word-spacing :5px;                           ---針對英文,空格距離

letter-spacing :5px;                         ---字元間距

line-height

:2px;                           ---行間距

direction

:ltr;                             ---文字方向:  左至右ltr      右至左rtl

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

text-indent:2em;                             ---文字縮排:em幾倍於文字大小

text-align

:left;                           ---文字對齊: 居中center   兩端對齊justify

text-decoration

:underline overline;        ---文字裝飾: 上劃線overline  刪除線line-through

white-space

:normal;                   ---文字空白處理    格式化pre           不捲繞nowrap 

保留空格回車並捲繞pre-wrap       合併空白保留回車pre-line

四、字型

font-style:       italic斜體    normal正常   oblique傾斜

font-weight:     blod加粗    指定字型顯示的濃淡程度(100-900) 

font-size:        2em;2px;1%   字型大小

font-family:    serif sans-serif  monospace等寬   cursive手寫  fantasfy無法歸類

font-variant:     small-caps以小尺寸顯示的大寫字母來代替小寫字母

五、效果

text-shadow:0px  -1px 0px  #ff0000;

oueline-color:red;

outline-style:

none

:無輪廓。與任何指定的outline-width值無關

dotted

:點狀輪廓。

dashed

:虛線輪廓。

solid

:實線輪廓

double

:雙線輪廓。兩條單線與其間隔的和等於指定的outline-width值

groove

:3d凹槽輪廓

ridge

:3d凸槽輪廓

inset

:3d凹邊輪廓

outset

:3d凸邊輪廓

outline-width:10px;

css3學習筆記

1.為什麼分許多模組進行管理?為了避免產生瀏覽器對於某個模組支援不完全的情況。2.使用元素的class屬性的缺點 第一,class屬性本身沒有語義,褚翠是用來為css樣式服務的,屬於多餘屬性。第二,使用屬性的話,並沒有把樣式與元素繫結起來,針對同乙個class屬性文字框,下拉框,按鈕都可使用。這樣很...

CSS3學習筆記

一.選擇符 二.屬性 溢位隱藏 div4 p文字陰影 text shadow 2px 1px rgba 255,255,255,1 圓角效果 border radius邊框陰影 box shadow 2px 2px 5px 5px inset 內陰影透明度 div for ie8 and earli...

css3學習筆記

1,transition是過度效果,一般是和hover一起用,transition的屬性有height,width常用屬性,在hover裡面就是會覆蓋原來的屬性,屬性由逗號間隔,各個屬性之間沒有先後關係,webkit transition width 2s ease in,height 2s,web...