php-CSS-2
CSS第一天：
结构与表现案例演示
CSS简介
(CSS)cascading style sheets:层叠样式表。级联式样式表，简称：样式表。
Sheets :就是一个样式文件，它的扩展名为.css
Style:外观，个性化
样式表的位置
为了学习方便，先用内嵌式样式(内部样式表)
位置：<head></head>之间。
标记：<style type=”text/css” >样式写在这里</style>
CSS语法格式
声明方法
选择器{属性1：值1;属性2：值2;属性n：值n;}
什么是选择器？
就是通过名称指定对哪些标签进行样式设置
CSS注释
HTML注释：<!--注释内容-->
CSS注释：/*注释内容*/，不管是单行还是多行只有这一种方法。
CSS基本选择器：
style属性(行内样式)：直接写在标签内
如：<p style=”font-size:12px; color:red;” >文字内容</p>
嵌入样式：标签 针对HTML的标签直接设置样式
ID样式选择器
语法：以“#”开头， 命名方法：建议全小写，以字母开头
使用方法：<p id=”id的名称”></p>
类样式选择器
语法： 类名书写规范，以小写字母开始。 定义方法：用“.”开头,后跟类名。
使用方法： <p class=“类名”>内容</p>
通配符选择器
*{CSS规则}
意思：针对当前页面所用的标签应用同样的样式（对标签的初始化）
如：*{margin:0;padding:0;border:0;}
专家建议对标签初始化时采用下面的方法
body,p,ul,li,p,ol,h1,h2,h3,h4,h5,h6,img{margin:0;padding:0;border:0;}
标签和类结合
如：p.test{color:red}
针对p标签应用类名为test1的样式。
组合样式选择器
多元素选择器，多个标签或选择器同时声明
如：h1,h2,ul,li{margin:0;padding:0;}
定义的方法注意：选择器之间用逗号隔开。
后代样式选择器（关联样式选择器）
pspan{color:red;}
含义：针对p标签中的span标签定义样式。
注意：选择器之间用空格隔开。
子元素样式选择器
定义的方法：P>span {CSS规则}
只针对p标签中的span一级有效。
伪类样式选择器
链接<a href=”#”></a>
a:link 链接的正常状态
a:visited 鼠标单击过的链接状态
a:hover 鼠标放在链接上面的（悬停）状态
a:active 当前正在访问的链接状态
当有多种链接样式时，通常配合类来设置
CSS尺寸属性
px,em ,%（相对单位）
font-size:25 不加单位的数字毫无意义
px像素，相对单位。和屏幕的分辨率有关。
em：一个字体高（1倍字体高）,2em(当前默认字体的2倍)
%,百分比。相对单位。相对于当前默认值的百分比。
浏览器的默认字体大小为16px.
CSS字体属性
font-family: 设置字体,建议英文的中文字体，黑体=>simhei
如：Font-family:simhei;
font-size: 设置字体的大小单位，(注意：一定加上单位)
如：font-size:24px;
font-weight:设置字体的加粗方式，100－900，bold,normal(取消加粗)
如：font-weight:100; font-weight:bold; font-weight:normal;
font-style：设置字体样式，italic
如：Font-style:italic; 设置字体为斜体。
CSS文本属性
color ：设置文本的颜色 用单词或16进制（建议#RRGGBB）
可以简写：如：#669900; 也可成：#690;
text-align:left ,center right 文本的对齐方式
line-height: 行高
垂直方向居中，所在容器，所在元素的高度与line-height保持一致。
text-indent:2em 文本的缩进
letter-spacing: 字间距
text-decoration: 文本的描述，修饰
underline,overline,line-through,none;
CSS列表属性
list-style:none;
List-style-type:none;
ul,li{List-style-type:none;} /*列表项前面的项目符号去掉*/
CSS细线表格
<table rules=”all”>
<table bgcolor=”” cellspacing=”2” > <td bgcolor=”white” >
<table style=”border-collapse:collapse”> collapse 英 [kəˈlæps] 美 [kəˈlæps] 折叠
CSS边框属性table,td
CSS边框属性
border:线宽像素 线型 红色。
border:1px solid red; 同时设置四条边
border-方向（top,right,bottom,left）:1px solid red; 设置一条边的情况。
border-方向（top,right,bottom,left）:none 不要某条边的设置方法。
案例 新闻案例，排版
案例 新闻列表
<style type="text/css">
.title,.content{ /*多元素组合声明*/
width:500px; /*设置div的宽度*/
border:1px solid green;/*设置div的边框*/
}
.title{
height:45px; /*设置div的高度*/
line-height:45px; /*设置div的行高*/
background:green; /*设置div的背景色*/
font-size:25px;/*设置字体的大小*/
font-weight:200;/*设置字体的加粗*/
}
.content a:link,.content a:visited{color:gray; text-decoration:none;}/*同时声明链接默认样式及鼠标单击过后的样式*/
.content a:hover{color:red; text-decoration:none;}/*设置鼠标放上面的样式*/
.content li{
border-bottom:1px dashed gray; /*设置li的底边的线的样式*/
width: 450px; height:25px; /*设置li的宽和高*/
line-height:25px;/*设置li行高*/
}
</style>
Body中的内容：
<div class="title"> 新闻中心</div>
<div class="content">
<ul>
<li><a href="#">长春供暖首日遇重度“烟霾“ 市民:以为谁家着火了</a></li>
<li><a href="#">广州去年28部门罚没8.7亿 7亿其他收入未说明</a></li>
<li><a href="#">广州去年28部门罚没8.7亿 7亿其他收入未说明</a></li>
<li><a href="#">年内5次降息为买房人减负 百万房贷可省17万</a></li>
<li><a href="#">台湾太平岛灯塔完工 可照射越南所占岛礁</a></li>
<li><a href="#">解放军允许智能手机进军营安装部队自研软件</a></li>
<li><a href="#">广州去年28部门罚没8.7亿 7亿其他收入未说明</a></li>
</ul>
</div>
最后效果如下：
CSS第二天：
CSS内边距属性:padding 填充
padding:一个数字，指的是四个方向是一样的（上右下左）
padding-top,padding-right,padding-bottom,padding-left
padding:两个数字 例如：padding:10px 20px; 指的是上下为10px,左右为20px
注意：两个数字之间有空格。
padding三个数字 例如：padding:10px 20px 30px; 指的是上10px,下面的填充为30px,左右为20px;
padding:四个数字 例如：padding:10px 20px 30px 40px; 按着顺时针方向。(上右下左)
padding:0 10px;
padding:0;
CSS外边距属性: margin
margin:一个数字，指的是四个方向是一样的（上右下左）
margin-top,margin-right,margin-bottom,margin-left
margin:两个数字 例如： margin:10px 20px; 指的是上下外边距为10px,左右为20px
注意：两个数字之间有空格。
margin:三个数字 例如： margin:10px 20px 30px; 指的是上外边距10px,为30px,左右外边距为20px;
margin:四个数字 例如：padding:10px 20px 30px 40px; 按着顺时针方向。(外边距，上右下左)
margin:0 10px;
margin:0;
CSS背景:background
background-color 背景色,英文单词或十六进制颜色都可以。
background-image:url(图片路径)背景图
background-repeat （no-repeat不重复，repeat-x,repeat-y）重复
background-position(left,center top bottom right) 背景图定位
CSS精灵： 就是背景图定位; 将许多小图放到一大图上。
background-attachment （依附方式）是否固定，fixed
.box{background:#ccc url(图片的路径) no-repeat 定位坐标 fixed }
关于背图固定，IE6只有 body支持
CSS浮动和清除
浮动的元素可以理解为该元素已经脱离文档流。“已经不存在了”
浮动只有两个方向：left,right
float:left(左浮动), float:right（右浮动）;
浮动的位置：浮动到包含元素的边界。或具有浮动属性元素的边上。
浮动元素的层级高于普通元素。
凡是浮动的元素都是块元素。
如果浮动前行内元素，浮动后自动转为块元素。
备注：行内元素没有宽高，只有块元素才有宽高。
关于浮动，我们能通常用在，将块元素在一行内显示。
主要应用于排序（DIV+CSS）
凡是设置了浮动这之后，一定要有清除浮动。
主要目的，清除上面的有浮动属性，对后面的元素造成的影响。
（上面的浮动属性，如果不清除，下面的元素会默认继承。）
清除浮动的写法：clear:left,right,both
.Clear:both,清除两边，我们通常用在版权独占一行。
清除写的位置：具有浮动属性的最后面。
通常，用一个空的<div class=”clear”></div>
overflow属性: hidden scroll auto
案例：新闻模块深入
案例：PHP开班信息
CSS引入的方式: 行内，内嵌，外部
CSS优先级
CSS继承
案例. 课堂实例：我们开学啦
display属性: block inline inline-block none
案例. 笑话导航
position定位属性:static fixed relative absolute
定位坐标：left top right bottom
课堂练习：限时抢
