css基礎知識整理
1、css分類樣式分為3類：內聯、內嵌、外部
（1）內聯：寫在標簽裏面，樣式為style=" "
舉例說明：
<div style="
width:100px;
height: 110px;
background-color: red;">
<p>
我是第一行h
</p>
運行樣圖：
style="寬度為100像素，高度為110像素，背景是綠色"。給這一個div標簽定css樣式。
（2）內嵌：在<head> </head>裏面<style type="text/css"> </style>內嵌在head內部body外部*/
即
<head>
<style type="text/css">
<style type="text/css"> </style>
</head>
舉例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">/*內嵌在head內部body外部*/
p{
color: red;
}/*p代表選擇全部文字*/
.lianxi
{
color: yellow;
background: red;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div class="lianxi">我是洋洋1</div>
<div class="lianxi">我是洋洋2</div>
<div class="lianxi">我是洋洋3</div>
</body>
運行樣圖：
<body></body>內部有一個class=lianxi 點class即賦予所有class等於練習的內容背景紅色，高100像素，寬100像素字體為黃色。
（3）外部，單獨建一個css文件
<link rel="stylesheet" type="text/css" href="0809liaxi2.css"/>
舉例說明：
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="0809liaxi2.css"/>
</head>
也是在<head> </head>裏面
2、選擇器：class、id、復合選擇、屬性、偽類
（1）class，選擇class屬性時用點.XX,根據class的名來篩選元素，並且用class屬性選擇可以有相同的重復的名字
如：
<div class="lianxi">我是洋洋1</div>
<div class="lianxi">我是洋洋2</div>
<div class="lianxi">我是洋洋3</div>
選擇class等於lianxi時是點lianxi，這樣我是洋洋的內容就被選擇了，然後就可以給我是洋洋的內容添加屬性。
例如<style type="text/css">
.(點)lianxi
{color: yellow;
}
</style>
（2）id根據id名來篩選唯一元素，不能有相同的名字，用#加要的id名
即<div id="lianxi1">我是洋洋1</div>
<div id="lianxi2">我是洋洋2</div>
<div id="lianxi3">我是洋洋3</div>
例如#lianxi1,這樣賦予屬性時是給我是洋洋1賦予的
（3）復合中逗號表並列，空格代表後代，大於號代表全部div>p即div中所有的p元素。
舉例說明：#yang,#yang2{/*復合 後代*/
border: 2px solid black/*邊框為2，邊框顏色為黑色*/
}
div,p {
border: 2px solid red
}所有的p標簽
（4）a標簽的四個偽類：a:link未訪問的標簽、a:visited已訪問的標簽、a:active以選中的標簽、a:hover鼠標劃過時
舉例：
a:link{
color:blue;
}<--未訪問時是藍色-->
a:visited{
color:black;
} <--訪問過的是黑色-->
a:active{
color:yellow;
}<---選中是黃色->
a:hover{
color:#FF0000;
}<--鼠標劃過顯示紅色-->
效果圖：
4、樣式：背景、字體、對齊方式、邊界邊框、顯示隱藏、列表（無序、有序）、格式布局
（1）背景background \
background-image:url(foot-bg.jpg);背景圖片
background-color背景顏色
background-reapet圖片平鋪方式：background-size（背景尺寸）: 100% 100%;完全展開
background-position背景位置
（2）字體
fonf-family字體樣式
font-size字體大小
font-style：italic字體傾斜
font-wight字體粗細
text-decoration:(1)underline下劃線（2）overline上劃線(3)line-through刪除線（4）none去掉線
（3）對齊方式
text-align:center水平對齊方式
line-height行高
text-indent縮進單位像素
line-height(調節文本的垂直方式，通過設置行高的大小)與vertical-align（調節行內元素的垂直對齊方式）
（4）邊界邊框margin外邊距與padding內邊距（bored1px solid red代表粗細與顏色）
margin上右下左只能調節左右margin-left與margin-right
padding加了內邊距元素會變大，
背景、字體、對齊、邊框舉例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #name{ background-color: red;/*背景為紅色*/ height: 90px; width: 200px; margin-left: 60px;/*w外邊距距邊框60px*/ padding-top: 90px;/*內邊距距上邊90px*/ font-size: 20px;/*字體大小*/ font-style: initial;/*傾斜*/ /*text-decoration: underline;下劃線*/ text-decoration: overline;/*上劃線*/ color: yellow;/*字體顏色*/ border:10px solid:blue; float:left } .class{ background-color: green;/*背景為紅色*/ height: 150px; width: 400px; /*vertical-align: bottom;*調節input、span、img的行內元素垂直對齊方式/ * */ line-height: 140px; margin-left: 40px; } </style> </head> <body> <div id="name"> 無限歌謠季 </div> <div class="class">我想和你唱</div> </body> </html>
css基礎知識整理