css基礎語法
一、CSS格式
選擇器{
屬性名:屬性值;
屬性名:屬性值;
}
選擇器負責圈定范圍，要修改的元素集合，花括號內的聲明由屬性名和屬性值組成(key:value)的形式，用於設定具體樣式
二、CSS三種引入方式
1.行間式
<p style="color:red;"</p>
2.內聯式
<style>
p {
color:red
}
</style>
3.外聯式
p {
width: 100px;
height: 100px;
background-color: red;
}
<head>
<link rel="stylesheet" type="text/css" href="css/zero.css" />
</head>
三種引入方式對比
<!-- 行間式 -->
<!-- 1.在標簽頭部的style屬性內 -->
<!-- 2.屬性值滿足的是css語法 -->
<!-- 3.屬性值用key：value新式賦值，value具有單位 -->
<!-- 4.屬性值之間用；隔開 -->
<!-- 內聯式 -->
<!-- 1.在style標簽內（style標簽一般作為head的子標簽） -->
<!-- 2.屬性值滿足的是css語法 -->
<!-- 3.屬性值用key：value新式賦值，value具有單位 -->
<!-- 4.屬性值之間用；隔開（一般獨行分開賦值） -->
<!-- 5.格式：選擇器{樣式塊} -->
<!-- 外聯式 -->
<!-- 1.在外部css文件中 -->
<!-- 2.屬性值滿足的是css語法 -->
<!-- 3.屬性值用key：value新式賦值，value具有單位 -->
<!-- 4.屬性值之間用；隔開 -->
<!-- 5.格式：選擇器{樣式塊} -->
<!-- 6.將html與css文件建立聯系：html通過link標簽鏈接外部css（一般在head里面） -->
三種引入方式的優先級
注：三種方式間沒有優先級
<!-- 1.三種方式協同布局： -->
<!-- 2.不重復的屬性一定為唯一位置的唯一值 -->
<!-- 3.重復的屬性采用覆蓋賦值，保留最后位置的屬性值 -->
<!-- 4.行間式一定是邏輯上最后被解析的位置（js正常操作的就是行間式） -->
<!-- !important 會影響優先級 -->
補：CSS的注釋：
/*注釋內容*/
三、CSS的長度單位和顏色單位
1.CSS基本長度單位
- px像素，屏幕上顯示的最小單位，用於網頁設計
- mm毫米
- cm厘米
- in英寸
- pt點 1pt=72in，用於印刷業
- em相當長度，一般1em=16px，用於流式布局
- 50vw==>%50 view width 當前瀏覽器能顯示界面的一半
2.CSS基本顏色單位
- colorName顏色名方式 red
- rgb十進制方式 rgb(255,0,0)或rgb(100%,0,0),每兩位代表一種顏色，分別代表Red、Green、Blue，可以簡寫成#abc
- rgba此方式僅僅是為rgb方式加上了Alpha(不透明度)，不透明度范圍為[0-1]
- hsl()工業界的顏色標准,H(色相)S(飽和度)L(明度),第一個參數為0-360，后兩個為百分比.
四、CSS選擇器(基礎)
1.通配選擇器
通配選擇器(*)：匹配所有(html,body,body中的所有子標簽(具有顯示效果的標簽)
*{
border: solid;
}
2.標簽選擇器
標簽選擇器(標簽名)：匹配指定標簽名的對應所有標簽
div{
width: 100px;
height: 100px;
background-color: red;
}
3.類選擇器
類選擇器(.)：匹配指定類名對應的所有標簽
.dd{
font-size: 50px;
}
<div class="dd">d_1</div>
4.id選擇器
id選擇器(#)：匹配指定id名對應的唯一標簽
#ele{
color: blue;
}
總結
1.通配選擇器一般用於整體reset操作（清除系統自定義樣式）
*{
margin: 0;
}
2.標簽與id選擇器運用場景並不多，一般不提倡采用id選擇器進行布局
3.類選擇器為布局首選(建議基本全用class選擇器進行布局)
基本選擇器優先級:id>class>標簽>通配
五、CSS常用屬性和值
1.字體屬性
- font-family: 字體族科，多值用於備用，以,隔開
font-family: "STSong", "Arial";
- font-size: 字體大小
- font-style: 字體風格normal(普通，初始值) italic(斜體)oblique(傾斜)
- font-weight:字體重量 normal(普通)bold(加粗)lighter(細)|100最細，900最粗
- font-height: 行高，行高設置大於等於字體大小，字體在行高中垂直居中顯示
- font: [weight | style] size family` 為復合屬性(推薦使用)
font:lighter italic 80mm "Calibri","微軟細黑"
注：空格隔開多個值賦值，逗號隔開為一個值多值賦值
2.文本屬性
- color 設置文字顏色
- text-align 水平居中方式(left center right)
- text-decoration 字划線(下划線：underline 中划線:line-through 上划線：overline)
text-decoration: underline;
text-decoration: line-through;
text-decoration: overline;
- letter-spacing：字間距
- word-spacing：詞間距
- vertical-align：垂直對齊方式(一般用於圖片和文字中間對齊)
baseline： 將支持valign特性的對象的內容與基線對齊
sub： 垂直對齊文本的下標
super： 垂直對齊文本的上標
top： 將支持valign特性的對象的內容與對象頂端對齊
text-top： 將支持valign特性的對象的文本與對象頂端對齊
middle： 將支持valign特性的對象的內容與對象中部對齊
bottom： 將支持valign特性的對象的文本與對象底端對齊
text-bottom： 將支持valign特性的對象的文本與對象頂端對齊
<percentage>： 用百分比指定由基線算起的偏移量。可以為負值。基線對於百分數來說就是0%。
<length>： 用長度值指定由基線算起的偏移量。可以為負值。基線對於數值來說為0。（CSS2）
-
text-indent：首行縮進
-
word-break規定自動換行的處理方式
normal 使用瀏覽器默認的換行規則。
break-all 允許在單詞內換行。(遇到連體的英文，html將其解析為一個單詞)
keep-all 只能在半角空格或連字符處換行。