一、CSS
1.什么是css?
全称Cascading Style Sheets,通常称为css样式表或层叠样式表(级联样式表)
作用:html页面中元素的位置、排版、样式外观等
css语法规范:
由选择器、一条声明或多条声明组成
选择器:通常是需要改变样式的html标签
声明组:以大括号{}括起来的
选择器{
属性:属性值;
属性:属性值;
-----
}
2.css语法规范
CSS 规则由两个主要的部分构成:选择器、一条或多条声明。
选择器:通常是需要改变样式的 HTML 标签。
声明组:以大括号{}括起来。
每条声明由一个属性和一个值组成,属性与属性值之间以【冒号】分隔,用【分号】将每个声明分开。
3.引入css
.行内样式
语法:
<开始标签 style="属性1:属性值1;属性2:属性值2;---"></结束标签>
注意:任何html元素都可以设置行内样式;
优缺点:
比较直观:相同的样式需要重复定义,造成代码冗余;作用范围小,不利于后期代码的维护,代码不能复用
结构样式不分离
<!-- 内部样式 -->
<style>
/* 选择器 */
div{
/* 样式声明 */
width: 200px;
height: 300px;
background-color: blue;
/*
优缺点:
相对于行内样式来说,代码可以重复使用: 作用范围大于行内样式:结构样式半分离
*/
}
</style>
<!-- 引入外部css样式 -->
<!--
语法:
<link rel="stylesheet" href="css路径">
-->
<link rel="stylesheet" href="./box.css">
rel表示引入文件与当前文档的关系
stylesheet为样式表
</head>
<body>
<!-- div
宽200px
高300px
背景颜色 红色
优缺点:
1.作用范围广,可以重复使用代码
2.便于修改和维护代码
3.结构样式相分离
-->
<div></div>
href="" 资源链接的地址
<!--
总结:
行内样式:适用于某个元素拥有特殊样式时使用.结构样式[不分离]
内部样式:适用于单个页面拥有特殊样式时使用,结构样式时[半分离状态]
外部样式:适用于多个页面拥有特殊样式时使用,结构样式[相分离]
-->
4.css注释
注释的语法
CSS中的注释以"注释以/*开头,以*/结尾,开始和结束中间为注释内容。
注释的作用
解释说明,标记不同代码节的开始 代码调试,用于在测试中临时禁用一段代码
生成快捷方式
ctrl + / 取消或添加
5.CSS选择器
通配(通用)选择器:匹配任意类型的HTML元素
元素名称选择器:选择所有同一元素名称的所有元素
类选择器:选择所有带有指定类名的元素
id选择器:选择所有带有指定类名的元素
类与id的命名规则
尽量用英文
始终建议以字母开头,可以包含数字、字母、下划线等
不要以数字开头
多个单词可以以驼峰式(newsCont)、中划线连接(news_cont)、下划线连接(news-cont)等
二.table标签
1.HTML表格
1.1表格的作用
表格用于显示、展示数据。
1.2表格的基本标签
<table>定义表格
<tr>定义表格中的行
<td>定义表格的单元格
<th>定义表头单元格
1.3表格常用属性
(table属性)
<width>定义表格的宽
<height>定义表格的高
<border> 可以显示一个带有边框的表格。
<cellpadding>设置单元格中内容和边框之间的间距
<cellspacing>设置单元格和单元格之间的间距
(td,th属性)
<width><height>单元格宽度、高度
<align>单元格水平方向的对齐方式
left左对齐
center 居中对齐
right 右对齐
<valign>单元格垂直方向的对齐方式
top顶对齐
middle居中对齐
bottom底部对齐
1.4表格结构标签
<caption>定义表格的标题
<thead>用于组合 HTML 表格的表头内容
<tbody>用于组合 HTML 表格的主体内容
<tfoot>用于组合 HTML 表格的页脚内容
1.5合并单元格
<rowspan>跨行合并
<colspan>跨列合并