1.CSS的作用
HTML：它是整个网站的骨架。
CSS：它是对整个网站骨架的内容进行美化修饰
2.CSS的引入方式
- CSS的引入方式分为三种
第一种行内引入
<div style="color:red;font-size: 100px;">
Java
</div>
第二种：内部引入方式
<style type="text/css">
div{
color:red;
font-size: 100px;
}
</style>
第三种方式：外部引入
将css写在独立的css文件中，然后在html页面的head部分引用
<link rel="stylesheet" type="text/css" href="css文件路径" />
- 如果<style type=”text/css”></style>可不写
- 优先级问题:
谁离需要修饰的元素近，谁的样式生效，其它的被覆盖掉。(就近原则) - CSS 基本选择器有三种(元素选择器、类选择器、id 选择器)
ID 选择器 #id 属性名Id 保证唯一。
元素选择器 元素名{}
类选择器 .类名{}
- CSS 的浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。 - 清除浮动解决办法（当同一级别时一个有浮动一个没浮动）：
在前面定义一个 div(<div id=”three”></div>)
定义 CSS 样式：
#three{
clear:both;
}
- CSS 中如何让块级元素成为内联元素 CSS 中的 display 属性(inline)进行设置
去掉超链接的下划线：
a{
text-decoration: none;
}
让div 居中
margin：0px auto;
让块级元素成为内联元素
display:inline;
块级元素内容居中
text-align:center;
- 其他选择器
可以使用层级选择器设置列表的样式
元素名 子元素名{}
属性选择器语法：
元素名[属性名=”属性值”]{
属性名 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>商品首页</title>
<style>
#father {
border: 1px solid red;
width: 1300px;
height: 2100px;
margin: auto;
}
-------------------------此处消除同级级浮动影响
/*#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="#">注册</a>
<a href="#">购物车</a>
</div>
</div>
<div id="clear"></div>
<!--导航-->
<div id="menu">
<ul>
<a href="#">
<li>首页</li>
</a>
<a href="#">
<li>手机数码</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="#">关于我们</a>
<a href="#">联系我们</a>
<a href="#">招贤纳士</a>
<a href="#">法律声明</a>
<a href="#">友情链接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服务声明</a>
<a href="#">广告声明</a>
<p>
Copyright © 2005-2016 商城 版权所有
</p>
</div>
</div>
</body>
</html>
