一.CSS三種引用方式
1.行內樣式
<div style="color: #930000;">
HelloWorld
</div>
2.內部樣式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
color: aqua;
font-size: xx-large;
}
</style>
</head>
<body>
<div>
HelloWorld
</div>
</body>
</html>
3.外部樣式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 定義一個input.css文件,然後按下面的方法引入 -->
<link rel="stylesheet" type="text/css" href="input.css"/>
</head>
<body>
<div>
HelloWorld
</div>
</body>
</html>
二.選擇器
<body>
<!-- 1.標籤選擇器 -->
<style type="text/css">
div{
color: #00FFFF;
}
</style>
<div>
HelloWorld
</div>
<!-- 2.ID選擇器 -->
<style type="text/css">
#id{
color: red;
}
</style>
<div id="id">
HelloWorld
</div>
<!-- 3.類選擇器 -->
<style type="text/css">
.class{
color: blue;
}
</style>
<div class="class">
類選擇器
</div>
<!-- 4.標籤選擇器與類選擇器共用 -->
<style type="text/css">
div.class1{color: blueviolet;}
</style>
<div class="class1">
標籤選擇器與類選擇器共用
</div>
<!-- 5.屬性選擇器 -->
<style type="text/css">
input[type="button"]{
color: darkcyan;
}
</style>
<input type="button" value="屬性選擇器" />
<!-- 6.包含選擇器 -->
<style type="text/css">
div p{
color: crimson;
}
</style>
<div>
<p>包含選擇器</p>
</div>
<!-- 7.僞類選擇器(在超鏈接中經常使用) -->
<style type="text/css">
a:link{color: #0000FF;} /*未訪問的鏈接顯示的顏色*/
a:visited{color: #DC143C;} /*已訪問的鏈接顯示的顏色*/
a:hover{color: #0000FF;} /*鼠標移動到鏈接上顯示的顏色*/
a:active{color: #0000FF;} /*選定鏈接顯示的顏色*/
</style>
<a href="#">僞類選擇器(超鏈接)</a>
</body>
三.CSS樣式的屬性使用
1.邊框和尺寸
<body>
<!-- 邊框和尺寸
solid表示邊框爲實線
double表示邊框爲雙線
none 表示邊框爲無邊
border-top 設置頂部的邊框
border-left 設置左邊的邊框
border-right 設置右邊的邊框
border-bottom 設置底部的邊框
width 寬
heigth高
-->
<style type="text/css">
div{
border: 5px #0000FF double;
width:200px;
height: 400px;
border-top:#0000FF double;
border-left: #0000FF solid;
border-right : #0000FF solid;
border-bottom: #FF0000 double;
}
</style>
<div>
div邊框和尺寸
</div>
</body>
2.轉換屬性
<body>
<!-- display屬性: none(不顯示,隱藏) block(顯示爲塊元素) inline(顯示爲行內元素)
塊: 佔用屏幕一行
行: 不會佔用屏幕一行 -->
<div style="display: inline;">
顯示爲行內元素
</div>
<span style="display: block;">
(顯示爲塊元素)
</span>
<div style="display: none;">
此區域不會顯示
</div>
</body>
3.字體屬性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
font-size: 66px;
color: red;
font-family: "楷體";
/*文本加粗*/
font-weight:bold;
/*文本斜體*/
font-style: italic;
}
</style>
</head>
<body>
<div>
CSS字體屬性
</div>
</body>
</html>
4.背景色
<body>
<style type="text/css">
div{
background-color: #008B8B;
width: 200px;
}
</style>
<div>
CSS背景顏色
</div>
</body>
5.佈局屬性
<body>
<!-- 元素浮動
兩個屬性
float:浮動 none:元素不浮動
clear:清除浮動 both:清除兩側浮動
-->
<div style="float: left;">向左浮動</div>
<div style="float: right;">向右浮動</div>
<div style="clear: both;">清除兩側浮動</div>
</body>
6.盒子模型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.class{
border: 5px #0000FF double;
border-top:#0000FF double;
border-left: #0000FF solid;
border-right : #0000FF solid;
border-bottom: #FF0000 double;
width:200px;
height: 400px;
margin-top: 120px; /*距離上沿距離*/
margin-left: 200px;/*距離右側距離*/
padding-top: 200px;/*距離左側距離*/
padding-left: 200px;/*距離底沿距離*/
}
</style>
</head>
<body>
<div class="class">
我是一個盒子模型
</div>
</body>
</html>