前端學習記錄（CSS篇）

時間 2019-11-10

標籤前端學習記錄 css 欄目 CSS 简体版

原文原文鏈接

`CSS`

Cascading Style Sheet，層疊樣式表，將網頁內容和顯示樣式分離，提升程序性能。css

它是一種專門描述結構文檔的表現方式的文檔，主要用於網頁風格設計，包括字體大小、顏色、以及元素的精肯定位。在傳統的web網頁設計裏，使得css能讓單調的html網頁更富表現力。html

css的引入方式

css能夠控制html文檔的顯示，可是控制文檔顯示以前，首先應在須要顯示的html文檔中引入css樣式表，html提供瞭如下四種引入方式：web

（1）內聯樣式：將樣式內聯定義到具體的html元素上，利用元素的style屬性實現，通用用於精確控制一個html元素的表現。api

<!-- 內聯樣式：將css代碼寫在html具體的元素的style屬性內 -->
<p id="p1" style="color: red; font-size: 16px">內聯樣式</p>

（2）內部樣式：一般在html文檔頭部定義樣式單部分來實現，這種方式下每批css樣式只控制一份html文檔。ide

<!-- 內部樣式：將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="outer.css" />

（4）導入外部樣式：和第三種方式相似，只是使用@import來引入外部樣式表文件。性能

<!-- 導入外部樣式：與link方法相似，語法不通，在<style>標籤內使用 -->
<style type="text/css">
    @import "outer.css'";
    @import url("outer.css");
</style>

優先級：內聯樣式style> 內部樣式 > 導入外部樣式import > 外鏈樣式link字體

css經常使用選擇器介紹

定義css樣式的語法總遵循以下格式：url

Selector{
    property1: value1;
    property2: value2;
}

Selector：選擇器，決定該樣式的定義對哪些元素起做用
{property:value...}：屬性定義，決定這些樣式起怎樣的做用（字體、顏色、佈局等）

標籤選擇器：聲明哪一種標籤會使用該css樣式spa

/* 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/dolphi...