1. 程式人生 > >css樣式的基本知識

css樣式的基本知識

1 css是什麼?
層疊樣式表,修飾網頁結構
2 如何去使用css?
a.在html網頁中,加入一個style標籤,在這個style標籤裡面寫css程式碼
b.可以直接把style裡面的程式碼放到一個單獨的檔案中,通過link標籤去引入 (常用)
c.直接在html開始標籤的style屬性裡面去寫css程式碼
以上三種方式都可以去設定網頁都樣式
3 css語法規則?要使得html標籤有具體都樣式,需要具備哪些條件?
a. style標籤或者link標籤或者style屬性這幾個都是寫正確
b. 保證css程式碼和html程式碼產生關聯,產生關聯的方法有多種(id<==>#) 學習到底有多少方法可以關聯html標籤
c. 告訴瀏覽器要把html修飾成什麼樣子, 學習各種樣式去修飾html標籤

總結:css要學好,就是要學習兩個東西:1 如何去關聯(查詢到對應html標籤)2 如何去修飾這些標籤

書寫css的規則:

選擇器{
屬性名稱:屬性值;
屬性名2:屬性值2;
….
}
選擇器:選擇(查詢)html標籤的方法,(#box)
a.id選擇器 #自定義一個名稱
b.類選擇器 .自定義一個名稱
c.標籤選擇器 通過標籤名稱來選擇對應的 html元素

總結:學習了以上三個選擇器(找元素的方法),就可以查詢到網頁中任何的元素

剩下要解決的問題:如何去修飾html元素?邊框,顏色,字型,背景?

4 具體的css規則

4.1 顏色的表示方式
a. rgb 模式 r 紅色 g 綠色 b 藍色 紅綠藍三原色可以組成n多顏色 rgb取值範圍(0-255)
b. 直接寫顏色的名稱
c. 十六進位制 #9f0000 (最常用)
d. rgba(紅色,綠,藍,透明度) a的取值範圍0-1 0表示完全透明 1 表示不透明
4.2 邊框相關的屬性
border-width 邊框的寬度
border-style 邊框風格
border-color 邊框顏色

border:1px solid red; 簡寫形式
border-left 左邊  border-right 右邊  border-bottom 下邊 border-top
border-radius 邊框圓角

4.3 背景相關的屬性
background-color 背景顏色
background-image 背景圖片
background-repeat 是否重複
background-position 背景位置

4.4 字型相關屬性
font-size: 80px;
/設定字型顏色/
color: red;
/字型加粗/
/font-weight: bold;/
/定義字型型別/
font-family:”微軟雅黑”,serif;

4.5 文字相關屬性
text-align
text-indent
letter-spacing
line-height
總結:1 css是什麼?css有什麼用?
2 css如何去使用? 如何去找到對應html元素?如何去修飾這個元素?

   找元素的方法-->css的選擇器(id 類 標籤)
   掌握css的相關屬性  顏色 邊框 背景  文字 文字

課後練習 – 安裝一個軟體 markman 標註工具

拿到設計師給的圖–>分析思路(把網頁結構搭建 html)–> css去修飾網頁結構