web前端 基礎部分(二) CSS

2021-07-02 00:46:37 字數 1683 閱讀 2400

一、css概述

css : cascading style sheet    層疊樣式表

作用:定義了網頁的行為,簡單的說就是將網頁的內容和顯示樣式分離,從而提高顯示的多樣性和顯示的功能。(就好比html定義的是網頁的骨架,css就是為網頁穿上外衣)

特點:樣式定義靈活多樣且豐富多彩,可以設定任意的字型及大小。等等

二、css基本語法 *

選擇器三、css的四種使用樣式

1、行內樣式

例:行內樣式

2、嵌入式樣式例:

3.1、外部樣式    (匯入式)例:

3.2、外部樣式    (鏈結式)例:

rel屬性是定義當前文件和鏈結檔案的關係

四、樣式優先順序

樣式的優先順序遵循就近原則,出現重複的樣式定義時,最近的定義樣式優先級別最高

五、css的常用選擇器

1、標籤選擇器

語法:  標籤名稱

例:   p

2、id選擇器

語法: #id名稱

例:  #p

3、類選擇器

語法: .類名

例: .p

4、包含選擇器

語法: 選擇器1  選擇器2

解釋:選擇所有被選擇器1包含的選擇器2

例: div p

5、選擇器分組

語法: 選擇器1,選擇器2

解釋:選擇所有選擇器1和選擇器2

例: div,p

6、偽類選擇器

語法: 標籤名稱:選擇器

例:a:link    

/* unvisited links */

a:visited   

/* visited links   */

a:hover 

/* user hovers  */

a:active   

/* active links   */

六、css常用屬性

1、字型設定

font-size     color            簡寫樣式

(不難,建議查詢幫助文件)

2、文字設定

例:p3、背景設定

例:div

簡寫:div

4、列表設定

例:ol li

5、display屬性

解釋:display設定如何顯示

例:ol li

6、float屬性           

解釋:設定元素脫離正常的文件流(由上而下,由左到右)顯示

例:#d1

#d2#d3

七、盒子模型  **

盒子模型是css

的基石之一,網頁上的每乙個元素都被看成是裝了東西的矩形盒子。

這個盒子由元素的內容、

padding

(填充/

內邊距)、

border

(邊框)和

margin

(邊界/

外邊距)組成。在預設情況下盒子的沒有邊框,背景色是透明,所以在預設情況下我們是看不到盒子的

css的基礎部分就分享到這裡了!當然有很多都沒有點到,如果真的是專門學習css的朋友,或開發人員還是要多多查詢幫助文件的!也請資深人士指點錯誤及不足!



web前端開發(二) CSS基礎

目錄 一 css語法 二 css 樣式的三種引入方式 三 css選擇器 四 css 文字樣式與字型樣式 五 鏈結樣式與列表樣式 六 css背景 七 css盒子模型 八 css定位 css全稱為 層疊樣式表 cascading style sheets 它主要是用於定義html內容在瀏覽器內的顯示樣式...

web前端基礎 css

前言 繼續努力 什麼是css?就是對html進行美化,好比化妝前後的差距。html的塊級標籤 標籤 預設獨佔一行,跟同級兄弟塊豎直排列 標籤 預設同在一行,跟同級兄弟塊橫向排列 塊級標籤只有結合css樣式才有意義!修飾div標籤一般用style屬性並使用樣式,不贊成用align屬性 css的語法格式...

前端部分 CSS基礎介紹

css cascading style sheet,層疊樣式表 定義如何顯示html元素。也就是定義相應的標籤語言來定製顯示樣式達到一定的顯示效果。每個css樣式由兩個組成部分 選擇器和宣告。宣告又包括屬性和屬性值。每個宣告之後用分號結束。引用css樣式的方式分為3種 1 便簽行內定義顯示方式 2 ...