CSS樣式表回憶錄

發布時間：2020-06-24 10:43:21 來源：網絡閱讀：247 作者：等你的破船欄目：web開發

三種聲明方式：

標簽內style聲明，內聯式

HTML頭部聲明，內部

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

</style>

單獨的CSS文件聲明，外部，需要在html里調用：

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

優先級：標簽內style>組合定義/層定義>。定義>#定義（還遵循定義時就近原則）

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

????塊標簽：點據一整行、有position\padding屬性

????行標簽：占據一部分、沒有position\padding屬性

????行塊轉換：display屬性，inline轉換為行、block轉換為塊、inline-block擁有塊屬性的行標簽。

CSS中的偽元素：

語法： :偽元素名

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

CSS基本語法：

????選擇器{

????????屬性1:值;

????????屬性2:值;

????????......

????????}

????1、選擇器：

????????標簽名1 [標簽名2] [標簽名3]......：根據標簽順序匹配嵌套標簽

????????.選擇器名：在標簽的class屬性中調用

????????#idname? ：id是標簽的屬性，#應用于所有標簽id為idname的標簽

???????? [屬性=值]：pname是標簽的屬性，可以是任何屬性

復雜一點的選擇器：

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

屬性:

1、background:

????參數順序：

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:圖片重復，默認重復，no-repeat不重復，repeat-x水平重復，repeat-y垂直重復

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

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

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

????background-clip:背景大小匹配，border-box匹配到邊框最外側大小，padding-box匹配到內側，content-box匹配到文本

2、link定義超鏈接的式樣

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

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

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

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

????a:hover{}：鼠標放在鏈接上時

????a:active{}：鼠標點擊時

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

<!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>將鼠標移至鏈接上查看其樣式改變.</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>

????創建一個鏈接框：

<!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。

????邊距，邊框，填充，和實際內容，用來定義元素的位置。

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:上右下左，只寫一個參數情況下，所有填充都是

????默認padding會計算在border里，也就是說padding會撐大標簽，使用box-sizing:border-box來限制（推薦所有元素里使用）

????可分別定義：

padding-left:

width:

height:

border:

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

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

5、display（顯示）

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

block:把行標簽變成塊

inline:把塊標簽變成行

inline-block:行標簽具有塊屬性，（不獨占一行）

none:元素不可見

6、position(定位)

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

不定義position，以上定義無效

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

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

????relative:相對定位元素的定位是相對其正常位置。根據元素當前位置，進行偏移。

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

? ? ? ? ? ? ? ? ? 通常父元素調置relative、子元素設置absolute來進行定位。

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

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

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:(默認)超出，依然顯示內容。

8、clip（裁剪）

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

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

???? 頁面小圖標效果，可以使用clip，防止圖片過多產生多個請求。

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

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

????可以為負數，數值越大顯示位置越靠前。

10、float（元素浮動）

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

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

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

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

同時，FLOAT還要在父標簽設置position:relative，在子標簽設置position:absolute，進行定位，子標簽超出父標簽，父標簽沒設置高度時自動調整，

10、text:

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

text-overflow ：text-overflow屬性指定當文本溢出包含它的元素，應該發生什么。

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

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

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

其它：

block加陰影

????角度? 陰影距離擴散范圍陰影大小

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

鼠標形狀：

??? cursor: pointer;

透明度：0最小、1最大

? opacity: 1;

標簽位移：

? transform: translateY(10px);

? transform: translateX(10px);

其它參考：

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

向AI問一下細節

91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

CSS樣式表回憶錄

猜你喜歡

91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

CSS樣式表回憶錄

猜你喜歡

最新資訊

相關推薦

相關標簽