1.回顾
2.本章重点
2.1.表格
2.2.CSS样式入门
2.3.基础选择器
3.具体内容
3.1.表格
3.1.1.表格概述
概念:以行列对齐的方式显示数据。
作用:用于呈现数据
3.1.2.表格结构
基本结构:
<!-- 表格的基本结构: 1.<table></table> 表格的根标签 设置表格 基本标签,属性 2.<caption></caption> 设置表格的标题 3.<thead></thead> 设置表头行 4.<tbody></tbody> 设置表内容 5.<tfoot></tfoot> 表格脚部 6.<tr></tr> 行标签 7.<th></th> 设置表头单元格 8.<td></td> 标准的数据单元格 -->
3.1.3.表格属性
<!-- 表格的属性 1.表格外边框 border 2.单元格间距 cellspacing 3.单元格内填充 cellpadding 内容与边框之间的距离 4.表格的宽高 width height table标签中的宽高相当于 极限大小 宽度不能超过400 但是 高度有可能 5.背景颜色 bgcolor 颜色三种表示法: 1. 英文单词 red green 不能表示所有的颜色 2. 十六进制表示 #F9EE91 3. RGB red green blue 1600W种 rgb(0-255,0-255,0-255) 256*256*256 6.背景图片(相对引用/绝对应用) background 7.水平对齐方式(写到tr,td上调整的是内容) align left(默认) center(居中) right(右边) 如果写在table标签中 调整的是 整个表格相对于其父元素(浏览器容器)的位置 8.垂直对齐方式 valign top(上) center(居中) bottom(下) --> <!-- px 表示像素 --> <!-- 表格特性:同行高度一致,同列宽度一致 -->
<table border="1" width="400" align="center">
<caption>学生信息表</caption>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>1001</td>
<td>张三</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td>1001</td>
<td>张三</td>
<td>男</td>
<td>20</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4" align="right">班级人数:2人</td>
</tr>
</tfoot>
</table>
3.1.4.表格合并
<!-- 表格合并
合并列 横向合并 从左-》右 colspan 合并几个单元格就等于几
合并行 纵向合并 从上-》下 rowspan 合并几个单元格就等于几
-->
<!--
rowspan:跨行,单元格垂直扩展,下面行的单元会被挤出去。要删除多余单元格
colspan:跨列,单元格水平扩展,同一行的单元格会被挤出去。要删除多余单元格
-->
<table width="400" border="1">
<tr>
<td rowspan="2">姓名</td>
<td rowspan="2">性别</td>
<td colspan="3" align="center">出生日期</td>
</tr>
<tr>
<td>年</td>
<td>月</td>
<td>日</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>1999</td>
<td>01</td>
<td>01</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>1998</td>
<td>01</td>
<td>01</td>
</tr>
</table>
3.1.5.表格嵌套
<table width="780" height="500" border="1" align="center">
<tr>
<td height="200">
<img src="images/banner.jpg"/>
</td>
</tr>
<tr>
<td height="33">
<table width="100%" bgcolor="#66ccff">
<tr >
<td><a href="#">菜单1</a></td>
<td><a href="#">菜单2</a></td>
<td><a href="#">菜单3</a></td>
<td><a href="#">菜单4</a></td>
<td><a href="#">菜单5</a></td>
<td><a href="#">菜单6</a></td>
<td><a href="#">菜单7</a></td>
<td><a href="#">菜单8</a></td>
<td><a href="#">菜单9</a></td>
<td><a href="#">菜单10</a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td >
<table width="100%" border="1" height="500">
<tr>
<td width="195" valign="top">左边</td>
<td width="390" valign="top">中间</td>
<td width="195" valign="top">右边</td>
</tr>
</table>
</td>
</tr>
</table>
3.2.CSS样式入门
3.2.1.为什么需要CSS
通过定义CSS样式表,能让网页具有美观一致的界面,可以将网页制作得更加绚丽多彩。一个样式文件可以作用于多个页面,具有更好的易用性和扩展性,通过修改样式文件,能制作出内容相同,而外观不同的多姿多彩的页面。
通过CSS可以实现内容和样式分离。方便后期维护。
3.2.2 CSS概念
Cascading Style sheet 层叠样式表 : 层叠性
3.2.3 CSS应用
3.2.3.1 内部样式表
语法格式:
<head> .... <style type="text/css"> 选择器 { 样式属性1 : 值1 ; 样式属性2 : 值2 ; ... } </style> </head>
注意:所有符号用英文
3.2.3.2 外部样式表
外部样式表的使用步骤: 1.定义好html页面内容 2.新建一个单独的css文件 3.在css文件中直接定义样式内容 4.在html文件中引用css文件
<!-- 引入外部的样式表文件 --> <link rel="stylesheet" href="样式文件路径" type="text/css" />
css1.css
h1{ color:red; } .ys1{ color:green; } .ys2{ color:blue; }
css2.css
h1{ color:gray; } .ys1{ color:orange; } .ys2{ color:pink; }
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<!--
外部样式表的使用步骤:
1.定义好html页面内容
2.新建一个单独的css文件
3.在css文件中直接定义样式内容
4.在html文件中引用css文件
-->
<!--在当前html中引用外部样式表-->
<link rel="stylesheet"
type="text/css"
href="css1.css" />
</head>
<body>
<h1>这是表题内容</h1>
<p class="ys1">这是P标签内容</p>
<p class="ys2">这是P标签内容</p>
</body>
</html>
好处:一个样式文件可以作用于多个页面,具有更好的易用性和扩展性,通过修改样式文件,能制作出内容相同,而外观不同的多姿多彩的页面。
3.2.3.3 行内样式表
<!-- 行内样式表 :不推荐使用 --> <h2 style="color:red; font-family:宋体;">内容</h2>
3.3.基础选择器
3.3.1 标签选择器
使用html标签名定义样式,匹配到的html元素,自动应用定义的样式
<!--定义css内部样式表:在head标签内部定义
样式的作用:目的是修饰html内容
-->
<style type="text/css">
/* 注释代码
选择器
{
样式属性1 : 值1 ;
样式属性2 : 值2 ;
...
}
选择器:用于选择匹配页面中的特定元素
标签选择器: 用html标签名做选择器,自动匹配对应的标签元素
问题: 如何只让第二句和第四句变绿
类选择器,id选择器
*/
h1
{
font-size:40px; /*字体大小*/
color: red; /*字体颜色*/
text-align:center; /*居中*/
}
p
{
color:green;
font-size:20px;
text-align:center;
}
</style>
<h1>静夜思</h1> <p>床前明月光,</p> <p>疑是地上霜。</p> <p>举头弯明月,</p> <p>我是郭德纲。</p>
3.3.2 类选择器
进行更细致化或更灵活的样式控制要使用类样式
使用类样式(类选择器)的步骤:
1. 定义类样式: 在style标签中用".样式名"的方式定义类样式
2. 使用类样式: 在需要使用类样式的元素中通过class属性引用样式名
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
/*请让第2个p和第2个li变红*/
/*进行更细致化或更灵活的样式控制要使用类样式*/
/*
使用类样式(类选择器)的步骤:
1. 定义类样式: 在style标签中用".样式名"的方式定义类样式
2. 使用类样式: 在需要使用类样式的元素中通过class属性引用样式名
*/
.hs{
color:red;
}
</style>
</head>
<body>
<h1 class="hs">这是标题内容</h1>
<p>这是第1个P标签</p>
<p class="hs">这是第2个P标签</p>
<p>这是第3个P标签</p>
<p>这是第4个P标签</p>
<ul>
<li>这是第1个li</li>
<li class="hs">这是第2个li</li>
<li>这是第3个li</li>
<li>这是第4个li</li>
</ul>
</body>
</html>
3.3.3 id选择器
id选择器: identifier 唯一的
id属性定义的元素在整个页面必须唯一,也就是id名是不能重复
id一般用于定义页面的布局元素 div,span
id在js中用于js获取对象的时候使用
id定义样式的步骤:
1. 在style标签中用 "#id名"的方式定义样式
2. 在需要使用id样式的元素中通过id属性引用id名来使用样式
<head>
<title> New Document </title>
<meta charset="utf-8">
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
/*id选择器: identifier 唯一的
id属性定义的元素在整个页面必须唯一,也就是id名是不能重复
id一般用于定义页面的布局元素 div,span
id在js中用于js获取对象的时候使用
id定义样式的步骤:
1. 在style标签中用 "#id名"的方式定义样式
2. 在需要使用id样式的元素中通过id属性引用id名来使用样式
*/
#bt{
color:blue;
}
#p2{
color:green;
}
#li3{
color:red;
}
</style>
</head>
<body>
<h1 id="bt">这是标题内容</h1>
<p >这是第1个P标签</p>
<p id="p2">这是第2个P标签</p>
<p>这是第3个P标签</p>
<p>这是第4个P标签</p>
<ul>
<li>这是第1个li</li>
<li>这是第2个li</li>
<li id="li3">这是第3个li</li>
<li>这是第4个li</li>
</ul>
</body>
</html>
3.3.4 优先级
样式权重: 对于同一个元素,只使用权重高的样式
!important: 10000
行内: 1000
id: 100
类: 10
标签: 1
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<!--定义样式表-->
<style type="text/css">
/*
样式权重: 对于同一个元素,只使用权重高的样式
!important: 10000
行内: 1000
id: 100
类: 10
标签: 1
*/
#zs{
color:purple;
}
.huangs{
color:orange;
}
/*交叉选择器*/
h1.huangs{
color:red !important ;
}
/*后面覆盖前面的,就近原则*/
h1{
color:blue;
}
</style>
</head>
<body>
<h1 class="huangs" id="zs" style="color:green;">这是为难的标题</h1>
<h1>asdfasdf</h1>
</body>
</html>