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基礎知識整理