css样式
文字与文字样式:单位与颜色、text、font
p{
font-size:12px;
color:blue;
font-weight:bold;
}css样式常用单位：
px; 像素
em：1em一个字符 行高（自动适应用户所使用的字体）
%：百分比
1.颜色
red,blue,green 颜色名：http://www.w3school.com.cn/cssref/css colors legal.asp
rgb(x,x,x) RGB值 每个颜色分量取值0-255 红色：rgb(255,0,0) 灰色：rgb(66,66,66)
rgb(x%,x%,x%) RGB百分比值 0%-100% 红色：rgb(100%,0%,0%)
rgba(x,x,x,x) RGB值，透明度 a值：0.0（完全透明）与1.0（完全不透明） 红色半透明：rgba（255,0,0,0.5）
#rrggbb 十六进制数 红色:#ff0000 红色：#f00 去掉重复位
2.文本
color 文本颜色 red #f00 rgb(255,0,0)
letter-spacing 字符间距 2px -3px
line-height 行高 14px 1.5em 120%
text-align 对齐 center left right justify
text-decoration 装饰线 none overline underline line-through
text-indent 首行缩进 2em
字符间距 letter-spacing
//demo5.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D</title>
<style type="text/css">
h1{
letter-spacing:2px;
}
h2{
letter-spacing: -3px;
}
</style>
</head>
<body>
<h1>标题内容就这样</h1>
<h2>标题内容就这样</h2>
</body>
</html>行高 line-height
//hanggao.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D</title>
<style type="text/css">
p{
font-size: 24px;
line-height: 2em;
}
</style>
</head>
<body>
<p>
这里是web前端开发课程网站，这个网站主要包括课程的视频、幻灯片、源代码以及一些练习与练习答案.这里是web前端开发课程网站，这个网站主要包括课程的视频、幻灯片、源代码以及一些练习与练习答案.
</p>
</body>
</html>行高应用line-height:40垂直居中，40为文本的高度
垂直居中文本对齐：指文字在文本框的竖直方向时居中的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D</title>
<style type="text/css">
p{
height: 40px;
background-color: #ccc;
font-size: 14px;
line-height: 40px;
}
</style>
</head>
<body>
<p>
这里是web前端开发课程网站
</p>
</body>
</html>文字 font
font:斜体 粗体 字号/行高 字体
font:italic bold 16px/1.5em ‘宋体’;
css背景与超链接
1.背景：
background : 颜色 图片 repeat
background-color
background-image : url("logo.jpg")
background-repeat 背景图片填充: repeat 棋盘格的填充/ repeat-x 横向填充 / repeat-y 纵向填充一列/ no-repeat 只显示一次，一张图片作为背景图片
2.超链接：
a : link :普通的，未被访问的链接
a : visited ：用户访问过的链接
a : hover ：鼠标指针位于链接的上方悬停
a : active ：链接被点击的时刻 ：伪类选择器
超链接按照以下次序：
a : hover必须位于a:link 和a：visited之后
a : active 必须位于 a:hover之后
Love&Hate
3.鼠标悬停放大字体：
//css
a{
font-size:22px;
}
a:hover{
font-size:120%;
}
//html
<a href="#">web design</a>css列表与表格
1.列表
无序列表ul 有序列表ol共用样式
list-style：所有用于列表的属性设置于一个申明中。
list-style-image：为列表项标志设置图像
list-style-position：标志的位置
list-style-type：标志的类型
list-style-type://值的取值范围
//无序列表
none 无标记
disc 默认。标记是实心圆
circle 标记是空心圆
square 标记是实心方块
//有序列表
decimal 标记是数字
lower-roman 小写罗马数字（i，ii，iii，iv，v）
upper-roman 大写罗马数字（I,II,III,IV,V）
lower-alpha 小写英文字母
upper-aipha 大写英文字母
lower-Greck小写希腊字母
lower-latin 小写拉丁字母
upper-latin大写拉丁字母
list-style-position:inside /outside
inside向右缩进到列表区域之内
outside标号是突出在这个列表他的左侧
list-style-image:项目标号是图片的样式
url("img/bul1.gif")
2.表格
border
width 宽
height 高
border-collapse
table{
width: 50px;
height:200px;
}eg;//表格最外层边框table 表头单元格td 表格里面包括表头单元格：th
table,td,th{
border:1px solid #eee;
}//一个像素宽 实线 灰色border-collapse:合并默认的表格样式(表格边框给和单元格边框重叠成一个，更美观)
table{
border-collapse:collapse;
}奇偶选择器 ：nth-child(odd|even)
表格隔行显示不同的颜色
tr:nth-child(odd){
background-color:#EAF2D3;
}odd表示奇数个行，even表示偶数个选择器
css布局与定位
1.盒子模型
(元素什么样)
盒子模型组成：content内容 、height高度、 width宽度、border边框、padding内边距、margin外边距
一个盒子的实际距离宽度、高度 content+padding+border+margin
总宽度=margin-left+border-left+padding-left+内容宽度+padding-right+border-right+margin-right。
//hezi.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D</title>
<style type="text/css" media="screen">
#box{
width: 100px;
height: 100px;
border: 1px solid;
padding: 20px;
margin: 10px;
}
</style>
</head>
<body>
<div id="box">
内容呢就是一个是下高速的盒子，老板发工资最好。
</div>
</body>
</html>//width,height表示内容的高度宽度占100px大小;
//border表示边框是1px实线宽;
//padding表示边框距离内容的内边距是20px;
//margi表示边框距离其他内容的外边距是去10px;
overflow属性
内容溢出盒子框时，overflow属性取值。
hidden : 超出部分不可见
scroll : 显示滚动条
auto : 如果有超出部分，显示滚动条
1.1页面元素的大小
页面中的所有元素都可以看成一个盒子，占据着一定的页面空间。content
element : 元素。
padding : 内边距，也有资料将其翻译为填充。
border : 边框。
margin : 外边距，也有资料将其翻译为空白或空白边。
1.2边框
border属性
border-width : px 、thin（细线条）、medium（中线条）、thick（粗线条）
border-style ：dashed(-----)、dotted(......)、solid(实线)、double（双实线）
border-color ： 颜色
border ：width style color
div{
border-width:2px;
border-style:solid;
border-color:red;
}div{
border:2px solid red;
}div{
border-bottom:1px solid red;
}
//边框底部样式水平分割线
.line{
height:1px;
width:500px;
border-top:1px solid #e5e5e5;
}1.3与其他元素的距离
对浏览器默认的设置清零
*{
margin:0;
padding:0;
}| padding:5px; | margin:5px; | 上右下左 |
| padding-top:10%; | margin-top:10%; | 上 |
| padding-left | padding-left | 左 |
| padding-right | margin-right | 右 |
| padding-bottom | margin-bottom | 下 |
margin:1px 1px 1px 1px;//margin=1px;
margin:1px 2px 1px 4px;//top right bottom left;其中上下的值一样，但是不能省略来写。
margin:1px 2px;//top=bottom=1px;right=left=2px;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D</title>
<style type="text/css">
div{
width:100px;
height:100px;
margin:15px 10px 20px 30px;
border:1px solid red;
}
</style>
</head>
<body>
<div id="box1">box1</div>
<div id="box2">box2</div>
</body>
</html>margin垂直方向外边距的合并：
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
margin水平居中：
图片、文字水平居中:text-align:center
div水平居中 :margin:0 auto;//左侧，右侧的取值auto
eg:设置一个大盒子里面有三个小盒子，放置三幅图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D</title>
<style type="text/css" media="screen">
#newsimglist{
text-align:center;
font-size: 0;/*否则图间有空隙*/
}
#newsimglist img{
height: 100px;
width: 100px;
margin-left: 5px;
border: 1px solid #0ef;
padding :5px;
}
</style>
</head>
<body>
<div id="newsimlist">
<img src="img/tu4.png">
<img src="img/tu4.png">
<img src="img/tu4.png">
</div>
</body>
</html>2.定位机制
确定盒子在页面的哪个位置
2.1文档流flow
默认当前在页面中显示出来的位置。
元素分类
block元素
独占一行
元素的height,width, margin, padding都可以设置。
常见的block元素有：<div> ,<p> ,<h1>...<h6> ,<ol>,<ul>,<table>,<form>
a{
display:block;
}inline元素a转换为block元素，从而使a元素具有块状元素的特征。
inline元素
不单独占用一行
width,height不可设置
width就是它包含的文字或图片的宽度，不可改变
常见的inline元素<span>,<a>
显示为inline元素:display:inline;
inline类型排列有间隙问题，可以在a标签前面加一个ul标签/li/p比标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D</title>
<style type="text/css">
a{
background: pink;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.imooc.com">慕课网</a>
</body>
</html>
inline-block元素
就是同时具备inline元素，block元素的特点
不单独占用一行
元素的height,width,margin,padding都可以设置。eg:<img>
常见的inline-block元素<img>,显示为inline-block元素display:inline-block;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D</title>
<style type="text/css">
*{
padding: 0；
margin：0;
}
#nav{
width: 300px;
margin:100px auto;/*水平居中*/
font-size: 0px;/*取消超链接边框底部的灰色线条之间的空隙*/
}
a{
display: inline-block;
width: 80px;
height: 30px;
font-size: 18px;
text-align: center;/*水平方向上对齐方式*/
line-height: 30px;/*垂直方向上的居中，与超链接所在区域的高度相同*/
text-decoration: none;/*使超链接没有下划线*/
border-bottom: 1px solid #ccc;/*下划线有空白*/
}
a:hover{
color: white;/*悬停字体颜色变为白色*/
background-color: #ccc;/*悬停时背景颜色变为灰色*/
}
</style>
</head>
<body>
<div id="nav">
<a href="#">链接1</a>
<a href="#">链接2</a>
<a href="#">链接3</a>
</div>
</body>
</html>
display属性取值：
| block | 显示为block元素 |
| inline | 显示为inline元素 |
| inline-block | 显示为inline-block |
2.2浮动定位float
改变盒子默认位置，让盒子左右并排排列。
div{
width:200px;
hehight:200px;
border:1px solid red;
float:left;
}
<div id="box1"><div>
<div id="box2"><div>清除浮动clear：
both,清除左右两边的浮动。
left 和rigth只能清除一个方向的浮动。
none是默认值，只在需要移除已指定的清除值时使用。
clear清除时，footer单独显示占据一行，不出现在空位置，需要设置clear两侧属性均清除。
#footer{
clear:both;
}//三行一列
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D</title>
<style type="text/css">
*{
padding:0;
margin: 0;
}
body{
font-size: 14px;
}
#container{
margin: 0 auto;
width: 1000px;
height: 500px;
/**/
}
#header{
height: 100px;
background-color: #6cf;
margin-bottom: 5px;
}
#main{
height:500px;
background-color: #cff;
margin-bottom: 5px;
}
#footer{
height: 60px;
background-color: #6cf;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="main"></div>
<div id="footer"></div>
</div>
</body>
</html>//一行两列float
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D</title>
<style type="text/css">
*{
padding:0;
margin: 0;
}
body{
font-size: 14px;
}
#container{
margin: 0 auto;
width: 1000px;
height: 500px;
/**/
}
#aside{
float: left;
width: 300px;
height: 500px;
background-color: #6cf;
}
#content{
float: right;
width: 695px;
height: 500px;
background-color: #cff;
}
</style>
</head>
<body>
<div id="container">
<div id="aside"></div>
<div id="content"></div>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D</title>
<style type="text/css">
*{
padding:0;
margin: 0;
}
body{
font-size: 14px;
}
#container{
margin: 0 auto;
width:1080px;
/*height: 900px;*/
/**/
}
#header{
height: 100px;
background-color: #6cf;
margin-bottom: 5px;
}
#nav{
height: 30px;
background: #09c;
margin-bottom: 5px;
}
#main{
height:500px;
/**/
margin-bottom: 5px;
}
.aside{
float: left;
width: 190px;
height: 500px;
background:#6cf;
}
#aside1{
}
#aside2{
margin-left: 5px;
}
#content{
float: left;
margin-left:5px;
width: 690px;