css基本語法
標記選擇器（內嵌式）
<style>標籤，選擇p標籤，對p標籤下的內容進行批量處理
<style type="text/css">
p{
color:red;
font-size:30px;
}
</style>
類別選擇器
<head>
<meta charset="UTF-8">
<title>類別選擇器</title>
<style type="text/css">
.r{
color:red;
font-size:30px;
}
.g{
color:blue;
font-size:40px;
}
</style>
</head>
<body>
<p class="r">這是段落一</p>
<p class="g">這是段落二</p>
</body>
id選擇器
<head>
<meta charset="UTF-8">
<title>類別選擇器</title>
<style type="text/css">
#p1{
color:red;
font-size:30px;
}
#p2{
color:blue;
font-size:40px;
}
</style>
</head>
<body>
<p id="p1">這是段落一</p>
<p id="p2">這是段落二</p>
</body>
行類樣式
直接在行內寫
<p style="color:red;font-size:79px;">這是行內樣式</p>
鏈接式
對p標籤裏的內容進行編輯
<head>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
另有一個css文件中寫着：
p{
color:red;
font-size:45px;
}
即：可以外連一個css文件來定義樣式
行內樣式優先級最高，然後，，，
設置圖片
設置圖片的邊框屬性
<style type="text/css">
.i{
border-width:1px;
border-color:red;
border-style:solid;
}
.i2{
border-width:1px;
border-color:red;
border-style:dotted;<!--純點-->
}
<!--設置不同的邊不同的效果-->
.i3{
border-top:red 1px solid;
border-right:green 20px dotted;
border-bottom:yellow 10px dashed;
bordre-left:blue 5px solid;
}
</style>
<!--或者可以這麼寫：
.i{
boder: red 1px solid;
}-->
<!--dashed設置虛線，solid設置實線-->
<body>
<img src="" class="i" />
</body>
設置圖片大小
數字設置：
<img src="./liu.jpg" class="i" style="width:160px;heigth:180px;" />
百分比設置：
<img src="./liu.jpg" class="i" style="width:50%;" />
百分比是指相對容器的百分比，而不是相對圖片的百分比
設置圖文混合排列
<style type="text/css">
img{
width:150px;
heigth:180px;
float:left; <!--文字環繞在圖片右側-->
margin:5px;<!--文字距圖片的距離--> }
</style>
設置圖片與文字對齊方式
<p>haha<img src="liu.jpg" style="vertical-align: baseline
/* /top/middle/bottom/text-buttom/sub/super/20px */;" />haha</p>
設置背景
設置網頁背景和標題那行的背景
<body style="backgroud-color:red;">
<h1 style="backgroud-color:green">標題</h1>
</body>
設置背景圖片,及背景圖片平鋪
<body style="backgroud-image:url();background-repeat:repeat-x/* /no-repeat */;
background-position:20px 20px/* 在no-repeat狀態下，圖片距離左邊和頂部的距離是20px */
background-attachment:fixed;/* 設置滾動網頁時背景圖片不動 */">
<h1 style="backgroud-color:green">標題</h1>
</body>
設置文字:
設置文字的字體 font-family:宋體;
設置文字的傾斜效果 font-style:italic;
設置文字的加粗/不加粗效果 font-weight:bold/normal;
設置英文字母大小寫轉換 text-transform:capitalize(首字母大寫);
text-transform:uppercase;（全部大寫）
text-transform:lowercase;(全部小寫)
設置文字的大小 font-size:30px;
設置文字的裝飾效果 text-decoration:none;(無效果)
text-decoration:underline;(下劃線)
text-decoration:line-through;(刪除線)
text-decoration:overline;(上劃線)
text-decoration:underline overline;(下劃線和上劃線)
設置段落首行縮進 text-indent:2em;(設置首行縮進2個字符)
設置字詞間距 word-spacing:10px;(每個單詞之間的間距)
letter-spacing:2px;(每個字母或漢字之間的距離)
設置文字的行高 line-height:1.5;
設置段落之間的距離 margin:1px;
padding:10px;(和行高很像)
設置文本的水平位置 text-align:left;
設置文字和背景的顏色 color:red;
background-color:green;
設置段落的垂直對齊方式:
<div class="greenBorder" style="display: table; height:400px; #position: relative;
overflow: hidden;">
<div style=" #position: absolute; #top: 50%;display: table-cell;
vertical-align: middle;">
<div class="greenBorder" style=" #position: relative; #top: -50%">
any text<br>
any height<br>
any content, for example generated from DB<br>
everything is vertically centered
</div>
</div>
</div>
如：
.p1{
font-family:宋體 //設置字體
}
邊框
border-width:2px/thick; 邊框線大小
border-color:red; 顏色
border-style:solid; 實線
border-top:2px blue dashed; 對頂部邊框進行設置
padding:內邊距
margin
行類元素之間的水平margin是左邊的加右邊的，及margin-left:10px,
再設下一個元素magin-right:10px,那麼兩個元素之間的距離只是10px
塊級元素之間的margin以大的爲標準
margin的值可以設成負值
盒子浮動
Float 屬性： 默認是 none ，
按照標準流來定位；
Left：左懸浮； Right：右懸浮；
例如：float:right;
Clear 屬性： 默認是 none，允許兩邊都可以有浮動對象；
Left： 不允許左邊有浮動對象
Right：不允許右邊有浮動對象
Both：不允許有浮動對象
Position 屬性： 默認是 static，按照標準流來定位；
* Relative：相對定位，相對於原本的標準位置偏移指定的距離；
注：即相對於原本不加任何定位信息的位置進行偏移
* Absolute：絕對定位，以它的包含框爲基準進行偏移；
注：如果這個div的父div也有absolute，則以其父div作爲包含框，否則以瀏覽器的邊框作爲包含框
* Fixed：固定定位，以瀏覽器窗口爲基準進行定位
Z-index 空間位置，默認是 0，z-index
值大的頁面位於其值小的上方；
Display：
* Inline：把元素變成內聯元素；
注：即div原本是塊級元素，換行，加了這個屬性後，會變成內聯元素，不換行
* Block：把元素變成塊級元素；
注：span原本是內聯元素，加了這個屬性後會變成塊級元素，換行
超鏈接
鏈接的四種狀態：
a:link：普通的、未被訪問的鏈接
a:visited：用戶已訪問的鏈接
a:hover：鼠標指針位於鏈接的上方
a:active：鏈接被點擊的時刻
例如：
<style>
a:LINK{
color:red;
text-decoration:none;
}
</style>
<style>
a:LINK,a:VISITED {
color:red;
text-decoration:none;
}
</style>
* 創建按鈕式超鏈接、
<style>
body{
margin: 20px;
}
a{
font-family: Arial;
margin: 5px;
}
a:LINK,a:VISITED {
color:#A62020;
padding:4px 10px 4px 10px;
background-color:#DDD;
text-decoration: none;
border-top: 1px solid #EEEEEE;
border-left: 1px solid #EEEEEE;
border-bottom: 1px solid #717171;
border-right: 1px solid #717171;
}
a:HOVER {
color: #821818;
padding: 5px 8px 3px 12px;
background-color: #CCC;
border-top: 1px solid #717171;
border-left: 1px solid #717171;
border-bottom: 1px solid #EEEEEE;
border-right: 1px solid #EEEEEE;
}
</style>
設置列表
設置列表符號
ul:無序列表樣式
ol:有序列表樣式
<style>
ul,ol{
list-style-type:square;
<!--設置列表前面的東西形狀爲方形-->
list-style-type:circle;
<!--設置列表前面的東西爲圓形-->
list-style-type:none;
<!--設置列表前面沒有東西-->
list-style-image:url("圖片的地址");
<!--給設置列表前面設置圖標-->
}
</style>
設置圖片符號
<style>
ul,ol{
list-style-image:url("./liu.jpg");
}
</style>
* 設置列表，使其好看，例：
<head>
<style type="text/css">
#navigation {
font-family:Arial;
font-size:14px;
text-align:center;
}
#navigation ul {
list-style-type:none; /* 不顯示項目符號 */
margin:0px;
padding:0px;
}
#navigation li {
border-bottom:1px solid #9F9FED; /* 添加下劃線 */
float: left;
}
#navigation li a{
width:120px;
display:block;
height:1em;
padding:5px 5px 5px 0.5em;
text-decoration:none;
}
#navigation li a:link, #navigation li a:visited{
background-color:#1136c1;
color:#FFFFFF;
}
#navigation li a:hover{ /* 鼠標經過時 */
background-color:#002099; /* 改變背景色 */
color:#ffff00; /* 改變文字顏色 */
}
</style>
</head>
<body>
<div id="navigation">
<ul>
<li><a href="#">主頁</a></li>
<li><a href="#">我的博客</a></li>
<li><a href="#">我的相冊</a></li>
<li><a href="#">留言</a></li>
<li><a href="#">關於我</a></li>
</ul>
</div>
</body>
表格
<table>
<caption>標題</caption>
<thead>表頭</thead>
<tbody>表格內容</tbody>
<tfoot>表根，表格底部的</tfoot>
</table>
* 設置表格邊框
Border：設置表格邊框；
Border-collapse：設置邊框分離，合併
默認是 separate(分離) collapse 合併；
Border-spacing ：設置單元格的間距；
Padding：設置單元格內容和邊框之間的距離；
* 設置表格的跨度
Table-layout：
默認 auto 自動方式，根據單元格的內容自動調整寬度；
Fixed 固定方式 表格寬度固定；
* 設置表格隔行換色
先對整個表格設置背景顏色
再對偶數行的行設置class爲even
然後再對偶數行設置背景顏色（如圖）
* 設置鼠標經過有變色效果
例：
tbody tr:HOVER{
background-color:aqua;
}