二.常用css樣式
三.基本選擇器
四.盒子模型
五.css浮動
練習css 指層疊樣式表 (cascading style sheets)定義如何顯示控制 html 元素,從而實現美化html網頁。
優勢：
為了讓網頁元素的樣式更加豐富,也為了讓網頁的內容和樣式能拆分開,css由此思想而誕生,有了css,html中大部分表
現樣式的標籤就廢棄不用了,html只負責文件的結構和內容,表現形式完全交給css,html文件變得更加簡潔。
內聯式:通過標籤的style屬性,在標籤上直接寫樣式。
color 設定文字的顏色,如: color:red;
font-size 設定文字的大小,如:font-size:12px;
font-family 設定文字的字型,如:font-family:'微軟雅黑';
font-style 設定字型是否傾斜,如:font-style:'normal'; 設定不傾斜,font-style:'italic';設定文字傾斜
font-weight 設定文字是否加粗,如:font-weight:bold; 設定加粗 font-weight:normal 設定不加粗
font 同時設定文字的幾個屬性,寫的順序有相容問題,建議按照如下順序寫:
font:是否加粗 字型大小/行高 字型;如: font:normal 12px/36px '微軟雅黑';
line-height 設定文字的行高,如:line-height:24px;
text-decoration 設定文字的下劃線,如:text-decoration:none; 將文字下劃線去掉
text-indent 設定文字首行縮排,如:text-indent:24px; 設定文字首行縮排24px
text-align 設定文字水平對齊方式,如text-align:center 設定文字水平居中
css顏色值主要有三種表示方法:
1、顏色名表示,比如:red 紅色,gold 金色
2、rgb表示,比如:rgb(255,0,0)表示紅色
3、16進製制數值表示,比如:#ff0000 表示紅色,這種可以簡寫成 #f00
通過id名來選擇元素,元素的id名稱不能重複,所以乙個樣式設定項只能對應於頁面上乙個元素,不能復用,id名一般給程式使用,所以不推薦使用id作為選擇器。舉例:
通過類名來選擇元素,乙個類可應用於多個元素,乙個元素上也可以使用多個類,應用靈活,可復用,是css中應用最多的一種選擇器。舉例:
主要應用在選擇父元素下的子元素,或者子元素下面的子元素,可與標籤元素結合使用,減少命名,同時也可以通過層級,防止命名衝突。舉例:
多個選擇器,如果有同樣的樣式設定,可以使用組選擇器。舉例:
常用的偽類選擇器有hover,表示滑鼠懸浮在元素上時的狀態,偽元素選擇器有before和after,它們可以通過樣式在元素中插入內容。
所有html元素可以看作盒子，在css中，"box model"這一術語是用來設計和布局時使用。
margin(外邊距) - 清除邊框外的區域，外邊距是透明的。
border(邊框) - 圍繞在內邊距和內容外的邊框。
padding(內邊距) - 清除內容周圍的區域，內邊距是透明的。
content(內容) - 盒子的內容，顯示文字和影象。
邊距一共有四個方向：依次為上、右、下、左。
padding: 0px 2px 3px 9px; (上， 右， 下， 左)
padding: 0px 2px, 3px(上, 左右, 下)
padding: 0px 2px(上下, 左右)
float（浮動），往往是用於影象，但它在布局時一樣非常有用。
元素的水平方向浮動，意味著元素只能左右移動而不能上下移動。
乙個浮動元素會盡量向左或向右移動，直到它的外邊緣碰到包含框或另乙個浮動框的邊框為止。
浮動元素之後的元素將圍繞它。
浮動元素之前的元素將不會受到影響。
如果影象是右浮動，下面的文字流將環繞在它左邊：
做乙個簡單的導航條
**：
效果：
寫qq郵箱登入介面
**：
2023年9月14日21時07分
中國第一封電子郵件
從北京發往德國
「越過長城，走向世界」
qq登入
登入忘了密碼？
效果： CSS層疊樣式表
一般說來所有樣式有下面的規則 第四個最有優先性 1 browser default 瀏覽器預設 2 external style sheet 外部樣式表 3 internal style sheet inside the 瀏覽器將從mystyle.css檔案中讀採樣式定義資訊，並根據它來格式化文件 ...
CSS（層疊樣式表）
一.css是增加html的樣式,擁有對網頁物件和模型樣式編輯的能力 1 在html中引入css有3種方式 1.外部樣式表 2.內部樣式表 3.內聯樣式表 2 css選擇元素的方式 1.元素選擇器 通過元素名字進行選擇 2.id選擇器 3.class選擇器 4.子元素選擇器 5.相鄰選擇器 如果需要選...
CSS層疊樣式表
html主要控制內容 css主要控制格式。樣式表是用來指定樣式資訊的句法機制。之所以將css稱為層疊樣式表，是因為它可以在3個層次上進行定義。內聯樣式表位於開始標籤中，其設定只對該元素起作用 文件樣式表位於文件的頭部區域，能夠作用於文件的整個主體。文件樣式表的說明是作為乙個 3.通用選擇器 不管什麼...