1.CSS的作用
HTML：它是整個(gè)網(wǎng)站的骨架。
CSS：它是對(duì)整個(gè)網(wǎng)站骨架的內(nèi)容進(jìn)行美化修飾
2.CSS的引入方式
- CSS的引入方式分為三種
第一種行內(nèi)引入
<div style="color:red;font-size: 100px;">
Java
</div>
第二種：內(nèi)部引入方式
<style type="text/css">
div{
color:red;
font-size: 100px;
}
</style>
第三種方式：外部引入
將css寫在獨(dú)立的css文件中，然后在html頁(yè)面的head部分引用
<link rel="stylesheet" type="text/css" href="css文件路徑" />
- 如果<style type=”text/css”></style>可不寫
- 優(yōu)先級(jí)問題:
誰離需要修飾的元素近，誰的樣式生效，其它的被覆蓋掉。(就近原則) - CSS 基本選擇器有三種(元素選擇器、類選擇器、id 選擇器)
ID 選擇器 #id 屬性名Id 保證唯一。
元素選擇器 元素名{}
類選擇器 .類名{}
- CSS 的浮動(dòng)
浮動(dòng)的框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂Ｓ捎诟?dòng)框不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。 - 清除浮動(dòng)解決辦法（當(dāng)同一級(jí)別時(shí)一個(gè)有浮動(dòng)一個(gè)沒浮動(dòng)）：
在前面定義一個(gè) div(<div id=”three”></div>)
定義 CSS 樣式：
#three{
clear:both;
}
- CSS 中如何讓塊級(jí)元素成為內(nèi)聯(lián)元素 CSS 中的 display 屬性(inline)進(jìn)行設(shè)置
去掉超鏈接的下劃線：
a{
text-decoration: none;
}
讓div 居中
margin：0px auto;
讓塊級(jí)元素成為內(nèi)聯(lián)元素
display:inline;
塊級(jí)元素內(nèi)容居中
text-align:center;
- 其他選擇器
可以使用層級(jí)選擇器設(shè)置列表的樣式
元素名 子元素名{}
屬性選擇器語法：
元素名[屬性名=”屬性值”]{
屬性名 1:屬性值 1;
屬性名 2:屬性值 2;
屬性名 3:屬性值 3;
}
<style>
input[type="text"]{
background-color: red;
}
input[type="password"]{
background-color: blue;
}
</style>
</head>
<body>
用戶名：<input type="text" name="username"/><br />
密碼：<input type="password" name="password" /> </body></html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商品首頁(yè)</title>
<style>
#father {
border: 1px solid red;
width: 1300px;
height: 2100px;
margin: auto;
}
-------------------------此處消除同級(jí)級(jí)浮動(dòng)影響
/*#logo {
border: 1px solid green;
width: 100%;
height: 50px;
}*/
#clear
{
clear: both;
}
.top {
border: 1px solid black;
width: 431px;
height: 48px;
float: left;
}
#menu {
border: 1px solid green;
width: 100%;
height: 50px;
background-color: black;
}
ul li {
display: inline;
color: white;
}
#product {
border: 1px solid black;
width: 100%;
height: 511px;
}
#product_top {
border: 1px solid red;
width: 100%;
height: 45px;
padding-t: 8px;
}
#product_bottom {
border: 1px solid greenyellow;
width: 1300px;
height: 464px;
}
#prduct_bottom_left {
border: 1px solid red;
width: 200px;
height: 100%;
float: left;
}
#prduct_bottom_right {
border: 1px solid red;
width: 1095px;
height: 100%;
float: left;
}
#big {
border: 1px solid black;
width: 544px;
height: 49%;
float: left;
}
.small {
border: 1px solid black;
width: 180px;
height: 49%;
float: left;
text-align: center;
}
#bottom
{
text-align: center;
}
a
{
text-decoration: none;
}
</style>
</head>
<body>
<!--father-->
<div id="father">
<!--logo-->
<div id="logo">
<div class="top">
</div>
<div class="top">
</div>
<div class="top" style="padding-top:20px ;height: 28px;">
<a href="#">登錄</a>
<a href="#">注冊(cè)</a>
<a href="#">購(gòu)物車</a>
</div>
</div>
<div id="clear"></div>
<!--導(dǎo)航-->
<div id="menu">
<ul>
<a href="#">
<li>首頁(yè)</li>
</a>
<a href="#">
<li>手機(jī)數(shù)碼</li>
</a>
<a href="#">
<li>家用電器</li>
</a>
<a href="#">
<li>鞋靴箱包</li>
</a>
<a href="#">
<li>奢侈品</li>
</a>
</ul>
</div>
<!--輪播圖-->
<div id="">
</div>
<!--最新商品-->
<div id="product">
<div id="product_top">
<span style="font-size: 25px; ">最新商品</span>
</div>
<div id="product_bottom">
<div id="prduct_bottom_left">
</div>
<div id="prduct_bottom_right">
<div id="big">
</div>
<div class="small">
<a href="#" style="color: gray;">
<p>電燉鍋</p>
</a>
<a href="#" style="color: red;">
<p>￥499</p>
</a>
</div>
<div class="small">
<a href="#" style="color: gray;">
<p>電燉鍋</p>
</a>
<a href="#" style="color: red;">
<p>￥499</p>
</a>
</div>
<div class="small">
<a href="#" style="color: gray;">
<p>電燉鍋</p>
</a>
<a href="#" style="color: red;">
<p>￥499</p>
</a>
</div>
<div class="small">
<a href="#" style="color: gray;">
<p>電燉鍋</p>
</a>
<a href="#" style="color: red;">
<p>￥499</p>
</a>
</div>
<div class="small">
<a href="#" style="color: gray;">
<p>電燉鍋</p>
</a>
<a href="#" style="color: red;">
<p>￥499</p>
</a>
</div>
<div class="small">
<a href="#" style="color: gray;">
<p>電燉鍋</p>
</a>
<a href="#" style="color: red;">
<p>￥499</p>
</a>
</div>
<div class="small">
<a href="#" style="color: gray;">
<p>電燉鍋</p>
</a>
<a href="#" style="color: red;">
<p>￥499</p>
</a>
</div>
<div class="small">
<a href="#" style="color: gray;">
<p>電燉鍋</p>
</a>
<a href="#" style="color: red;">
<p>￥499</p>
</a>
</div>
<div class="small">
<a href="#" style="color: gray;">
<p>電燉鍋</p>
</a>
<a href="#" style="color: red;">
<p>￥499</p>
</a>
</div>
</div>
</div>
</div>
<!--廣告圖片-->
<div id="">
</div>
<!--熱門商品-->
<div id="">
<div id="product_top">
<span style="font-size: 25px; ">最熱商品</span>
</div>
<div id="product_bottom">
<div id="prduct_bottom_left">
</div>
<div id="prduct_bottom_right">
<div id="big">
</div>
<div class="small">
<a href="#" style="color: gray;">
<p>電燉鍋</p>
</a>
<a href="#" style="color: red;">
<p>￥499</p>
</a>
</div>
<div class="small">
<a href="#" style="color: gray;">
<p>電燉鍋</p>
</a>
<a href="#" style="color: red;">
<p>￥499</p>
</a>
</div>
<div class="small">
<a href="#" style="color: gray;">
<p>電燉鍋</p>
</a>
<a href="#" style="color: red;">
<p>￥499</p>
</a>
</div>
<div class="small">
<a href="#" style="color: gray;">
<p>電燉鍋</p>
</a>
<a href="#" style="color: red;">
<p>￥499</p>
</a>
</div>
<div class="small">
<a href="#" style="color: gray;">
<p>電燉鍋</p>
</a>
<a href="#" style="color: red;">
<p>￥499</p>
</a>
</div>
<div class="small">
<a href="#" style="color: gray;">
<p>電燉鍋</p>
</a>
<a href="#" style="color: red;">
<p>￥499</p>
</a>
</div>
<div class="small">
<a href="#" style="color: gray;">
<p>電燉鍋</p>
</a>
<a href="#" style="color: red;">
<p>￥499</p>
</a>
</div>
<div class="small">
<a href="#" style="color: gray;">
<p>電燉鍋</p>
</a>
<a href="#" style="color: red;">
<p>￥499</p>
</a>
</div>
<div class="small">
<a href="#" style="color: gray;">
<p>電燉鍋</p>
</a>
<a href="#" style="color: red;">
<p>￥499</p>
</a>
</div>
</div>
</div>
</div>
<!--廣告圖片-->
<div id="">
</div>
<!--友情鏈接-->
<div id="bottom">
<a href="#">關(guān)于我們</a>
<a href="#">聯(lián)系我們</a>
<a href="#">招賢納士</a>
<a href="#">法律聲明</a>
<a href="#">友情鏈接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服務(wù)聲明</a>
<a href="#">廣告聲明</a>
<p>
Copyright ? 2005-2016 商城 版權(quán)所有
</p>
</div>
</div>
</body>
</html>
