web之CSS心得分享

1憔狞、CSS介紹

CSS指層疊樣式表（Cascading Style Sheets)
樣式定義如何顯示ＨＴＭＬ元素
樣式通常存儲在樣式表中
把樣式添加到CSS文件中凳干，是為了解決內(nèi)容與變現(xiàn)分離的問題
外部樣式表可以極大提高工作效率
尾部樣式表通常存儲在CSS文件中
多個樣式定義可層疊為一個

2、兩個常用容器

div

div（diversion）就是劃分的意思凭涂。
主要是用來CSS布局用的祝辣，是常見的塊級布局標(biāo)簽

span

span常見的行級布局標(biāo)簽，主要用來包裹文字的切油，給文字設(shè)置樣式
作用：想通過CSS給文字調(diào)整大小蝙斜，設(shè)置顏色，設(shè)置字體類型可以使用算盤標(biāo)簽

3澎胡、CSS語法

語法格式

CSS規(guī)則由兩個主要的部分構(gòu)成：選擇器孕荠，以及一條或多條聲明娩鹉；

選擇器：通常是您需要改變樣式的HTML元素；

每條聲明由一個屬性和一個值組成稚伍。

屬性（property）是妮妮希望設(shè)置的樣式屬性（style attribute）弯予。

每個屬性有一個值。屬性和值被冒號分開

4个曙、CSS的三種引入方式

行間引入：內(nèi)聯(lián)樣式

弊端：重復(fù)代碼锈嫩、代碼冗余、可讀性極差垦搬、沒有實現(xiàn)樣式與結(jié)構(gòu)的分離呼寸。

優(yōu)點：書寫簡單、CSS樣式的優(yōu)先級

style = ”屬性名1：屬性值悼沿；屬性名2：屬性值等舔；...”

內(nèi)部引入：內(nèi)部樣式

缺點：沒有從本子上實現(xiàn)樣式與結(jié)構(gòu)的分離。

優(yōu)點：樣式復(fù)用糟趾、代碼精簡慌植、可讀性強。

<style type="text/css">
    標(biāo)簽名{
        屬性名1：屬性值义郑；
        屬性名2：屬性值蝶柿；
        。非驮。交汤。
    }
</style>

外部引用：外部樣式

樣式寫在CSS文件中，用link調(diào)用劫笙，link標(biāo)簽可以出現(xiàn)多次芙扎，用于連接外部的多個CSS文件

【注】如果有相同屬性重復(fù)設(shè)置，則有覆蓋效果填大，以最后一次設(shè)置為準(zhǔn)戒洼，

.js文件中
標(biāo)簽名{
        屬性名1：屬性值；
        屬性名2：屬性值允华；
        圈浇。。靴寂。
    }
.html文件中
<head>
    <link rel = "stylesheet" type = "text/css" href = ".js文件路徑" />
</head>

5磷蜀、樣式優(yōu)先級

樣式表允許以多種方式規(guī)定樣式信息。樣式可以規(guī)定在單個的 HTML 元素中百炬，在 HTML 頁的頭元素中褐隆，或在一個外部的 CSS 文件中。甚至可以在同一個 HTML 文檔內(nèi)部引用多個外部樣式表剖踊。

一般情況下妓灌，優(yōu)先級如下：

內(nèi)聯(lián)樣式）Inline style > （內(nèi)部樣式）Internal style sheet >（外部樣式）External style sheet > 瀏覽器默認樣式

行間引用 > 內(nèi)部引用 行間引用 > 外部引用

【注】內(nèi)部引用轨蛤、外部引用看引用的位置先后順序，誰在后相同樣式就一最后一個為準(zhǔn)虫埂。

代碼提示快捷鍵：Alt + /

6祥山、常用的選擇器

標(biāo)簽選擇器

標(biāo)簽名（CSS聲明）

id選擇器

操作的前提：操作內(nèi)容必須有id屬性；
id的名稱要求唯一掉伏；
+id名稱（CSS聲明）
場景：對于多個相同的標(biāo)簽缝呕，操作其中的一個。

類選擇器/class選擇器

.class名稱（點class名稱）
操作前提：操作內(nèi)容必須有class屬性
可以為多個內(nèi)容設(shè)置相同class屬性
場景：可以同時為多個內(nèi)容設(shè)置CSS樣式

后代選擇器

后代選擇器
找出指定的標(biāo)簽所有符合條件的后代標(biāo)簽斧散，兒子級供常、孫子及重孫及。鸡捐。栈暇。

div p{
    color: red;
} 
div標(biāo)簽下所有p標(biāo)簽設(shè)置為紅色

子代選擇器

找出指定的標(biāo)簽所偶符合條件的子代標(biāo)簽

標(biāo)題名>子代標(biāo)簽名

div>p{
    color: blue;
}
div下子集p標(biāo)簽才會被設(shè)置為藍色

示例

屬性選擇器

[title]選擇所有包含title屬性的內(nèi)容；
[title="值"]選擇所有包含title屬性箍镜，并且值為“值”的內(nèi)容

<style>
    [title]{
        color: red;
    }
    [title="num1"]{
        font-style: italic;
        font-size: 10px;
    }
</style>

<h2 title="num1">標(biāo)題二</h2>
<h2 title="num2">標(biāo)題二</h2>
<h2 title="num3">標(biāo)題二</h2>

通配符選擇器

*（CSS聲明）
用途一：基本設(shè)置源祈；
用途二：清除瀏覽器的默認樣式

*{
    margin: 0;
    padding: 0;
}

first-child 偽類

您可以使用 :first-child 偽類來選擇父元素的第一個子元素。

選擇器匹配任何元素的第一個子元素的 <p> 元素：
p:first-child{
    color:blue;
}

選擇器優(yōu)先級

1.id選擇器指定的樣式 > 類選擇器指定的樣式 > 元素標(biāo)簽選擇器指定的樣式色迂；

2. 對于相同類型選擇器制定的樣式香缺，在樣式表文件中，越靠后的優(yōu)先級越高歇僧；

3. 如果要讓某個樣式的優(yōu)先級變高图张，可以使用【!important】來指定；

7诈悍、常用標(biāo)簽樣式

文本

color：設(shè)置文本樣式

<div style="color: red;">一些文本祸轮。</div>

direction：設(shè)置文本方向

【注】倒序一定要加：unicode-bidi: bidi-override;

<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style type="text/css">
           div.ex1 {
               direction:rtl;
               unicode-bidi: bidi-override;
           }
       </style>
   </head>
   <body>
       <div>一些文本。默認的書寫方向侥钳。</div>
       <div class="ex1">一些文本适袜。 Right-to-left 方向。</div>
   </body>
</html>

letter-spaceing：設(shè)置字符間距

<p id="text" style="letter-spacing: 1px;">
    提供了非常靈活的變量命名策略慕趴。
    變量名是大小寫敏感的，且不包含語義鄙陡，
    意思是說
</p>

line-height：設(shè)置行高

<p id="text" style="line-height: 30px;">
    提供了非常靈活的變量命名策略冕房。<br>
    變量名是大小寫敏感的，<br>
    意思是說且不包含語義趁矾，
</p>

text-align：對齊元素的文本

<p id="text" style="text-align: center;">
    提供了非常靈活的變量命名策略耙册。<br>
    變量名是大小寫敏感的，<br>
    意思是說且不包含語義毫捣，
</p>

text-decoration：項文本添加修飾

主要是添加：下劃線详拙、上劃線帝际、刪除線

格式：text-decoration：【1】【2】【3】【4】;

【1】【2】可以是：overline：上劃線 line-through：刪除線 underline：下劃線

【3】可以是：dotted：虛線 wavy：波浪線

【4】顏色

【注】【1】必須有，其他可選饶辙。

<style type="text/css">
    #a1{/*上劃線*/
        text-decoration: overline red;
    }
    #a2{/*刪除線*/
        text-decoration: line-through red;
    }
    #a3{/*下劃線*/
        text-decoration: underline red;
    }
    #a4{/*上下劃線*/
        text-decoration: overline underline red;
    }
    #a5{/*下虛線*/
        text-decoration: underline dotted red;
    }
    #a6{/*下波浪線*/
        text-decoration: underline wavy red; 
    }
</style>

text-indent：縮進元素中文本的首行

<p style="text-indent:50px ">
 變量名是大小寫敏感的蹲诀，
 且不包含語義，意思是說弃揽，
 不會根據(jù)變量的名字來區(qū)別對待它們脯爪。 
 （譯者注：不會自動將全大寫的
 變量識別為常量，也不會將有特定前后
 綴的變量自動識別為某種特定類型的變量矿微，
 即不會根據(jù)變量名字痕慢，自動判斷變量的任何屬性
 </p>

text-shadow：設(shè)置文本陰影

【格式】：text-shodow：h-shadow v-shadow blur color;

【參數(shù)】：h-shadow：必需。水平陰影的位置涌矢。允許負值掖举。

v-shadow：必需。垂直陰影的位置娜庇。允許負值塔次。

blur：可選。模糊的距離俺叭。

color：可選。陰影的顏色泰偿。
text-transform：控制元素中的字母

屬性值：

none	默認熄守。定義帶有小寫字母和大寫字母的標(biāo)準(zhǔn)的文本。
capitalize	文本中的每個單詞以大寫字母開頭耗跛。
uppercase	定義僅有大寫字母裕照。
lowercase	定義無大寫字母，僅有小寫字母调塌。
inherit	規(guī)定應(yīng)該從父元素繼承 text-transform 屬性的值晋南。

unicode-bidi：設(shè)置或返回文本是否被重寫

值	描述
normal	默認。不使用附加的嵌入層面羔砾。
embed	創(chuàng)建一個附加的嵌入層面负间。
bidi-override	創(chuàng)建一個附加的嵌入層面。重新排序取決于 direction 屬性姜凄。
initial	設(shè)置該屬性為它的默認值葫松。請參閱 initial熏版。
inherit	從父元素繼承該屬性。請參閱 inherit

例：文字倒序，就需要將文本重寫

<html>
<head>
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title>
<style>
div.ex1
{
 direction:rtl;
 unicode-bidi:bidi-override;
}
</style>
</head>
<body>
?
<div>一些文本圣贸。默認的書寫方向艾扮。</div>
<div class="ex1">一些文本 。從右向左的方向。</div>
?
</body>
</html>

vertical-align：設(shè)置元素的垂直對齊

對img的操作

<html>
 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title></title>
 <style type="text/css">
 img.img1{
 vertical-align: calc(-50px);
 }
 img.img2{
 vertical-align: top;
 }
 img.img3{
 vertical-align: bottom;
 }
 </style>
 </head>
 <body>
 <p id="text">你好嗎<img class="img1" width="100px" height="100px" src="img/123.png" >我很好</p>
 <p id="text">你好嗎<img class="img2" width="100px" height="100px" src="img/123.png" >我很好</p>
 <p id="text">你好嗎<img class="img3" width="100px" height="100px" src="img/123.png" >我很好</p>
 </body>
</html>

值	描述
baseline	默認云头。元素放置在父元素的基線上。
sub	垂直對齊文本的下標(biāo)淫半。
super	垂直對齊文本的上標(biāo)
top	把元素的頂端與行中最高元素的頂端對齊
text-top	把元素的頂端與父元素字體的頂端對齊
middle	把此元素放置在父元素的中部溃槐。
bottom	把元素的底端與行中最低的元素的頂端對齊。
text-bottom	把元素的底端與父元素字體的底端對齊撮慨。
length
%	使用 "line-height" 屬性的百分比值來排列此元素竿痰。允許使用負值。
inherit	規(guī)定應(yīng)該從父元素繼承 vertical-align 屬性的值

white-space：設(shè)置元素中空白的處理方式

值	描述
normal	默認砌溺∮吧妫空白會被瀏覽器忽略。
pre	空白會被瀏覽器保留规伐。其行為方式類似 HTML 中的 <pre> 標(biāo)簽蟹倾。
nowrap	文本不會換行，文本會在在同一行上繼續(xù)猖闪，直到遇到標(biāo)簽為止鲜棠。
pre-wrap	保留空白符序列，但是正常地進行換行培慌。
pre-line	合并空白符序列豁陆，但是保留換行符。
inherit	規(guī)定應(yīng)該從父元素繼承 white-space 屬性的值吵护。

word-spacing：設(shè)置字間距

p{
 word-spacing:20px;
}

值	描述
normal	默認盒音。定義單詞間的標(biāo)準(zhǔn)空間。
length	定義單詞間的固定空間馅而。
inherit	規(guī)定應(yīng)該從父元素繼承 word-spacing 屬性的值祥诽。

連接

a:link - 正常，未訪問過的鏈接
a:visited - 用戶已訪問過的鏈接
a:hover - 當(dāng)用戶鼠標(biāo)放在鏈接上時
a:active - 鏈接被點擊的那一刻

【注】其中hover瓮恭、active屬性對所有標(biāo)簽都有效雄坪。
注意： 在 CSS 定義中，active 必須被置于 hover 之后屯蹦，才是有效的维哈。

列表

去掉樣式

ul{
 list-style-type: none;
 padding: 0px;
 margin: 0px;
}

改變圓點

ul{
 list-style-type:circle;/*圓形*/
 list-style-type:square;/*方形*/
 list-style-type:upper-roman;/*大寫羅馬字母*/
 list-style-type:lower-roman;/*小寫羅馬字母*/
 list-style-type:lower-alpha;/*小寫字母*/
 list-style-type:supper-alpha;/*大寫字母*/
}

添加自定義圖片作為點

ul{
 list-style-type:none;
 padding:0px;
 margin:0px;
}
ul li{
 background-image: url(https://www.runoob.com/try/demo_source/sqpurple.gif);
 background-repeat:no-repeat;
 /* background-size: 10px; */
 padding-left:14px;
}

表格

邊框

td{
 border: 1px solid black;
}

文本居中

td{
 text-align:right;/*左右對齊*/
 vertical-align:middle;/*上下對齊*/
}

盒子模型

通常設(shè)置的width和height指的是content的寬高，但實際中瀏覽器中卻要將padding登澜、border阔挠、margin一起加起來。也就是下面的計算公式：

最終元素的總寬度計算公式是這樣的：

總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距帖渠。

元素的總高度最終計算公式是這樣的：

總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距谒亦。

邊框

基本設(shè)置格式

border：width color style竭宰；

border:1px red solid;

單獨設(shè)置樣式

border-style：屬性1 屬性2 屬性3 屬性4空郊；【上->右->下->左】

border-style：屬性1 屬性2 屬性3份招；【上->左右->下】

border-style：屬性1 屬性2；【上下->左右】

border-style：屬性1狞甚；【上下左右屬性相同】

屬性	作用
none:	默認無邊框
dotted:	定義一個點線邊框
dashed:	定義一個虛線邊框
solid:	定義實線邊框
double:	定義兩個邊框锁摔。兩個邊框的寬度和 border-width 的值相同
groove:	定義3D溝槽邊框。效果取決于邊框的顏色值
ridge:	定義3D脊邊框哼审。效果取決于邊框的顏色值
inset:	定義一個3D的嵌入邊框谐腰。效果取決于邊框的顏色值
outset:	定義一個3D突出邊框。效果取決于邊框的顏色值

塊級元素和行級元素

塊級標(biāo)簽

p涩盾、div十气、h1~h6、ul春霍、ol砸西、li、dl址儒、dt芹枷、dd

行內(nèi)標(biāo)簽

span、i莲趣、b

行內(nèi)塊級標(biāo)簽

img鸳慈、input、select

塊級和行內(nèi)之間的轉(zhuǎn)換

display:inline喧伞；轉(zhuǎn)換成行內(nèi)元素 display:block走芋；轉(zhuǎn)換為塊級元素 display:inline-block；轉(zhuǎn)換成行內(nèi)塊級元素 display:none絮识；隱藏元素

【注】隱藏一個元素可以通過把display屬性設(shè)置為"none"绿聘，或把visibility屬性設(shè)置為"hidden"。但是請注意次舌，這兩種方法會產(chǎn)生不同的結(jié)果：

display:none熄攘；隱藏的元素不會占用原來占據(jù)的空間
visibility:hidden可以隱藏某個元素，但隱藏的元素仍需占用與未隱藏之前一樣的空間彼念。也就是說挪圾，該元素雖然被隱藏了，但仍然會影響布局逐沙。

浮動

字面意思是浮起來哲思，動起來。自身浮動到上一層不占據(jù)原有空間吩案，根據(jù)屬性（left棚赔、right）移動位置，其余元素重新排列。

【注】浮動的元素不會覆蓋其他元素靠益，而其他元素將環(huán)繞與其周圍丧肴。

<style>
img 
{
 float:left;
}
</style>
?
?
<body>
<p>
浮動元素之前的元素將不會受到影響。
</p>
<p>
<img src="img/123.png" width="95" height="84" />
元素的水平方向浮動胧后，意味著元素只能左右移動而不能上下移動芋浮。
一個浮動元素會盡量向左或向右移動，直到它的外邊緣碰到包含
框或另一個浮動框的邊框為止壳快。
浮動元素之后的元素將圍繞它纸巷。
浮動元素之前的元素將不會受到影響。
如果圖像是右浮動眶痰，下面的文本流將環(huán)繞在它左邊：
元素的水平方向浮動瘤旨，意味著元素只能左右移動而不能上下移動。
一個浮動元素會盡量向左或向右移動竖伯，直到它的外邊緣碰到包含
框或另一個浮動框的邊框為止裆站。
浮動元素之后的元素將圍繞它。
浮動元素之前的元素將不會受到影響黔夭。
如果圖像是右浮動宏胯，下面的文本流將環(huán)繞在它左邊：
</p>

定位

格式

position：屬性值；
top:20px;
bottom:30px;
left：30px;
right:90px
【注】任選兩個即可定位本姥；

屬性值

屬性值	作用
static	默認值肩袍，即沒有定位，遵循正常的文檔流對象婚惫。
fixed	元素的位置相對于瀏覽器窗口是固定位置氛赐。即使窗口是滾動的它也不會移動：
relative	相對定位元素的定位是相對其正常位置。移動相對定位元素先舷，但它原本所占的空間不會改變艰管。
absolute	絕對定位的元素的位置相對于最近的已定位父元素，如果元素沒有已定位的父元素蒋川，那么它的位置相對于<html>;absolute 定位使元素的位置與文檔流無關(guān)牲芋，因此不占據(jù)空間。
sticky	基于用戶的滾動位置來定位捺球。用于導(dǎo)航欄
z-index	z-index屬性指定了一個元素的堆疊順序（哪個元素應(yīng)該放在前面缸浦，或后面）

img{
 position:absolute;
 left:0px;
 top:0px;
 z-index:-1;
}

描述

絕對定位的元素的位置相對于最近的已定位父元素，如果元素沒有已定位的父元素氮兵，那么它的位置相對于<html>:

那么在使用絕對定位時需要將relative和absolute兩個一起使用裂逐，relative用于父級，absolute用于子級泣栈。也就是大家所說的"子絕父相"卜高。

例子：

#box2{
 border: 1px red solid;
 background-color: yellow;
 padding: 50px;
 width: 300px;
 height: 400px;
 margin-top: 50px;
 margin-left: 100px;
 position: relative;
}
#content{
?
 border: 1px black solid;
 background-color: greenyellow;
 width: 300px;
 height: 400px;
 position: absolute;
 top: 100px;
 left: 100px;
}
<div id="box2">
 <div id="content"></div>
</div>

注意事項

【注】絕對定位如果父級不使用position:relative弥姻，而直接使用position:absolute絕對定位，這個時候?qū)詁ody標(biāo)簽為父級掺涛，使用position:absolute定義對象無論位于DIV多少層結(jié)構(gòu)蚁阳，都將會浮動起來以<body>為父級（參考級）進行絕對定位。

【注】定位只針對于父級的border的內(nèi)邊為原點（0,0）來進行定位鸽照，及紅色邊。