CSS基礎樣式

CSS基礎樣式

CSS指層疊樣式表，它作用是控制頁面內容的外觀。這樣就可以將網頁的內容和表現形式分離。層疊的意思是 如果選擇器的權重相同，則後面元素的樣式會覆蓋前面樣式。

樣式表的組成

CSS樣式表由選擇器和聲明兩個部分組成，其中選擇器是通過名字來標識元素的，聲明用於定義元素的樣式。

a{color:red;聲明2;聲明3}

樣式表比較常見的有三種引入方式
1.行內樣式

<p style="color:red">你好</p>

2.內部樣式表

 <style>
    p{color:red}
 </style>

3.外部樣式表

<link rel="stylesheet" type="text/css" href="my.css"> 

如果這三種方式都對某個內容增加了樣式，則優先級順序是行內樣式表>內部樣式表>外部樣式表

樣式表的基礎選擇器

CSS選擇器十分豐富，大致可以分爲如下幾類，基礎選擇器，關係選擇器，屬性選擇器，僞類選擇器，僞對象選擇器。
CSS基礎選擇器
1.ID選擇器

#id名稱{屬性名：屬性值；}

2.class選擇器

.class名稱{屬性名：屬性值；}

3.標籤選擇器

標籤名{屬性名：屬性值；}

優先級 ID選擇器>class選擇器>標籤選擇器>*

樣式表常用樣式

1.color 字體顏色
可以使用名稱，RGB，RGBA，十六進制來指定字體顏色
顏色名稱：{color:red;}
RGB:{color:rgb(1,1,1);} 即代表紅綠藍以這三種顏色拼出來。
RGBA:{color:rgba(1,1,1,0.5);} 前面三個和rgb一樣，最後一位代表透明度。
十六進制：{color:#ff0000;}
2.font-family 字體樣式
3.text-align 文字內容靠左，居中，靠右
4. background-color 背景色，默認是透明。如果同時設置背景圖片，背景圖片將覆蓋背景色之上
5. background-image 背景圖片，通過url指定圖片

 <style>
     body{background-image:url("img/aa.jpg")}
 </style>

6.background-repeat 背景圖片是否重複，默認值repeat
屬性值reapeat-x圖片在橫向上平鋪， reapeat-y圖片在縱向上平鋪，no-repeat不重複平鋪
7.background-size 背景圖片大小，默認值（auto）真實大小

.img{background-size:100px 100px}

前面是寬後面是高，只設置寬高度會自動匹配
8.background-position 相較於外部容器，背景圖片的位置。默認值0% 0%相較於left和top
9.font-style 文本的字體樣式（正常或者斜體）
默認值normal 正常
italic 斜體
10.font-weight 字體的粗細
默認值normal 正常
lighter 細體效果和normal一樣
bold 粗體
bolder 也是粗體
數字也可以表示粗細，範圍100~900

{font-weight:lighter;}
{font-weight:600}

11.font-size 字體的大小
通常通過像素指定字體大小

{font-size:20px;}