CSS樣式表回憶錄-創(chuàng)新互聯(lián)

三種聲明方式：

創(chuàng)新互聯(lián)建站2013年至今，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目網(wǎng)站設(shè)計制作、做網(wǎng)站網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元大姚做網(wǎng)站,已為上家服務(wù),為大姚各地企業(yè)和個人服務(wù),聯(lián)系電話:028-86922220

標(biāo)簽內(nèi)style聲明，內(nèi)聯(lián)式

HTML頭部聲明，內(nèi)部

<style>
????.cssname1{}
????#idname1{}
????

</style>

單獨的CSS文件聲明，外部，需要在html里調(diào)用：

<head><?link?rel="stylesheet"?type="text/css"?href="mystyle.css"><?/head>

優(yōu)先級：標(biāo)簽內(nèi)style>組合定義/層定義>。定義>#定義（還遵循定義時就近原則）

html類別：行標(biāo)簽（a\span）、塊標(biāo)簽(div)

塊標(biāo)簽：點據(jù)一整行、有position\padding屬性

行標(biāo)簽：占據(jù)一部分、沒有position\padding屬性

行塊轉(zhuǎn)換：display屬性，inline轉(zhuǎn)換為行、block轉(zhuǎn)換為塊、inline-block擁有塊屬性的行標(biāo)簽。

CSS中的偽元素：

語法： :偽元素名

link\visited\active\hover\focus\first-letter\first-line\first-child\before\after\lang

CSS基本語法：

選擇器{

屬性1:值;

屬性2:值;

......

}

1、選擇器：

標(biāo)簽名1 [標(biāo)簽名2] [標(biāo)簽名3]......：根據(jù)標(biāo)簽順序匹配嵌套標(biāo)簽

.選擇器名：在標(biāo)簽的class屬性中調(diào)用

#idname? ：id是標(biāo)簽的屬性，#應(yīng)用于所有標(biāo)簽id為idname的標(biāo)簽

[屬性=值]：pname是標(biāo)簽的屬性，可以是任何屬性

復(fù)雜一點的選擇器：

ul.pagination?li?a:hover:not(.active)?{background-color:?#ddd;}
ul標(biāo)簽的pagenation類下的li標(biāo)簽a標(biāo)簽的active類

屬性:

1、background:

參數(shù)順序：

backgournd:RGB(255,255,255)?url('image/1.jpg')?no-repeat?right?top;

單獨聲明一項：

background-color:顏色， #DDDDD/RGB(255,255,255)/red

background-image:背景圖片，url('images/1.jpg')

background-repeat:圖片重復(fù)，默認(rèn)重復(fù)，no-repeat不重復(fù)，repeat-x水平重復(fù)，repeat-y垂直重復(fù)

background-attachment:背景固定，默認(rèn)scroll不固定，fixed固定（字動圖不動），inherit背景繼承父元素的屬性。

background-position:背景圖片位置，left,right,top,bottom,center

background-size:背景圖片大小，（長寬）

background-clip:背景大小匹配，border-box匹配到邊框最外側(cè)大小，padding-box匹配到內(nèi)側(cè)，content-box匹配到文本

2、link定義超鏈接的式樣

注意： a:hover 必須在 a:link 和 a:visited 之后，需要嚴(yán)格按順序才能看到效果。

注意： a:active 必須在 a:hover 之后。

a:link{}：正常，未訪問的鏈接

a:visited{}：訪問過的鏈接

a:hover{}：鼠標(biāo)放在鏈接上時

a:active{}：鼠標(biāo)點擊時

為不同的鏈接，定義不同的樣式

<!DOCTYPE?html>
<html>
<head>
<meta?charset="utf-8">?
<style>
a.one:link?{color:#ff0000;}
a.one:visited?{color:#0000ff;}
a.one:hover?{color:#ffcc00;}
a.two:link?{color:#ff0000;}
a.two:visited?{color:#0000ff;}
a.two:hover?{font-size:150%;}
a.three:link?{color:#ff0000;}
a.three:visited?{color:#0000ff;}
a.three:hover?{background:#66ff66;}
a.four:link?{color:#ff0000;}
a.four:visited?{color:#0000ff;}
a.four:hover?{font-family:monospace;}
a.five:link?{color:#ff0000;text-decoration:none;}
a.five:visited?{color:#0000ff;text-decoration:none;}
a.five:hover?{text-decoration:underline;}

a.ex1:hover,a.ex1:active?{color:red;}
a.ex2:hover,a.ex2:active?{font-size:150%;}
a.ex3:hover,a.ex3:active?{background:red;}
a.ex4:hover,a.ex4:active?{font-family:monospace;}
a.ex5:visited,a.ex5:link?{text-decoration:none;}
a.ex5:hover,a.ex5:active?{text-decoration:underline;}
</style>
</head>
<body>
<p>將鼠標(biāo)移至鏈接上查看其樣式改變.</p>
<p><a?class="ex1"?href="/css/">This?link?changes?color</a></p>
<p><a?class="ex2"?href="/css/">This?link?changes?font-size</a></p>
<p><a?class="ex3"?href="/css/">This?link?changes?background-color</a></p>
<p><a?class="ex4"?href="/css/">This?link?changes?font-family</a></p>
<p><a?class="ex5"?href="/css/">This?link?changes?text-decoration</a></p>
</body>
</html>

創(chuàng)建一個鏈接框：

<!DOCTYPE?html>
<html>
<head>
<meta?charset="utf-8">?
<style>
a:link,a:visited
{
????display:inline-block;
????font-weight:bold;
????color:#FFFFFF;
????background-color:#98bf21;
????width:120px;
????text-align:center;
????padding:4px;
????text-decoration:none;
}
a:hover,a:active
{
????background-color:#7A991A;
}
</style>
</head>
<body>
<a?href="/css/"?target="_blank">注冊</a>
<a?href="/css/"?target="_blank">登陸</a>
</body>
</html>

3、margin、border、padding、content。

邊距，邊框，填充，和實際內(nèi)容，用來定義元素的位置。

CSS樣式表回憶錄

margin:高寬

可分別定義

margin-right:

border:寬線類型顏色

類型：dotted(點)、dashed（虛線）、solid、double、groove（3D）、ridge（3D）、inset（3D）、outset（3D）

可分別定義不同邊框的式樣

border-bottom-style:?
border-bottom-color:?
border-bottom-width:
border-style:solid;
border-radius:5px;?倒角
border-radius:?15px?50px?30px?5px;定義不同角度
border-color:#ff0000?#00ff00?#0000ff?rgb(250,0,255);

padding:上右下左，只寫一個參數(shù)情況下，所有填充都是

默認(rèn)padding會計算在border里，也就是說padding會撐大標(biāo)簽，使用box-sizing:border-box來限制（推薦所有元素里使用）

可分別定義：

padding-left:

width:

height:

border:

4、CSS多列(類似WORD分欄功能)

column-count 指定元素應(yīng)該被分割的列數(shù)。
column-fill 指定如何填充列
column-gap 指定列與列之間的間隙
column-rule 所有 column-rule-* 屬性的簡寫
column-rule-color 指定兩列間邊框的顏色
column-rule-style 指定兩列間邊框的樣式
column-rule-width 指定兩列間邊框的厚度
column-span 指定元素要跨越多少列
column-width 指定列的寬度
columns 設(shè)置 column-width 和 column-count 的簡寫

5、display（顯示）

控制元素顯示，有三個屬性：

block:把行標(biāo)簽變成塊

inline:把塊標(biāo)簽變成行

inline-block:行標(biāo)簽具有塊屬性，（不獨占一行）

none:元素不可見

6、position(定位)

使用定位后，使用top\bottom\left\right來改變元素位置，（以元素的左上角為基點）

不定義position，以上定義無效

static:(默認(rèn))沒有定位，靜態(tài)定位的元素不會受到 top, bottom, left, right影響。

fixed:元素的位置相對于瀏覽器窗口是固定位置。（右下角的浮動廣告效果）

relative:相對定位元素的定位是相對其正常位置。根據(jù)元素當(dāng)前位置，進(jìn)行偏移。

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

? ? ? ? ? ? ? 通常父元素調(diào)置relative、子元素設(shè)置absolute來進(jìn)行定位。

sticky:基于用戶的滾動位置來定位。

元素居中技巧：position的top\left設(shè)置50%，使用margin-top、margin-left設(shè)置元素大小的負(fù)一半

width:500px;
height:700px;
position:fixed;
left:50%;
right:50%;
margin-left:-250px;
margin-top:-350px;

7、overflow overflow-x overflow-y（超出顯示范圍的顯示方式）

scroll：始終顯示滾動條

hidden:超出部分隱藏

auto:如果超出，顯示滾動條，如果不超不顯示滾動條

visible:(默認(rèn))超出，依然顯示內(nèi)容。

8、clip（裁剪）

指定一個絕對定位的元素，該尺寸應(yīng)該是可見的，該元素被剪裁成這種形狀并顯示。

????注意：: 如果先有"overflow：visible"，clip屬性不起作用。

頁面小圖標(biāo)效果，可以使用clip，防止圖片過多產(chǎn)生多個請求。

img?
	{
	position:absolute;
	clip:rect(0px,60px,200px,0px);
	}?
div{
????background-color:yellow;????
????background-clip:content-box;
}

9、z-index（元素顯示順序）

可以為負(fù)數(shù)，數(shù)值越大顯示位置越靠前。

10、float（元素浮動）

會使元素向左或向右移動，其周圍的元素也會重新排列。

浮動元素之后的元素將圍繞它。浮動元素之前的元素將不會受到影響。

left：左浮動
????right：右浮動
????none：不浮動
????inherit：從父元素繼承 float 屬性的值。

浮動會產(chǎn)生元素串位，在上層使用clear:both清除

同時，F(xiàn)LOAT還要在父標(biāo)簽設(shè)置position:relative，在子標(biāo)簽設(shè)置position:absolute，進(jìn)行定位，子標(biāo)簽超出父標(biāo)簽，父標(biāo)簽沒設(shè)置高度時自動調(diào)整，

10、text:

text-align
text-align-last
text-decoration 定義下劃線樣式
text-decoration-color
text-decoration-line
text-decoration-style
text-indent 行首縮進(jìn)

text-overflow ：text-overflow屬性指定當(dāng)文本溢出包含它的元素，應(yīng)該發(fā)生什么。

??????? text-overflow: clip|ellipsis|string;elipsis超出顯示省略號，string自定義顯示字符

text-shadow ：文字陰影text-shadow: 2px 2px #ff0000;

text-transform ：控制文本的大小寫

其它：

block加陰影

角度? 陰影距離擴(kuò)散范圍陰影大小

box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);

鼠標(biāo)形狀：

cursor: pointer;

透明度：0最小、1大

opacity: 1;

標(biāo)簽位移：

transform: translateY(10px);

transform: translateX(10px);

其它參考：

https://www.runoob.com/c***ef/css3-pr-align-content.html

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

新聞標(biāo)題：CSS樣式表回憶錄-創(chuàng)新互聯(lián)
瀏覽地址：http://muchs.cn/article12/cdccdc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、手機(jī)網(wǎng)站建設(shè)、品牌網(wǎng)站制作、商城網(wǎng)站、全網(wǎng)營銷推廣、外貿(mào)建站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容