程式猿學習第四天,初級CSS預習

2021-08-01 09:15:25 字數 2320 閱讀 6510

css作用:

css全稱:層疊樣式表(cascading style sheet)通稱風格樣式表(style sheet),主要用於對網頁的風格和樣式進行設計。

通過設立css樣式表,可以統一地控制html中各標籤的顯示屬性。

優勢:

內容與表現分離,css樣式表單可以單獨存放在乙個檔案中,便於維護。

表現統一,統一**表現和設定,後期容易修改。

樣式豐富,布局更靈活。

減少網頁**量:不需要在每個需要設定的樣式的表現都書寫大量重複性**,先期寫網頁和後期維護都非常方便。

等。語法:

css的宣告必須放在head標籤中

三種選擇器宣告方式,標籤選擇器 a{},class選擇器.a{},id選擇器#a{}。

一、行內樣式:

在html標籤中直接使用style屬性設定css樣式。

例如

style="color:red;">

h1>

二、內部樣式表

在head標籤中通過style標籤宣告並在style標籤中進行選擇器宣告,然後在html正文中進行呼叫。

例如

......

...

三、外部樣式表

將css**單獨儲存為乙個單獨的樣式表檔案,擴充套件名為.css,在頁面中引用外部樣式表即可。html引用外部樣式表有兩種方式。

其中,rel式指在頁面中使用這個外部樣式表。type式指檔案的型別是樣式表文字。href是指檔案的位址。

然後外部樣式表檔案需要字尾名為.css,建議將外部樣式表檔案統一儲存在網頁所在資料夾的專用子資料夾下。

外部樣式表**示例

a

{}.a

{}#a

{}

b、匯入外部樣式表

在html網頁中使用@import匯入外部樣式表,匯入樣式表的語句必須放在style標籤中,而style標籤必須放到頁面的head標籤內。

@import表示匯入檔案,前面必須有乙個@符號,url(「」「」)表示樣式表檔案位置。

c.鏈結式和匯入式的區別

1.link標籤屬於xhtml範疇,@import是css2.1特有的。

2.使用link鏈結時時先將外部css檔案載入到網頁中,再進行編譯顯示,無論網速快慢,使用者得到的預期效果一樣。

3.使用@import匯入的css檔案,客戶端會先將html結構呈現出來,再把css檔案載入到網頁中,最終效果一樣,只是當網速較慢時,會先顯示沒有css同意布局的html網頁。

4.如瀏覽器不相容css2.1則無法應用@import。

樣式優先順序

行內樣式》內部樣式表》外部樣式表

id選擇器》類選擇器》標籤選擇器

css的高階應用

一、css復合選擇器

1、後代選擇器

css中可通過巢狀的方式,對特殊位置的html標籤進行宣告。如當h3標籤中包含strong標籤的時候,就可以使用後代選擇器來控制相應內容。

後代選擇器宣告時把外層標籤解除安裝前面,內層標籤寫在後面,用空格分隔。當標籤發生巢狀時,內層標籤就成為外層標籤的後代,內層標籤內的內容就會套用相應後代選擇器所設定的樣式。

例:

h1 strong

h1 .strong{}

h1 #strong{}

使用時內容strong>

h1>

2.交集選擇器

交集選擇器由兩個選擇器直接構成,其中第乙個必須是標籤選擇器,第二個必須是class選擇器或者id選擇器。兩個選擇器必須連續書寫.

例如

p

.txt{}p

#txt

{}

3.並集選擇器

與交集選擇器對應,任何形式的選擇器都可以作為並集選擇器的一部分。

病及選擇器是多個選擇器通過逗號鏈結而成。

用途,在宣告css選擇器時,如果有某些選擇器的風格是完全相同的,或者部分相同,這時便可以利用並集選擇器同時宣告所有風格相同的css選擇器。

例:

h3,h2,.a1

.b2.#id1.#id2

{};

用以上方法完成宣告,在html中任意即可任意呼叫並集選擇器中的任何乙個選擇器,完成大括號內定義的風格。

並集選擇器可以簡潔的完成全域性設定。

另外,當網頁中需要使用大量帶有同類風格樣式的id選擇器時,也可以用最簡介的語言完成設定。

第四天學習

一 權重關係 樣式表的權重關係 內聯樣式表的權重最大!內部和外部樣式的權重,和書寫的前後順序有關!放在後面的會把放在前面的樣式覆蓋掉 網頁的布局 先做上下排版 再做左右排版 從外往裡 二 css語法 選擇符選擇符 選擇符就是給標籤起名字 型別選擇符 標籤選擇符 所有的html標籤可以直接當做選擇符進...

css第四天 浮動

1css布局的三種機制 1.1標準流 最穩定 塊級 自上而下 行內 自左到右 1.2浮動 浮動可以讓多個塊級元素子在一行無縫隙顯示,布局最為長常用 1.3定位 2浮動2.1目的 讓多個塊級元素在一行顯示 浮動只要左右,沒有居中 我們的浮動元素只能一行顯示 除非裝不開盒子,才會下來 2.2口訣 浮 漂...

前端基礎CSS第四天

css第四天 border radius 屬性用於設定元素的外邊框圓角 border radius length radius 半徑 引數值可以為數值或百分比的形式 如果是正方形,想要設定為乙個圓,把數值修改為高度或者寬度的一半即可,或者直接寫為50 該屬性是乙個簡寫屬性,可以跟四個值,分別代表左上...