行內(nèi)樣式:在標(biāo)簽的后面添加樣式
font-family: Arial,sans-serif,宋體; 依次查找字體脊另，如果有就使用导狡，沒有就往下找；如果都沒有使用用戶瀏覽器的默認(rèn)字體
內(nèi)部樣式
在head標(biāo)簽中添加
?<style>
? ? ? 選擇器{屬性:屬性值; 屬性:屬性值;...}
</style>
外部樣式:外部樣式表可以重復(fù)使用
使用link標(biāo)簽鏈接外部樣式文件偎痛，href后面跟上外部樣式文件的路徑
<link rel="stylesheet" href="文件路徑">
?id選擇器
id 不能重復(fù)旱捧，在同一個HTML頁面中，id必須是唯一的
css選擇器? ? ?標(biāo)簽選擇器? ? ?類選擇器
import外部樣式
link和@import都可以引入外部樣式踩麦，但是@import效率較低枚赡，還有其他一些缺點(diǎn)，一般不是用@import導(dǎo)入外部樣式文件谓谦。而是推薦使用link的方式
<style type="text/css">
? ?@import url(css/css1.css);
</style>
選擇器
類選擇器語法：.類名{屬性:屬性值;屬性:屬性值;....}贫橙，前面的小圓點(diǎn)不要漏掉
id選擇器語法： #id名 {屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}
使用星號通配符來消除HTML中的外邊距和內(nèi)邊距
font-size
font-size:2em;/*相對大小，相對于父元素的2倍*/
font-weight 字體加粗
normal----不加粗
bold------加粗
400等同于normal反粥，而700等同于bold
?font-weight:900;
font-style
font-style:italic;/*italic - 文本傾斜顯示*/
font-style:oblique;/*oblique 文本傾斜顯示*/
字體的綜合設(shè)置
font屬性用于對字體樣式進(jìn)行綜合設(shè)置
基本語法如下：
選擇器{ font: font-style font-weight font-size/line-height font-family;}
使用font卢肃，必須按照上面語法格式中的順序書寫疲迂，不能更換順序，各個屬性之間以空格隔開
不需要設(shè)置的屬性可以省略莫湘，但必須保留font-size和font-family屬性尤蒿，否字font屬性不起作用
line-height行高
行高設(shè)置為比字體大8個像素左右
text-indent首行縮進(jìn)
text-indent屬性用于設(shè)置首行文本的縮進(jìn)，1em就是一個漢字的寬度幅垮，可以為負(fù)數(shù)腰池，負(fù)數(shù)表示懸掛縮進(jìn)
text-indent 還可以設(shè)置為負(fù)值。利用這種技術(shù)忙芒，可以實(shí)現(xiàn)很多有趣的效果示弓，比如“懸掛縮進(jìn)”，即第一行懸掛在元素中余下部分的左邊：p {text-indent: -5em;}不過在為 text-indent 設(shè)置負(fù)值時要當(dāng)心呵萨，如果對一個段落設(shè)置了負(fù)值奏属，那么首行的某些文本可能會超出瀏覽器窗口的左邊界。為了避免出現(xiàn)這種顯示問題甘桑，建議針對負(fù)縮進(jìn)再設(shè)置一個外邊距或一些內(nèi)邊距：p {text-indent: -5em; padding-left: 5em;
邊框
border-top-style:dotted;/*上邊框 dotted 點(diǎn)線*/
border-top-color:dodgerblue;/*上邊框顏色 紅色*/
border-top-width:5px; /*上邊框?qū)挾?px*/
border-right-color:green;
border-right-width:2px;
border-right-style:dashed;/*dashed虛線*/
border-bottom:2px solid gold;
border:2px solid darkgreen;/*四條邊框一起設(shè)置 2px 實(shí)線 深綠色*/
border-right:5px dashed blue;/*設(shè)置右邊框*/
背景
background-image:url("https://p1.ssl.qhimg.com/dr/220__/t01f97233dce16e4fa6.jpg") ;
no-repeat不重復(fù)? ? ? repeat-x? 在x軸上重復(fù)? ? ? ? ?repeat-y 在y重復(fù)
background-repeat:repeat-y;
背景:圖片地址 背景顏色藍(lán)色 不重復(fù) 距離左側(cè)10px 頂部50px?
background:url("https://p1.ssl.qhimg.com/dr/220__/t01f97233dce16e4fa6.jpg") blue no-repeat 10px 50px;
table表格
border-collapse: collapse;/*將表格邊框合并為單一邊框*/
列表樣式
把圖像設(shè)置為列表中的項(xiàng)目標(biāo)記：
list-style-image:url("img/icon1.jpg");
list-style-position:outside;? ? (inside outside)
list-style-type: circle;
circle小圓圈? ? ? ? ? ? ? lower-latin拉丁字母? ? ? ? ? ? ? ? ? ? ? ? lower-roman小寫的羅馬數(shù)字? ? ? ? ? ? ? ? ?upper-roman大寫的羅馬數(shù)字 none不顯示? ?
