CSS
Cascading Style Sheet，層疊樣式表，將網頁內容和顯示樣式分離，提高程式性能，
它是一種專門描述結構檔案的表現方式的檔案，主要用于網頁風格設計，包括字體大小、顏色、以及元素的精確定位，在傳統的web網頁設計里，使得css能讓單調的html網頁更富表現力，
**`css`的引入方式**
css可以控制html檔案的顯示，但是控制檔案顯示之前，首先應在需要顯示的html檔案中引入css樣式表，html提供了以下四種引入方式：
（1）行內樣式：將樣式行內定義到具體的html元素上，利用元素的style屬性實作，通用用于精確控制一個html元素的表現，
<!-- 行內樣式：將css代碼寫在html具體的元素的style屬性內 -->
<p id="p1" style="color: red; font-size: 16px">行內樣式</p>
（2）內部樣式：通常在html檔案頭部定義樣式單部分來實作，這種方式下每批css樣式只控制一份html檔案，
<!-- 內部樣式：將css代碼寫在<head>里的<style>標簽內實作 -->
<style type="text/css">
#p2{
color: blue;
font-size: 20px;
}
</style>
（3）外鏈樣式：樣式檔案和html檔案分離，樣式檔案需要額外引入，這種方式下每批css樣式能控制多份html檔案（最常用），
<!-- 外鏈樣式：利用link標簽引入，使用頻率最高 -->
<link rel="stylesheet" type="text/css" href=https://www.cnblogs.com/jackw1/p/"outer.css" />
（4）匯入外部樣式：和第三種方式類似，只是使用@import來引入外部樣式表檔案，
<!-- 匯入外部樣式：與link方法類似，語法不通，在<style>標簽內使用 -->
<style type="text/css">
@import "outer.css'";
@import url("outer.css");
</style>
優先級：行內樣式style> 內部樣式 > 匯入外部樣式import > 外鏈樣式link
**`css`常用選擇器介紹**
定義css樣式的語法總遵循如下格式：
Selector{
property1: value1;
property2: value2;
}
Selector：選擇器，決定該樣式的定義對哪些元素起作用
{property:value...}：屬性定義，決定這些樣式起怎樣的作用（字體、顏色、布局等）
標簽選擇器：宣告哪種標簽會使用該css樣式
/* E{....}，其中E代表有效的html元素 */
a{
background-color: blue;
color: red;
}
class選擇器：宣告特定class值的標簽會使用該css樣式（一個標簽可以設定多個class值）
/* [E].classValue{....}，其中E表示html元素，當E存在時，指定的范圍是標簽為E且屬性class的值為classValue，不存在時，范圍是標簽屬性class的值為classValue */
.p2{
background-color: yellow;
color: gray;
}
id選擇器：宣告特定id值的標簽會使用該css樣式（一個標簽只能設定一個id值）
/* [E]#idValue{....}，同class選擇器概念，E可存在或不存在 */
#id1{
background-color: gray;
color: white;
}
組合選擇器：將具有相同css樣式的選擇器，一次性宣告（不限于標簽選擇器，class選擇器和id選擇器也可以組合）
/* Selector1, Selector2, Selector3{....}，Selector都是有效的選擇器，可以是標簽選擇器、class選擇器、id選擇器等 */
span, b, #id1{
color: red;
}
嵌套選擇器：也叫關聯選擇器（不只是標簽選擇器能嵌套，class選擇器和id選擇器也可以）
/* Selector1 Selector2{....}，Selector都是有效的選擇器，表示當前需要設定樣式的范圍是Selector1選擇器下所有的Selector2選擇器*/
div p{
background-color: green;
color: white;
}
**常用的`css`屬性介紹**
字體
font-family：規定文本的字體系列，如"serif"、"sans-serif"等
font-size：規定文本的字體尺寸
font-style：規定文本的字體樣式，主要有normal,italic,oblique
font-weight：規定字體的粗細，主要有normal,bold,自定義粗細
文本
color：設定文本顏色
letter-spacing：設定字符間距（每個字母間的間距）
line-height：設定文本行高
text-align：設定文本的對齊方式，只有left, right, center
text-decoration：設定文本的裝飾效果，主要有overline（上劃線）, underline（下劃線）, line-through（洗掉線）
text-indent：設定文本看首行縮進
text-transform：設定文本的大小寫，主要有uppercase, lowercase, capitalize
word-spacing：設定單詞間距
邊框
border：在一個宣告中設定所有的邊框屬性
border-color：設定四條邊框的顏色
border-style：設定四條邊框的樣式，只要有dotted, solid, double, dashed等值
border-width：設定四條邊框的寬度
邊框分為：border-left、border-right、border-top、border-bottom
border-left：在一個宣告中設定所有左邊框屬性，對應還有border-right等
border-left-color：設定左邊框顏色
border-lelft-style：設定左邊框樣式
border-left-width：設定左邊框寬度
可以將屬性一次性寫在一起，更方便
border: 10px red solid;
背景
background：在一個宣告中設定所有的背景屬性
background-attachment：設定背景影像是否固定或者隨著頁面的其余部分滾動，主要有fixed和scroll兩個值
background-color：設定元素的背景顏色
background-image：設定元素的背景圖片，主要有url和none兩個屬性
background-position：px, % 設定背景影像的開始位置，可以指定top left等，也可以指定具體的像素位置
background-repeat：設定是否及如何重復背景影像，主要有repeat, repeat-x, repeat-y, no-repeat
串列
list-style：在一個宣告中設定所有的串列屬性，設定成none可以去掉ul中的原點等屬性值
list-style-image：將影像設定為串列項標記，主要有url值
list-style-position：設定串列項標記的放置位置，主要有outside和inside兩個值
list-style-type：設定串列項標記的型別，主要有disc, circle, square, decimal等，不能和list-style-image同時使用
表格
border-collapse：設定是否把表格邊框合并為單一的邊框，值為collapse
border-spacing：設定分割單元格邊框的距離，與border-collapse不能同時使用
caption-side：設定表格標題的位置
empty-cells：設定是否顯示表格中的空單元格，值為hide, show
常用偽類別屬性
<a>超鏈接標簽
a:link 超鏈接的普通樣式
a:visited 被點擊過的超鏈接樣式
a:hover 滑鼠指標經過超鏈接上時的樣式
a:active 在超鏈接上單擊時，既"當前激活"時超鏈接的樣式
塊級標簽->行級標簽：display:inline
行級標簽->塊級標簽：display:block
注：行級標簽是默認情況下是不能設定寬度和高度的，如果要設定，需要把行級標簽變成塊級標簽
**盒子模型**
我們可以把頁面中的元素都可以看作一個盒子，占據著一定的頁面空間，這些占據的空間往往比單純的內容要大，換句話說，我們可以調整盒子的邊框和距離的引數來調整盒子的位置，
盒子寬度：content+padding+border+margin
因此我們可以利用好盒子的這些屬性，就能很好的實作各種各樣的排版效果，
border屬性主要有3個，border-color, border-width, border-style，通常在設定border時常常將3個屬性進行很好的配合，才能達到良好的效果，
padding用于控制content與border之間的距離，
padding：一次性將四個邊距全部設定（上右下左，順時針）
padding-top：上邊距
padding-bottom：下邊距
padding-left：左邊距
padding-right：右邊距
margin指的是元素與元素之間的距離，
margin：一次性將四個邊距全部設定（上右下左，順時針）
margin-top：上邊距
margin-bottom：下邊距
margin-left：左邊距
margin-right：右邊距
注：
- 兩個行級元素之間的距離是margin-left和margin-right兩者的和，兩個塊級元素之間的距離不是margin-top和margin-bottom的和，而是兩者之中的較大值，
- 其實margin除了設定正數以外，也可以設定負數，當設定為負數時，會使得塊向反方向移動，甚至覆寫在另外的塊上，
- 當塊之間是父子關系，通過設定子塊的margin為負數時，可以使得子塊從父塊中"分離出來"
**元素的定位**
網頁中各個元素都必須有自己的位置，從而搭建出整個頁面的結構，
float：值為left, right或者默認值none，當設定了元素向左浮動或向右浮動時，元素會向其父元素的左側或右側靠近
clear：設定塊元素的clear屬性清除對float的影響，值為left, right, both
position：制定塊的位置，即塊相對于其父塊的位置和相對它自身應該在位置，值有absolute, fixed, relative, static
當將子塊的position設定為absolute時，子塊已經不再從屬于父塊，其邊框設定的距離是相對頁面body的距離，而不是父塊的距離
當將塊的position引數設定為relative時，與將其設定為absolute時完全不同，這時子塊時相對于自身在父塊的原先位置來進行定位的，
定位資料參考：http://www.cnblogs.com/dolphinX/archive/2012/10/13/2722501.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/55476.html
標籤：Html/Css
上一篇：html篇