成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

前端學(xué)習(xí)記錄（CSS篇）

skinner / 3324人閱讀

摘要：，層疊樣式表，將網(wǎng)頁內(nèi)容和顯示樣式分離，提高程序性能。它是一種專門描述結(jié)構(gòu)文檔的表現(xiàn)方式的文檔，主要用于網(wǎng)頁風(fēng)格設(shè)計(jì)，包括字體大小顏色以及元素的精確定位。用于控制與之間的距離。

CSS

Cascading Style Sheet，層疊樣式表，將網(wǎng)頁內(nèi)容和顯示樣式分離，提高程序性能。

它是一種專門描述結(jié)構(gòu)文檔的表現(xiàn)方式的文檔，主要用于網(wǎng)頁風(fēng)格設(shè)計(jì)，包括字體大小、顏色、以及元素的精確定位。在傳統(tǒng)的web網(wǎng)頁設(shè)計(jì)里，使得css能讓單調(diào)的html網(wǎng)頁更富表現(xiàn)力。


css的引入方式

css可以控制html文檔的顯示，但是控制文檔顯示之前，首先應(yīng)在需要顯示的html文檔中引入css樣式表，html提供了以下四種引入方式：

（1）內(nèi)聯(lián)樣式：將樣式內(nèi)聯(lián)定義到具體的html元素上，利用元素的style屬性實(shí)現(xiàn)，通用用于精確控制一個html元素的表現(xiàn)。



內(nèi)聯(lián)樣式

（2）內(nèi)部樣式：通常在html文檔頭部定義樣式單部分來實(shí)現(xiàn)，這種方式下每批css樣式只控制一份html文檔。

（3）外鏈樣式：樣式文件和html文檔分離，樣式文件需要額外引入，這種方式下每批css樣式能控制多份html文檔（最常用）。

（4）導(dǎo)入外部樣式：和第三種方式類似，只是使用@import來引入外部樣式表文件。

優(yōu)先級：內(nèi)聯(lián)樣式style> 內(nèi)部樣式 > 導(dǎo)入外部樣式import > 外鏈樣式link


css常用選擇器介紹

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

Selector{
    property1: value1;
    property2: value2;
}

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

標(biāo)簽選擇器：聲明哪種標(biāo)簽會使用該css樣式

/* E{....}，其中E代表有效的html元素 */
a{
    background-color: blue;
    color: red;
}

class選擇器：聲明特定class值的標(biāo)簽會使用該css樣式（一個標(biāo)簽可以設(shè)置多個class值）

/* [E].classValue{....}，其中E表示html元素，當(dāng)E存在時，指定的范圍是標(biāo)簽為E且屬性class的值為classValue，不存在時，范圍是標(biāo)簽屬性class的值為classValue */
.p2{
    background-color: yellow;
    color: gray;
}

id選擇器：聲明特定id值的標(biāo)簽會使用該css樣式（一個標(biāo)簽只能設(shè)置一個id值）

/* [E]#idValue{....}，同class選擇器概念，E可存在或不存在 */
#id1{
    background-color: gray;
    color: white;
}

組合選擇器：將具有相同css樣式的選擇器，一次性聲明（不限于標(biāo)簽選擇器，class選擇器和id選擇器也可以組合）

/* Selector1, Selector2, Selector3{....}，Selector都是有效的選擇器，可以是標(biāo)簽選擇器、class選擇器、id選擇器等 */
span, b, #id1{
    color: red;
}

嵌套選擇器：也叫關(guān)聯(lián)選擇器（不只是標(biāo)簽選擇器能嵌套，class選擇器和id選擇器也可以）

/* Selector1 Selector2{....}，Selector都是有效的選擇器，表示當(dāng)前需要設(shè)定樣式的范圍是Selector1選擇器下所有的Selector2選擇器*/
div p{
    background-color: green;
    color: white;
}


常用的css屬性介紹

字體
font-family：規(guī)定文本的字體系列，如"serif"、"sans-serif"等
font-size：規(guī)定文本的字體尺寸
font-style：規(guī)定文本的字體樣式，主要有normal,italic,oblique
font-weight：規(guī)定字體的粗細(xì)，主要有normal,bold,自定義粗細(xì)

文本
color：設(shè)置文本顏色
letter-spacing：設(shè)置字符間距（每個字母間的間距）
line-height：設(shè)置文本行高
text-align：設(shè)置文本的對齊方式，只有left, right, center
text-decoration：設(shè)置文本的裝飾效果，主要有overline（上劃線）, underline（下劃線）, line-through（刪除線）
text-indent：設(shè)置文本看首行縮進(jìn)
text-transform：設(shè)置文本的大小寫，主要有uppercase, lowercase, capitalize
word-spacing：設(shè)置單詞間距

邊框
border：在一個聲明中設(shè)置所有的邊框?qū)傩?br>border-color：設(shè)置四條邊框的顏色
border-style：設(shè)置四條邊框的樣式，只要有dotted, solid, double, dashed等值
border-width：設(shè)置四條邊框的寬度
邊框分為：border-left、border-right、border-top、border-bottom
border-left：在一個聲明中設(shè)置所有左邊框?qū)傩?，對?yīng)還有border-right等
border-left-color：設(shè)置左邊框顏色
border-lelft-style：設(shè)置左邊框樣式
border-left-width：設(shè)置左邊框?qū)挾?/p>

可以將屬性一次性寫在一起，更方便
border: 10px red solid;

背景
background：在一個聲明中設(shè)置所有的背景屬性
background-attachment：設(shè)置背景圖像是否固定或者隨著頁面的其余部分滾動，主要有fixed和scroll兩個值
background-color：設(shè)置元素的背景顏色
background-image：設(shè)置元素的背景圖片，主要有url和none兩個屬性
background-position：px, % 設(shè)置背景圖像的開始位置，可以指定top left等，也可以指定具體的像素位置
background-repeat：設(shè)置是否及如何重復(fù)背景圖像，主要有repeat, repeat-x, repeat-y, no-repeat

列表
list-style：在一個聲明中設(shè)置所有的列表屬性，設(shè)置成none可以去掉ul中的原點(diǎn)等屬性值
list-style-image：將圖像設(shè)置為列表項(xiàng)標(biāo)記，主要有url值
list-style-position：設(shè)置列表項(xiàng)標(biāo)記的放置位置，主要有outside和inside兩個值
list-style-type：設(shè)置列表項(xiàng)標(biāo)記的類型，主要有disc, circle, square, decimal等，不能和list-style-image同時使用

表格
border-collapse：設(shè)置是否把表格邊框合并為單一的邊框，值為collapse
border-spacing：設(shè)置分割單元格邊框的距離，與border-collapse不能同時使用
caption-side：設(shè)置表格標(biāo)題的位置
empty-cells：設(shè)置是否顯示表格中的空單元格，值為hide, show

常用偽類別屬性
超鏈接標(biāo)簽

`a:link` 超鏈接的普通樣式
`a:visited` 被點(diǎn)擊過的超鏈接樣式
`a:hover` 鼠標(biāo)指針經(jīng)過超鏈接上時的樣式
`a:active` 在超鏈接上單擊時，既"當(dāng)前激活"時超鏈接的樣式

塊級標(biāo)簽->行級標(biāo)簽：display:inline
行級標(biāo)簽->塊級標(biāo)簽：display:block
注：行級標(biāo)簽是默認(rèn)情況下是不能設(shè)置寬度和高度的，如果要設(shè)置，需要把行級標(biāo)簽變成塊級標(biāo)簽


盒子模型

我們可以把頁面中的元素都可以看作一個盒子，占據(jù)著一定的頁面空間，這些占據(jù)的空間往往比單純的內(nèi)容要大，換句話說，我們可以調(diào)整盒子的邊框和距離的參數(shù)來調(diào)整盒子的位置。

盒子寬度：content+padding+border+margin

因此我們可以利用好盒子的這些屬性，就能很好的實(shí)現(xiàn)各種各樣的排版效果。

border屬性主要有3個，border-color, border-width, border-style，通常在設(shè)置border時常常將3個屬性進(jìn)行很好的配合，才能達(dá)到良好的效果。

padding用于控制content與border之間的距離。
padding：一次性將四個邊距全部設(shè)置（上右下左，順時針）
padding-top：上邊距
padding-bottom：下邊距
padding-left：左邊距
padding-right：右邊距

margin指的是元素與元素之間的距離。
margin：一次性將四個邊距全部設(shè)置（上右下左，順時針）
margin-top：上邊距
margin-bottom：下邊距
margin-left：左邊距
margin-right：右邊距

注：

兩個行級元素之間的距離是margin-left和margin-right兩者的和，兩個塊級元素之間的距離不是margin-top和margin-bottom的和，而是兩者之中的較大值。

其實(shí)margin除了設(shè)置正數(shù)以外，也可以設(shè)置負(fù)數(shù)，當(dāng)設(shè)置為負(fù)數(shù)時，會使得塊向反方向移動，甚至覆蓋在另外的塊上。

當(dāng)塊之間是父子關(guān)系，通過設(shè)置子塊的margin為負(fù)數(shù)時，可以使得子塊從父塊中"分離出來"


元素的定位

網(wǎng)頁中各個元素都必須有自己的位置，從而搭建出整個頁面的結(jié)構(gòu)。

`float`：值為`left`, `right`或者默認(rèn)值`none`，當(dāng)設(shè)置了元素向左浮動或向右浮動時，元素會向其父元素的左側(cè)或右側(cè)靠近
`clear`：設(shè)置塊元素的`clear`屬性清除對`float`的影響，值為`left`, `right`, `both`
`position`：制定塊的位置，即塊相對于其父塊的位置和相對它自身應(yīng)該在位置，值有`absolute`, `fixed`, `relative`, `static`
當(dāng)將子塊的`position`設(shè)置為`absolute`時，子塊已經(jīng)不再從屬于父塊，其邊框設(shè)置的距離是相對頁面`body`的距離，而不是父塊的距離
當(dāng)將塊的`position`參數(shù)設(shè)置為`relative`時，與將其設(shè)置為`absolute`時完全不同，這時子塊時相對于自身在父塊的原先位置來進(jìn)行定位的。

定位資料參考：http://www.cnblogs.com/dolphi...

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/113401.html

相關(guān)文章

  • 前端面試系列--前言篇

    摘要：這個系列的文章將記錄我準(zhǔn)備春招的整個過程，我會將自己學(xué)習(xí)到的新知識記錄在這個系列里文章目錄前言說明準(zhǔn)備方向目標(biāo)前言說明作為半個科班出身學(xué)數(shù)學(xué)的應(yīng)屆生，在學(xué)習(xí)計(jì)算機(jī)的時候還是比較吃力的，從今年月份開始接觸前端，到現(xiàn)在也有個月左右了。 這個系列的文章將記錄我準(zhǔn)備春招的整個過程，我會將自己學(xué)習(xí)到的新知識記錄在這個系列里 文章目錄 前言說明 準(zhǔn)備方向 目標(biāo) 前言說明 ??作為半個科班出身...

    sshe 評論0 收藏0

  • 前端面試系列--前言篇

    摘要：這個系列的文章將記錄我準(zhǔn)備春招的整個過程，我會將自己學(xué)習(xí)到的新知識記錄在這個系列里文章目錄前言說明準(zhǔn)備方向目標(biāo)前言說明作為半個科班出身學(xué)數(shù)學(xué)的應(yīng)屆生，在學(xué)習(xí)計(jì)算機(jī)的時候還是比較吃力的，從今年月份開始接觸前端，到現(xiàn)在也有個月左右了。 這個系列的文章將記錄我準(zhǔn)備春招的整個過程，我會將自己學(xué)習(xí)到的新知識記錄在這個系列里 文章目錄 前言說明 準(zhǔn)備方向 目標(biāo) 前言說明 ??作為半個科班出身...

    zsirfs 評論0 收藏0

  • 前端面試系列--前言篇

    摘要：這個系列的文章將記錄我準(zhǔn)備春招的整個過程，我會將自己學(xué)習(xí)到的新知識記錄在這個系列里文章目錄前言說明準(zhǔn)備方向目標(biāo)前言說明作為半個科班出身學(xué)數(shù)學(xué)的應(yīng)屆生，在學(xué)習(xí)計(jì)算機(jī)的時候還是比較吃力的，從今年月份開始接觸前端，到現(xiàn)在也有個月左右了。 這個系列的文章將記錄我準(zhǔn)備春招的整個過程，我會將自己學(xué)習(xí)到的新知識記錄在這個系列里 文章目錄 前言說明 準(zhǔn)備方向 目標(biāo) 前言說明 ??作為半個科班出身...

    Freelander 評論0 收藏0

  • 前端學(xué)習(xí)記錄（HTML篇）

    摘要：如果在元素內(nèi)點(diǎn)擊文本，就會觸發(fā)，瀏覽器會自動將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。在用戶使用具體某種方式加入付費(fèi)會員時，須閱讀并確認(rèn)相關(guān)的用戶協(xié)議和使用方法。在之前，主要提供兩種元素來進(jìn)行多媒體的展示，一個是標(biāo)簽，另一個是標(biāo)簽。 HTML Hyper Text Markup Language，超文本標(biāo)記語言，不是一種編程語言，而是一種標(biāo)記語言 思想：網(wǎng)頁中有很多數(shù)據(jù)，不同的數(shù)據(jù)可能需要不同...

    gplane 評論0 收藏0

  • iOS轉(zhuǎn)前端的學(xué)習(xí)記錄

    摘要：我的第一個項(xiàng)目是一個基于和的后臺管理系統(tǒng)，當(dāng)時我還沒有任何的前端開發(fā)知識，時間也比較緊，就在學(xué)習(xí)和的基礎(chǔ)后，有針對性的對和進(jìn)行了了解。 第一篇博文，寫在從零開始學(xué)前端的兩個月后，期間經(jīng)過了春節(jié)，之后又經(jīng)歷了一些動蕩。算是在邊做邊學(xué)中堅(jiān)持下來，現(xiàn)在基本上可以完成一些業(yè)務(wù)邏輯上的開發(fā)工作。想到應(yīng)該總結(jié)一下這兩個月的學(xué)習(xí)，也是對自己的知識掌握情況做一個梳理。 我的第一個項(xiàng)目是一個基于vue和...

    Pines_Cheng 評論0 收藏0

發(fā)表評論

0條評論

skinner

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<