三種書寫方式
- 行內(nèi)樣式
- 內(nèi)部樣式
- 外部樣式
任何一個(gè)網(wǎng)頁元素都是矩形
行內(nèi)樣式
每一個(gè)元素都可以書寫行內(nèi)樣式
<div style="width:400px;height:20px;background:red;"></div>
style樣式
<style>
div {
width: 400px;
height: 20px;
background: red
}
</style>
選擇器
-
id選擇器
<style>
#d{
width:200px;
height:200px;
background:red;}
</style>
<div id="d"></div>
-
類選擇器
<style>
.c{
height:100px;
background:orange;
}
</style>
<p class=""c"></p>
-
元素選擇器
<style>
h1{
height:200px;
background:green;
}
</style>
<h1>
今天
</h1>
組合選擇器
- div p{
空格代表的是子元素
} - p.c{
類為c的p元素
}
類選擇器的優(yōu)先級(jí)大于元素選擇器栏笆，誰選的精確用誰喉誊。最后的效果是選擇器效果的疊加琳拨，行內(nèi)優(yōu)先級(jí)大于內(nèi)部大于外部。
外部樣式
<link href="mycss.css" rel="stylesheet">
css中的注釋:/* */
<div class="c d"></div>c.d中后寫的起作用,d的優(yōu)先級(jí)大于c
寬高
- 如果塊級(jí)元素沒有輸入寬度和高和內(nèi)容，則寬度是沾滿屏幕非凌，高度是0秸应，
如果里面有內(nèi)容，則高度和內(nèi)容的高度是一樣的蔫浆。 - width可以用%表示殖属，其中指的是父元素的百分比,百分比不可以給height用。
寬和高對(duì)行級(jí)元素不起作用
背景顏色
顏色的書寫可以用顏色的英文名稱瓦盛，同時(shí)也可以用十六進(jìn)制的數(shù)表示洗显，或者用函數(shù)的方法eg：rgb（255,0,0）表示紅色rgba（255,0,0,0.5）其中a代表透明在0-1之間取值外潜，1為不透明，0為全透明
背景圖片
background-repeat: no-repeat;背景圖片不平埔
background-repeat: repeat-x;橫向平鋪
background-repeat: repeat-y;縱向平鋪
背景圖片出來的位置：
background-position: left top;（左上角）
background-position: center bottom;（中間底部）
background-position: center center挠唆；（正中間）
background-position:10px 10px;(往下移10px处窥，往右移10px）
background-position:20% 50%;（移動(dòng)圖片中心點(diǎn)）
- 倘若圖片大小大于容器的 大小，可實(shí)現(xiàn)對(duì)圖片的截取玄组。
- 偏移是相對(duì)于容器的偏移滔驾。
邊框
border: 5px red dashed;（粗細(xì)為5px 紅色 虛線/solid實(shí)現(xiàn)）
- 在border后加-bottom -right -top -left 為控制四個(gè)不同的邊
border-radius:5px; （控制邊框的角的弧度）
字體
color（控制字體顏色 ）
font-size：ddd；（控制字體大星汕凇）
font-family：（字體）
font-weigth:bold;(粗體）
<strong></strong>加粗字體
text-align：左嵌灰，中，右
text-decoration:underline;(下劃線)
text-decoration:line-through;(橫穿線)
text-indent:20px;(文字縮進(jìn)）
盒子模型
元素的大小颅悉，元素與元素的距離
margin：（外邊距沽瞭，元素與元素之間的距離或者元素和父類之間的距離）
margin:10px 20px;(控制上下和左右）
margin:10px 20px 30px 40px;(控制上右下左）
margin:0 auto;(元素的居中）要想居中必須有固定的大小
padding:(內(nèi)邊距 ，元素的內(nèi)容和邊框的距離）
使用padding會(huì)引起元素的撐大剩瓶。padding無負(fù)值
- boby自在padding屬性驹溃，p自帶margin屬性 ，所以在書寫網(wǎng)站時(shí)書寫
*{
margin:0;
padding:0;
}
定位
position：static延曙；
position：absolute豌鹤；（絕對(duì)定位，使其脫離文檔流）然后是使用top;right;left;bottom進(jìn)行定位
可以先left=50%枝缔；然后margin=（width的一半）實(shí)現(xiàn)居中
z-index:（-999-999）定位縱向排列的順序布疙。
- 將絕對(duì)定位的四個(gè)方向都為零時(shí)，不用寫寬高愿卸，則沾滿屏幕
- 要想讓子元素在父元素里面跑需要子絕父相
.c{
height:400px;
width:400px;
background:red;
position:relative;
left:0;
top:0;
}
.d{
width:200px;
height:200px;
background:greenyellow;
position:absolute;
bottom:0;
right:0;
}
父元素也可以絕對(duì)定位灵临，但是會(huì)對(duì)其他元素早成影響。所以較多使用相對(duì)定位趴荸。
position:relative（相對(duì)定位）
使用相對(duì)定位的區(qū)塊不影響其他區(qū)塊的位置儒溉。只是將自己將以調(diào)整。
相對(duì)定位不可以亂跑：只可以用left和top屬性发钝。
窗口定位：position：fixed（窗口定位）
相對(duì)于窗口進(jìn)行定位顿涣，可以實(shí)現(xiàn)將區(qū)塊定位于窗口的某些位置，使其不受文檔流的約束酝豪。
浮動(dòng)屬性：float涛碑；
方向：向左或向右
浮動(dòng)的元素會(huì)脫離文檔流。浮動(dòng)元素遇到其他的浮動(dòng)元素會(huì)停下來或者挨到父元素的邊會(huì)停下來孵淘。
.a{
width:200px;
height:200px;
background:red;
float:left;
z-index:-20;
}
.b{
width:400px;
height:400px;
background:limegreen;
float:left;
z-index: 20;
}
.c{
width:600px;
height:600px;
background:blue;
}
- 父元素高度是子元素高度之和蒲障，因此大部分時(shí)間不寫父元素的高度
*浮動(dòng)會(huì)對(duì)其他的元素造成影響，若不想造成影響，則在此浮動(dòng)元素下創(chuàng)建一個(gè)空的元素加上clear：both
<div class="a"></div>
<div class="clear"></div>
<div class="b"></div>
.clear{
clear:both;
}
或者將清楚寫在下一個(gè)元素的里面:
.a{
width:200px;
height:200px;
background:red;
float:right;
}
.b{
width:300px;
height:300px;
clear:both;
background:limegreen;
}
元素的展示和消失
display：block晌涕；（能將行級(jí)元素變?yōu)閴K級(jí)元素進(jìn)行展示）
display：none；（將元素消失）
display:inline-block(行類塊痛悯，首先按塊級(jí)元素進(jìn)行展示余黎，其次后面元素可以跟在后面顯示，即可以將塊級(jí)元素變?yōu)樾屑?jí)元素载萌，但保留塊級(jí)元素的性質(zhì)）
鼠標(biāo)
cursor:pointer惧财；（變?yōu)樾∈郑?br>
cursor:progress;(變成箭頭加圓圈）
cursor:crosshair;(變成十字架）
cursor：wait；（變成圓圈）
overflow溢出
overflow:hidden;(超出部分隱藏）
