前言
如果把网页比作住房，那HTML就是毛坯，要做装修就得靠CSS了，这里简单介绍下CSS的用法。
CSS简介
CSS（Cascade Style Sheet） 层叠样式表，作用是对页面元素进行美化和布局。
CSS的语法
<style>
选择器{
样式属性:值;
..
}
..
</style>
CSS的选择器
选择器的作用是对网页元素进行定位，选择器分为多种，常用的包含：标签选择器、ID选择器、类选择器等。
标签选择器
选中页面中所有的对应标签
标签名
{
样式:值;
}
类选择器
选中页面中某几个标签
.类名
{
样式:值;
}
使用：
<标签 class="类名">
或：
<标签 class="类名 类名 ...">
ID选择器
选中页面的一个标签
#ID名
{
样式:值;
}
使用：
<标签 id="ID名">
范围越小，优先级越高
ID > 类 > 标签
通用选择器
应用到页面的所有标签
*
{
样式:值;
}
分组选择器
同时为多个选择器设置样式
选择器,选择器....{
样式:值;
}
子类选项器
将范围定位到父标签内部
父选择器 子选择类{
...
}
伪类选择器
为标签的不同状态设置样式
选择器:伪类{
...
}
伪类分为：
- hover 鼠标悬停
- visted 已访问状态
- active 激活状态
- link 未链接状态
CSS的分类
按定义的位置分为：
- 内部样式表
写在style标签中，作用于当前页面
<style>
..
</style>
- 外部样式表
写在样式表文件中，作用于多个页面
1）定义css文件
2）使用link链接外部样式表文件
<link href="style.css" type="text/css" rel="stylesheet">
- 行内样式
写在标签内部，作用于一个标签
<标签 style="样式:值;样式:值">
常用样式
大小相关样式
- width 宽度
- height 高度
取值：
1）固定值，单位像素 如：600px
2）百分比，占父容器的百分比，如：50%
文字相关样式
- color 颜色
颜色值： 1）单词，如：red 2）十六进制代码 #红红绿绿蓝蓝 - font-size 文字大小
- font-family 文字字形
如：宋体、黑体等 - font-weight 文字粗细
normal\bolder\lighter - font 缩写
font:粗细 大小 字体; - font-style 风格
normal 默认，italic 斜体 - text-align 水平对齐
left默认，center，right - letter-spacing 字符间距
- line-height 行高
- text-decoration 文字修饰
none默认，underline下划线，line-through 穿过线
背景相关样式
- background-color 背景颜色
- background-image 背景图片
值：url(图片路径) - background-repeat 背景重复
值：repeat默认，水平和垂直都重复，repeat-x 水平重复，
repeat-y 垂直重复，no-repeat 不重复 - background-position 背景位置
值：x轴偏移量 y轴偏移量 - backgound 缩写
background:图片地址 重复方式 x偏移 y偏移;
列表相关样式
- list-style 列表样式
none 去掉样式，给UL设置 - float 浮动
left 从左往右，right 从右往左 ，给LI设置
案例 ：完成导航条样式
分析：
1）div + ul + li + a
2）设置div、ul的宽和高
3）设置ul的list-style去掉原点
4）设置li的float为左浮动
5）设置li的宽和高、水平对齐、垂直对齐
6）设置a的字体、颜色
<!DOCTYPE html>
<html>
<head>
<title>导航条</title>
<meta charset="UTF-8">
<style type="text/css">
*{ /*去掉所有标签的外边距和内边距*/
margin:0px;
padding:0px;
}
a{
text-decoration: none; /*去掉下划线*/
}
#nav{
width: 1200px;
height:40px;
}
#nav ul{
width: 100%;
height:100%;
list-style: none; /*去圆点*/
}
#nav li{
float:left; /*水平浮动*/
width:100px;
height:100%;
text-align:center; /*水平居中*/
line-height: 40px; /*垂直居中*/
}
#first{
background: #ff5384;
}
#first a{
color:#ffffff!important; /*强制提高优先级*/
}
#nav a{
font-size:16px;
color:#ff5384;
font-weight: bold;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li id="first">
<a href="#">全部分类</a>
</li>
<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>
<li>
<a href="#">婚具租赁</a>
</li>
<li>
<a href="#">婚品商城</a>
</li>
<li>
<a href="#">制定人员</a>
</li>
<li>
<a href="#">蜜月度假</a>
</li>
</ul>
</div>
</body>
</html>
盒子模型
在页面中所有的标签可以看做盒子，控制盒子布局的样式有：宽度、高度、边框、外边距、内边距。
填充（内边距）
盒子内容和边框的距离
- padding-left 左填充
- padding-right 右填充
- padding-top 上填充
- padding-bottom 下填充
- padding: 值; 上下左右一起设置
padding: 上 右 下 左;
外边距
盒子和其它盒子的距离
- margin-left
- margin-right
- margin-top
- margin-bottom
- margin:值 上下左右一起设置
margin: 上 右 下 左;
margin:auto; 自动调整外边距，设置页面水平居中
边框
- border-width 边框宽度
- border-color 边框颜色
- border-style 边框样式
solid实线，dashed虚线 - border: 宽度 颜色 样式;
- border-radius 边框半径
DIV+CSS布局
页面布局通常采用DIV+CSS，DIV作为网页内容的容器，CSS控制DIV的大小和位置。
网页的文档流：网页标签分为块级标签和行级（内联）标签，块级标签从上向下排列，如：div、p、h1等，行级标签从左向右排列，如：img、a、span等。
那么进行DIV+CSS布局时，如何让多个DIV如何水平排列？比较简单的办法是：设置浮动.
float:left|right
案例：完成下面布局效果
分析：
1、使用DIV嵌套，完成HTML结构
2、设置CSS控制DIV的排列位置
<!DOCTYPE html>
<html>
<head>
<title>DIV+CSS</title>
<meta charset="UTF-8">
<style type="text/css">
#container{
width: 800px;
height: 600px;
background: #cccccc;
margin:auto;
}
#top{
width: 100%;
height:100px;
background: #ff0000;
}
#middle{
width: 100%;
height:400px;
background: #00ff00;
}
#bottom{
width:100%;
height:100px;
background: #0000ff;
}
#content{
width:600px;
height:100%;
background: #ffff00;
float:left;
}
#adv{
width: 200px;
height: 100%;
background: #00ffff;
float:left;
}
</style>
</head>
<body>
<div id="container">
<div id="top">
</div>
<div id="middle">
<div id="content">
</div>
<div id="adv">
</div>
</div>
<div id="bottom">
</div>
</div>
</body>
</html>
206
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
