溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
三種聲明方式：
標簽內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。
????邊距，邊框，填充，和實際內容，用來定義元素的位置。
????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
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
