學(xué)習(xí)筆記—CSS基礎(chǔ)

caspar 發(fā)布于2019-04-23 11:41 / 1111人閱讀

摘要：的聲明內(nèi)聯(lián)樣式在元素內(nèi)部在標(biāo)簽上使用屬性進(jìn)行聲明。此聲明只作用于當(dāng)前標(biāo)簽。擁有最高優(yōu)先級(jí)。注意，在使用相對(duì)定位時(shí)，無論是否進(jìn)行移動(dòng)，元素仍然占據(jù)原來的空間。因此，移動(dòng)元素會(huì)導(dǎo)致它覆蓋其它框。元素的位置相對(duì)于瀏覽器窗口是固定位置。

概念

　　CSS 指層疊樣式表（Cascading Style Sheets），是一種標(biāo)記語言，屬于瀏覽器解釋型語言，可以直接由瀏覽器執(zhí)行，不需要編譯。

　　HTML只負(fù)責(zé)網(wǎng)頁的內(nèi)容，標(biāo)簽盡量只負(fù)責(zé)語意不負(fù)責(zé)樣式。CSS 主要負(fù)責(zé)網(wǎng)頁的樣式，給網(wǎng)頁進(jìn)行布局，解決了內(nèi)容與表現(xiàn)分離的問題。

　　CSS 可以重復(fù)使用，避免代碼冗余。但依賴于HTML。

CSS的聲明

內(nèi)聯(lián)樣式（在 HTML 元素內(nèi)部）

　　在 html 標(biāo)簽上使用 style 屬性進(jìn)行聲明。此聲明只作用于當(dāng)前 html 標(biāo)簽。

　　擁有最高優(yōu)先級(jí)。

<p style="color: blue;size: 34px">這是個(gè)內(nèi)聯(lián)樣式p>

內(nèi)部樣式表（位于標(biāo)簽內(nèi)部）

　　在 head 標(biāo)簽中使用 style 標(biāo)簽聲明。此聲明一般聲明當(dāng)前網(wǎng)頁的公共樣式或者給某個(gè)標(biāo)簽的多帶帶樣式。

外部樣式表

　　在 head 標(biāo)簽中使用 link 標(biāo)簽引入外部聲明好的 css 文件。解決了不同網(wǎng)頁間樣式重復(fù)使用的問題。

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

　　注意：內(nèi)聯(lián)樣式的優(yōu)先級(jí)最高。而內(nèi)部樣式表和外部樣式表，若給同一標(biāo)簽定義樣式，則誰后聲明就執(zhí)行誰。

    
    <style type="text/css">
        p {
            color:yellow;
            size: 30px;
        }
    style>
    <link rel="stylesheet" type="text/css" href="style.css" />



    
    <link rel="stylesheet" type="text/css" href="style.css" />
    <style type="text/css">
        p {
            color:yellow;
            size: 30px;
        }
    style>

CSS的選擇器

標(biāo)簽選擇器

　　標(biāo)簽名{ 樣式名 : 樣式值 ; ...}

　　會(huì)給當(dāng)前網(wǎng)頁內(nèi)所有該標(biāo)簽增加相同的樣式。

<head>
    <style type="text/css">
        /*標(biāo)簽選擇器*/
       p {
            color: yellow;
            size:40px;
        }
    style>
head>
<body>
    <p>這是個(gè)黃色p>
body>

?id選擇器

　　#標(biāo)簽的id屬性值{ 樣式名 : 樣式值 ; ...}

　　給某個(gè)指定的標(biāo)簽添加樣式。id 屬性不要以數(shù)字開頭，一個(gè) id 值最好只賦值一次。

<head>
    <style type="text/css">
        /*id選擇器*/
        #red {
            color: red;
            size:40px;
        }
    style>
head>
<body>
    <p id="red">這是個(gè)紅色p>
body>

類選擇器

　　.類選擇器名{ 樣式名 : 樣式值 ; ...}

　　給不同的標(biāo)簽添加相同的樣式。類名的第一個(gè)字符不能使用數(shù)字?！　?/p>

<head>
    <style type="text/css">
        /*類選擇器*/
        .ppp {
            color: red;
            size:40px;
        }
    style>
head>
<body>
    <p class="ppp">這是個(gè)紅色p>
    <p class="ppp">這是個(gè)紅色p>
body>

通用選擇器

　　* { 樣式名 : 樣式值 ; ...}

　　選擇所有的 html 標(biāo)簽添加相同的樣式。

        /*全部選擇*/
        *{
            margin: 40px;
            color: orange;
        }

組合選擇器

　　選擇器1,選擇器2,...{ 樣式名 : 樣式值 ; ...}

　　給不同選擇器添加相同樣式。

<head>
    <style type="text/css">
        /*組合選擇器*/
        .ppp,#qqq {
            color:purple;
        }
    style>
head>
<body>
    <p class="ppp">這是個(gè)紫色p>
    <p id="qqq">這是個(gè)紫色p>
body>

子標(biāo)簽選擇器

　　選擇器1 子標(biāo)簽選擇器 ...{ 樣式名 : 樣式值 ; ...}

<head>
    <style type="text/css">
        /*子標(biāo)簽選擇器*/
        .ggg a {
            color:green;
        }
        #bbb a {
            color: #000;
        }
    style>
head>
<body>
    <p class="ggg"><a href="#">這是綠色a>p>
    <p id="bbb"><a href="#">這是黑色a>p>
body>

屬性選擇器

　　標(biāo)簽名【屬性名=屬性值】{ 樣式名 : 樣式值 ; ...}

　　給具備某屬性的標(biāo)簽添加樣式。

注意：

　　使用*選擇器給整個(gè)頁面添加基礎(chǔ)樣式

　　使用類選擇器給不同標(biāo)簽添加基礎(chǔ)樣式

　　使用標(biāo)簽選擇器給某類標(biāo)簽添加基礎(chǔ)樣式

　　使用id選擇器、屬性選擇器、內(nèi)聯(lián)樣式給某個(gè)具體的標(biāo)簽添加個(gè)性化樣式

CSS常用樣式

邊框設(shè)置

　　border:5px solid red;

字體設(shè)置

　　font-size:10px;　　設(shè)置字體大小

　　font-family:"黑體";　　設(shè)置字體

　　font-weight:bold;　　設(shè)置字體加粗

字體顏色設(shè)置

　　color:顏色;　　

背景顏色設(shè)置

　　background-color：顏色;

背景圖片設(shè)置

　　background-img:url(路徑)

　　background-repeate:no-repeate;　　設(shè)置圖片不重復(fù)

　　background-size:cover;　　設(shè)置圖片平鋪

高和寬的設(shè)置

　　width:

　　height:

浮動(dòng)設(shè)置

　　float:left|right

行間距設(shè)置

　　line-height

盒子模型

div標(biāo)簽

　　塊級(jí)標(biāo)簽，主要用來進(jìn)行網(wǎng)頁布局，會(huì)將其中的子元素內(nèi)容作為一個(gè)獨(dú)立的整體存在。

　　默認(rèn)寬度是頁面的寬地，但是可以設(shè)置。沒有默認(rèn)高度，但是可以撐開。

　　如果子元素設(shè)置了百分比的高或者寬，占據(jù)的是div的百分比，不是整個(gè)頁面的。

盒子模型

　　CSS盒模型本質(zhì)上是一個(gè)盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充（內(nèi)邊距），和實(shí)際內(nèi)容。

　　外邊距：margin

　　　　用來設(shè)置元素與元素之間的距離，上下左右均可多帶帶設(shè)置。

　　　　margin:0px auto;　　上下外邊距為0，左右居中

　　邊框：border

　　　　用來設(shè)置元素邊框的大小、形式和顏色。上下左右均可多帶帶設(shè)置。

　　內(nèi)邊距：padding

　　　　設(shè)置內(nèi)容和邊框之間的距離，上下左右均可多帶帶設(shè)置。

　　內(nèi)容：

　　　　設(shè)置寬度和高度即可改變內(nèi)容區(qū)域的大小。

CSS的定位

相對(duì)定位

　　position:relative

　　相對(duì)元素原有位置移動(dòng)指定的距離，可以使用top、left、right、bottom來進(jìn)行上下左右的偏移。

　　相對(duì)的是自己原本的位置，不改變其他元素位置。

　　注意，在使用相對(duì)定位時(shí)，無論是否進(jìn)行移動(dòng)，元素仍然占據(jù)原來的空間。因此，移動(dòng)元素會(huì)導(dǎo)致它覆蓋其它框。

絕對(duì)定位

　　position:absolute

　　可以使元素根據(jù)參照元素或已定位的父元素來進(jìn)行移動(dòng)。

　　絕對(duì)定位的元素的位置相對(duì)于最近的已定位父元素，如果元素沒有已定位的父元素，那么它的位置相對(duì)于

　　絕對(duì)定位的元素會(huì)覆蓋在其他框。

固定定位

　　position:fixed

　　將元素固定在頁面的某個(gè)位置，不會(huì)隨著滾動(dòng)條的移動(dòng)而改變位置。

　　元素的位置相對(duì)于瀏覽器窗口是固定位置。

注意

　　元素的定位與文檔流無關(guān)，所以它們可以覆蓋頁面上的其它元素

　　z-index屬性指定了一個(gè)元素的堆疊順序（哪個(gè)元素應(yīng)該放在前面，或后面）

　　具有更高堆疊順序的元素總是在較低的堆疊順序元素的前面。

GPU云服務(wù)器云服務(wù)器基礎(chǔ)學(xué)習(xí)筆記 css基礎(chǔ) 基礎(chǔ)css css基礎(chǔ)教程

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/1019.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

caspar

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

第五章-Java修飾符#yyds干貨盤點(diǎn)#

閱讀 3735·2021-11-23 09:51
RAKsmart(RAK Cloud)：首購云服務(wù)器低至3折，云服務(wù)器產(chǎn)品全場(chǎng)8折優(yōu)惠，香港云$9.

閱讀 1749·2021-10-22 09:53
cubecloud，國(guó)慶限時(shí)促銷，全場(chǎng)VPS 88，可選中國(guó)香港CN2 GIA/美國(guó)CN2 GIA/

閱讀 1406·2021-10-09 09:56
深入css之去除inline-block元素之間的多余間隙

閱讀 933·2019-08-30 13:47
APICloud Github 5大開源項(xiàng)目集合展示

閱讀 2224·2019-08-30 12:55
CSS技巧記錄

閱讀 1655·2019-08-30 12:46
display: flex;’布局下使用‘white-space: nowrap;’導(dǎo)致的問題

閱讀 1181·2019-08-30 10:51
初探響應(yīng)式布局 - 以小項(xiàng)目為例

閱讀 2480·2019-08-29 12:43

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

學(xué)習(xí)筆記—CSS基礎(chǔ)

概念

CSS的聲明

內(nèi)聯(lián)樣式（在 HTML 元素內(nèi)部）

內(nèi)部樣式表（位于 標(biāo)簽內(nèi)部）

外部樣式表

CSS的選擇器

標(biāo)簽選擇器

?id選擇器

類選擇器

通用選擇器

組合選擇器

子標(biāo)簽選擇器

屬性選擇器

CSS常用樣式

盒子模型

div標(biāo)簽

盒子模型

CSS的定位

相對(duì)定位

絕對(duì)定位

固定定位

注意

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

內(nèi)部樣式表（位于標(biāo)簽內(nèi)部）