一、CSS（Cascading Style Sheet）层叠样式表
CSS优点
- 批量控制网页的外观
- 精确控制网页的外观（到像素级别）
css的基本语法形式：
选择器 { css属性名1：值1；css属性名2：值2； ………… }
eg：font{color:red; font-weight:bold; font-size:18px;}
HTML属性和css属性的区别
- HTML属性：
写在标签中 形式为：属性名="属性值"
- css属性：
写下选择器的大括号里 形式为 属性名：属性值
二、选择器分类
标签选择器：指代（对应）网页中的所有该标签都应用其中的属性设置
标签名{……}
类选择器：指代（对应）网页中的class的值为该类名的所有标签都应用该属性设置
.类名{……}
类选择器举例
id选择器：指代（对应）网页中的id的值为该名称的该标签都应用该属性设置
#id 名{……}
id选择器举例
通用选择器：其自动指代“所有标签”，即所有标签都应用该属性设置
*{ ….. }
注意： 通用选择器慎用，通常只用于设置基本的几个属性，比如文字颜色，文字大小，padding，margin
伪类选择器
:伪类名{……}
伪类名其实只有系统内部规定的不多的几个，不是我们自己定义的,他们的含义也是特定的。
eg:
a:link{ …… } ：表示一个a链接标签在网页初始打开的时候的状态（初始链接状态）
a:visited{…..} ：表示一个a链接标签在点击（访问）过之后的时候的状态（访问后状态）
a:hover{….} ：表示一个a链接标签在鼠标放上去的时候的状态（悬停状态）
a:active{….} ：表示一个a链接标签在鼠标摁住但还没有抬起的状态（活动状态）。
复合选择器：
- 层级选择器：
选择器1 选择器2 { ……… }
在选择器1所对应的标签中由选择器2所对应的那些标签.
其中，选择器1和选择器2可以是前面所学的任意某种选择器，而且这种层级关系还可以多层次
eg:
#d1 div{…}
.cc1 p span{…..}
p .cc2 img{…..}
#d1 p a:hover{….
举个栗子：
栗子
- 分组选择器:指这两个选择器都使用同样的属性设置
选择器1，选择器2 { ……… }
也就是说：
.a {color:red; font-size:15px;}
.b{ color:red; font-size:15px;}
可以简写为：
.a, .b{ color:red; font-size:15px;}
- 其他复合类型
div.cc1{…}:代表具有class值为cc1的div标签
css的文字段落样式属性
| 属性 | 作用 | 应用 |
|---|---|---|
| color | 设定一个标签中的文字的颜色 | 颜色值用英文单词或16进制语法和rgb语法 |
| font-size | 设置文字大小 | 单位通常为像素（px） |
| font-weight | 设置文字粗体 | 粗体（bold）或非粗体（normal） |
| font-style | 设置文字斜体 | 斜体（italic）或非斜体（normal） |
| font-family | 设置文字的字体名字 | 可以使用多个字体名，中间用逗号分开 |
| line-height | 设置文字所占据的空间高度 | 单位通常为像素（px） |
| letter-spacing | 设置字符（或字母）之间的间隔距离 | |
| word-spacing | 设置单词之间的间隔距离 | 通常只对西方拉丁语系的字符有效 |
| text-align | 设定文字的水平对齐方式 | 功能是相当于标签属性中的align属性 |
| text-indent | 设置一个段落的首行缩进距离 | 单位通常为像素（px） |
| text-decoration | 设置文字的"修饰线" | 下划线（underline）,中划线(line-through)，上划线（overline）,none(无) |
| vertical-align | 设定文字在一个表格的垂直对其方式 | top（顶对齐），middle(中对齐)，bottom(底对齐) |
举个css应用的大栗子：
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css">
*{
font-size:12px;
color:black;
}
#table1{
width:300px;
height:300px;
//如果一个标签的某方面特性既受html属性影响，又受css属性影响，则：css设置优先
border:solid 1px black;
}
.head{
color:white;
line-height:36px;
font-size:16px;
font-weight:bold;
height:36px;
background:#2678BF;
}
.head img{
vertical-align:middle;
}
.main{
width:282px;
height:230px;
}
.t1{
font-weight:bold;
}
.t2{
color:#6666ff;
border-bottom: dashed 1px gray;
}
.t3{
color:blue;
font-weight:bold;
text-align:right;
border-bottom: dashed 1px gray;
}
.t4{
color:red;
font-weight:bold;
text-align:right;
border-bottom: dashed 1px gray;
}
.main tr{
border-bottom: dashed 1px gray;
}
</style>
<script type="text/javascript"></script>
</head>
<body>
<table id="table1" width="600" height="600" cellspacing="0" cellpadding="0" >
<tr>
<td class="head"> PHP开班信息</td>
</tr>
<tr>
<td>
<table class="main" align="center">
<tr>
<td class="t1">PHP基础班</td>
<td></td>
</tr>
<tr>
<td class="t2">北京 - 08月10号</td>
<td class="t3">爆满已开班</td>
</tr>
<tr>
<td class="t2">北京 - 09月12号</td>
<td class="t4">预约报名</td>
</tr>
<tr>
<td class="t1">PHP基础班</td>
<td></td>
</tr>
<tr>
<td class="t2">北京 - 08月10号</td>
<td class="t3">爆满已开班</td>
</tr>
<tr>
<td class="t2">北京 - 09月12号</td>
<td class="t4">预约报名</td>
</tr>
<tr>
<td class="t1">PHP基础班</td>
<td></td>
</tr>
<tr>
<td class="t2">北京 - 08月10号</td>
<td class="t3">爆满已开班</td>
</tr>
<tr>
<td class="t2">北京 - 09月12号</td>
<td class="t4">预约报名</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
网页效果
二、盒子：css中最重要的概念
网页，就是一个盒子套一个盒子
1、盒子的区域构成
边框（border）：一个线型的区域，可以是实线或虚线或其他形状。
外边距（margin）：也叫“边界”，边框线之外的一块空白区域，其含义是“不能放置物体”
内边距（padding）：也叫“补白”，边框线之内的一块空白区域，其含义也是“不能放置物体”
内容区（没有对应的css属性名）：指一个盒子中可以放置“物体”的区域——也就是盒子的主要区域。
盒子区域分布
图片.png
2、网页设计中的“内容与表现分离”思想
HTML中，标签具有“表形表意”的作用，也就说内容和表现混在一起
而css是将网页中各个标签的表现都提出来，放到一个专门的地方（eg：style标签中）剩余部分被整体上称为“结构/内容”。这就是内容和表现分离思想。
3、布局原理
布局：指将网页内容以一定的方式放到适合的位置上
上下结构：使用若干个盒子，自然就是上下结构
左右结构：使用若干个盒子，并进行相应的浮动，通常的模式：
i. 2个盒子：一左一右
ii. 3个盒子：两左一右或两右一左，或一边倒。
iii. 更多盒子：通常一边倒。
浮动：形象比喻就是气泡，“向上浮”（float：left/right）
父盒子包住子盒子
①给父盒子设置一个固定高度
②给父盒子的内部最末尾加一个清除浮动的空盒子 <div style="clear:both"></div>
③给父盒子设置一个css属性：overflow:hidden总得来说就是：布局需要左右排列，左右排列需要浮动，浮动需要修正其破坏效果——让父盒子合理包住其子盒子。
举个盒子的大栗子
用盒子做出以下布局：
做出此布局
<style type="text/css">
.toubu{
height:100px; background:red;
}
.zhongjian{
height:300px; background:blue;
}
.zhongjian .zuo{
background:yellow;
float:left;
width:150px; height:250px;
margin-left:15px;
}
.zhongjian .you{
background:purple; float:right;
width:800px; height:290px;
}
.weibu{
background:#00FFFF;
}
</style>
<script type="text/javascript"></script>
</head>
<body>
<div class="toubu"></div>
<div class="zhongjian">
<div class="zuo">a</div>
<div class="you">b</div>
</div>
<div class="weibu">
</div>
</body>
哈哈！是不是很简单啊！
4、盒子的尺寸构成：
一个盒子的宽度构成：
左外边距 + 左边框宽 + 左内边距 + width值 + 右内边距 + 右边框宽 + 右外边距
一个盒子的高度构成：
上外边距 + 上边框宽 + 上内边距 + height值 + 下内边距 + 下边框宽 + 下外边距
5、盒子元素
margin外边距；分为4个方向，每个方向都可以单独控制
margin-top: 上外边距
margin-right: 右外边距
margin-bottom:下外边距
margin-left: 左外边距
margin-auto: 上下左右边距相等margin其实是表示上述4个属性的一个“综合属性”：其实它代表的就是指“一下子设置了4个方向的margin”，其详细使用形式和含义如下：
margin: 一个值；——设置上，右，下，左4个方向均为该值；
margin：值1 值2； ——设置上下margin为值1，左右margin为值2；
margin：值1 值2 值3；——设置上margin为值1，左右margin为值2， 下margin为值3；
margin：值1 值2 值3 值4；——分别设置上，右，下，左4个方向的值；
padding内边距和margin是一样的
border边框,边框指的是边框线。
线有3个方面的特性：线型，线宽，线色，每个特性都可以单独控制。
边框也有4个方向，每个方向都可以单独控制。（top right left bottom）border-top-style: 顶部边框的线型。常见线型：solid , dashed, dotted
border-top-width: 顶部边框的线宽；
border-top-color: 顶部边框的线色；
border-right-style:
border-right-width:
border-right-color:
……等12个
3个设置线的特性
border-style: 可以使用1-4个值，用来设置4个方向的线的线型，其规则同margin值的设置。
eg：border-style:solid dashed; 表示上下边框为实线，左右边框为虚线；
border-width: 同理，可以设置1-4个值，表示4个方向的线宽。
border-color：同理。
4个方向边框属性：
border-top: 线型 线宽 线颜色；
border-right: 线型 线宽 线颜色；
border-bottom: 线型 线宽 线颜色；
border-left: 线型 线宽 线颜色；
最大的综合属性：一次性设置4个方向的3个特性：
border: 线型 线宽 线颜色；
盒子还有背景属性。
6、盒子背景：
背景分两种：
背景颜色：只能是纯色，全平铺——css3里面已经可以设置过度色。background-color:颜色值；背景图片：需要设置图片路径，还可以设置是否重复（平铺），怎么重复，怎么定位。
background-image:url(图片路径); background-repeat: repeat // no-repeat // repeat-x // repeat-y; 重复 // 不重复 // 仅x方向重复//仅y方向重复 background-position: 水平定位方式 垂直定位方式； 水平定位方式有： left // center // right // 离左边的像素值； 垂直定位方式有： top // center // bottom // 离顶部的像素值；背景综合属性：可以一次性设置有关背景的多个数据值：
background：背景色值 背景图值 背景图重复性值 背景图定位值； 以上4个值，几乎可以任意省略（也就是任意使用其中某些）。
7、块盒子和行内盒子
对块盒子，其display属性的值默认是block
对行内盒子，其display属性的值默认是inline；
实际上，我们完全可以将html盒子的初始表现使用该属性来设置其其它值——即块盒子和行内盒子可以相互转换。
div{ display: inline;} ——此时div就跟span一样。
span{ display: block;} ——此时span就跟div一样。
display: inline // block // none: 显示为：行内盒子//块盒子//不显示
三、样式分类
1、行内样式：
<标签名 其他标签属性……. style=”css属性1：值1；css属性2：值2； …… ” >内容部分</标签名>
只对当前标签有效：通常不推荐使用，或偶尔临时使用。
2、页内样式：
<style>
选择器1{ ….. }
选择器2{ ….. }
……
</style>
只对当前网页有效：常见。
3、外部样式：
css文件中：
选择器1{ ….. }
选择器2{ ….. }
……网页文件中：
<link rel="stylesheet" type="text/css" href="css文件路径url" />对所有引入该css的网页有效：常见。
网友评论