HTML-----第二章表格及样式

最新推荐文章于 2024-07-26 14:13:22 发布

码农终将翻身

最新推荐文章于 2024-07-26 14:13:22 发布

阅读量3.3k

点赞数 3

分类专栏： HTML CSS 文章标签： html css 前端

本文链接：https://blog.csdn.net/weixin_68509156/article/details/124877663

版权

HTML 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

CSS

4 篇文章 0 订阅

订阅专栏

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>