Web前端認識day 04(關於css的學習筆記)

2021-10-23 19:32:10 字數 2258 閱讀 1481

css學習筆記

css的基本概念

選擇器標籤:

…之類的標籤 使用方法:直接輸入標籤名

類:class名字 使用方法:輸入點+class名

id:id名 使用方法:輸入#+id名

一般來說我們寫css檔案的時候用的都是第二種方法,class名

這是因為id名一般被用作js的選擇器

給class命名也是有規範的,像***-***x 這樣做的好處是讓你的**更清晰

別人也更容易看懂

三種連線方式

行內樣式(內嵌樣式)

直接寫在標籤裡,使用style屬性,只對當前標籤有效,頁面內容和表現形式是高度耦合的,不利於分工合作

內部樣式(內聯樣式):

內聯樣式是在head部分使用

rel 屬性用於指定當前文件與被鏈結文件的關係 字型相關屬性 text-align(對齊方式):center(居中)/left(靠左)/right(靠右) font-size(字型大小):56px/24px /xxpx font-family(字型體系):「黑體」/「幼圓」 font-style(是否傾斜): italic(傾斜)/normal(正常) font-weight(字型粗細):100/200/normal(400)/bold(700)/bolder font-variant(是否大寫):normal/small-caps(小型大寫) color(字型顏色):blue/red/pink/black/green/#ffffff/#f6f6f6 text-decoration: none(預設格式,無)/underline(下劃線)/overline(上劃線)/line-through direction(文字方向): ltr(left to right從左到右)/rtl(right to left從右到左) text-transform(大小寫): none(預設)/capitalize(首字母大寫)/uppercase(全部大寫)/lowercase(全部小寫) line-height(行高): normal/xx px letter-spacing(字元間距): 2px/5px /***px word-spacing(單詞間距):normal/2px/5px/***px

字型屬性

屬性 含義 取值

font-family 字型體系 字型名稱,如宋體

font-size 字型大小

font-style 是否傾斜 normal/italic/oblique/inherit(繼承)

font-variant 是否大寫 normal/small-caps/inherit

font-weight 字型粗細 normal(400)/bold(700)/bolder/lighter

100/200/300……900

可以簡寫,書寫順序

font-style font-variant font-weight font-size font-family

前面三個可預設,使用預設值,font-size和font-family必須指定值。

這種書寫方式更加簡潔

文字相關屬性

文字相關屬性主要包括顏色、對齊方式、修飾效果等。

color:設定文字的顏色

text-decoration:

none:預設值,沒有裝飾效果

underline:加下劃線

overline:加上劃線

line-through:加刪除線

direction:

ltr:自左至右;rtl:自右至左

text-align:文字對齊方式

left 左對齊

right 右對齊

center 居中對齊

text-indent:首行縮排

letter-spacing:字母之間的間距

word-spacing:字(單詞)間距

line-height:設定行高,實際上是調整行間距

案例1:

《望月懷遠》

海上生明月,天涯共此時。/大小24px 字型偕體,靠左

情人怨遙夜,竟夕起相思。/顏色紅色,靠右

滅燭憐光滿,披衣覺露滋。/左半句靠左,右半句靠右

不堪盈手贈,還寢夢佳期。/大小30px 顏色藍色 字型幼圓 居中

案例2:

我是江西小霸王

江西這邊我最狂

要說江西誰最帥

還得江西小霸王

行高5px

自己想乙個題目,標籤h1

第一句黑體,紅色

第二句加刪除線

第三句加上、下劃線 從「西」處斷開,分為「要說江西」 「誰最帥」 間距50px

第四句單詞間距10px

前端學習 Day04

css cascading style sheet 層疊樣式表1.標籤 之類的標籤 使用方式 直接輸入標籤名 2.類 class class名字 使用方式 輸入點 class名 3.id id 名 使用方式 輸入 id名 一般來說我們寫css檔案的時候用的是第二種選擇器,class名 這是因為id名...

標準C語言day04

陣列 什麼是陣列 變數的組合,是一種批量定義變數的方式。定義 型別 陣列名 數量 int arr 5 使用 陣列名 下標 下標 從零開始,範圍 0 數量 1。遍歷 與for迴圈配合,使用迴圈變數i當作陣列的下標。初始化 型別 陣列名 數量 1 陣列與普通變數一樣預設值是隨機的,為了安全要對進行初始化...

Day 04 鍊錶複習 web基礎介紹

1 增加用頭插法可以避免尾插法中第一次沒有記憶體的情況 2 普通的刪除需要區分是不是頭結點,因為頭結點沒有父節點,所以給鍊錶加乙個空的父節點,public class list public void del int value else 無論flag需不需要刪除,都要向後繼續尋找,flag到下乙個...