第二章表格及样式入门

最新推荐文章于 2024-09-12 16:43:23 发布

mxz_l

最新推荐文章于 2024-09-12 16:43:23 发布

阅读量142

点赞数

文章标签：前端 html css

本文链接：https://blog.csdn.net/mxz_l/article/details/125152561

版权

1.表格

1.1 表格概述

概念：以行列对齐的方式显示数据

作用：用于呈现数据

1.2 表格结构：

基本结构

<table></table> <!--表格的根标签，设置表格的基本标签，设置表格的属性-->
<caption></captioin> <!--设置表格的标题-->
<thead></thead> <!--设置表头行-->
<tbody></tbody> <!--设置表格的内容-->
<tfoot></tfoot> <!--设置表格脚部-->
<tr></tr> <!--行标签-->
<th></th> <!--设置表头单元格-->
<td></td> <!--标准的数据单元格-->

1.3 表格属性

（1）表格外边框，可设置表格边框粗细 border

（2）单元格间距 cellspacing

（3）单元格内填充，单元格内容与边框之间的距离 cellpadding

（4）表格的宽高 width height table标签中的宽高相当于极限大小，宽度不可超过table标签中的宽度，但高度可以

（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）水平对齐方式 align：left（默认） center right

align写到table中调整的是整个表格相对于父元素（浏览器容器）的位置

写到tr、td中调整的是单元格中内容的位置

（8）垂直对齐方式 valign：top（上） center bottom（下）

1.4 表格特性

同行高度一致，同列宽度一致

1.5表格合并

（1）合并列，横向合并，从左到右 colspan="合并的单元格数量"，跨列，同一行的单元格会被挤出去。要删除多余单元格

（2）合并行，纵向合并，从上到下 rowspan="合并的单元格数量"，跨行，下面行的单元格会被挤出去。要删除多余的单元格

1.6 表格嵌套

在一个大表格中嵌套一个小表格，在tr或td标签中嵌套table标签

2.CSS样式入门

2.1 为什么需要CSS

通过定义CSS样式表，能让网页具有美观一致的界面，可以将网页制作得更加绚丽多彩。一个样式文件可以作用于多个页面，具有更好的易用性和扩展性，通过修改样式文件，能制作出内容相同，而外观不同的多姿多彩的页面。通过CSS可以实现内容和样式分离。方便后期维护。

2.2 CSS概念

Cascading Style sheet 层叠样式表：层叠性

2.3 CSS应用

（1）内部样式表

<head>
....
<style type="text/css"> <!--文档样式表开始-->
选择器（用于选择到某个html元素，然后为元素设置css样式）
{ 
  样式属性1 : 值1 ;  
  样式属性2 : 值2 ;
  ...  
}
</style>  <!--文档样式表结束-->
</head>

（2）外部样式表

外部样式表的使用步骤：
  1.定义好html页面内容
  2.新建一个单独的css文件
  3.在css文件中直接定义样式内容
  4.在html文件中引用css文件

引入外部样式方法

优点：一个样式文件可以作用于多个页面，具有更好的易用性和扩展性，通过修改样式文件，能制作出内容相同，而外观不同的多姿多彩的页面。

（3）行内样式表

通过style属性在标签中定义行内样式，行内样式表不推荐使用。

3.基础选择器

3.1 标签选择器

使用html标签名定义样式，匹配到的html元素，自动应用定义的样式，只要标签名为标签选择器中的标签名，都会应用定义的样式。

3.2 类选择器

进行更细致化或更灵活的样式控制要使用类样式

使用类样式(类选择器)的步骤：

1. 定义类样式: 在style标签中或外部样式表中用".样式名"的方式定义类样式

2. 使用类样式: 在需要使用类样式的元素中通过class属性引用样式名

<html>
 <head>
  <title> New Document </title>
  <meta charset="utf-8">
  <style type="text/css">
  .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>

3.3 id选择器

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">
  <style type="text/css">
  #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>