文章目录
day02
CSS基础
链接 a标签
-
自带属性：
href: 链接的路径
target:
_self 在当前页跳转，默认就是
_blank 在新页面跳转
-
设置所有链接默认在新页面打开
-
<base target="_blank"> -
头部设置
-
-
局部链接
-
<!-- 空链接, 加#站位 --> <a href="#">点击</a> <!-- #加上要跳转位置对应的id值 --> <a href="#a">出师表</a> <a href="#b">岳阳楼记</a> <a href="#c">小石潭记</a> <h3 id="a">出师表</h3>
-
-
嵌套关系
- a标签除了不能嵌套a标签之外，可以嵌套任何其他标签
HTML列表
-
无序列表
-
1.块级标签
2.结构ul>li
3.前面默认自带圆点符号
4.list-style-type: none; 可以去掉圆点符号
-
-
有序列表
-
1.块级标签
2.结构ol>li
3.前面自带1、2、3、4
4.list-style-type: none;可以去掉符号
-
自带属性
type
1 A a I i
start
设置起始值
reversed
设置为倒数
-
-
自定义列表
-
1.块级标签
2.dl>dt或dd
3.dd自带外边距
-
HTML表格
- 表格的基本结构
- table: 表格最外层大标签
- tr: 表格每一行
- td: 表格每个单元格，默认居左
- 表格的完整结构
- thead: 表格的头部，通常写表格每一列的标题
- tbody: 表格的主体，写表格的数据
- tfoot: 表格的底部，写表格的脚注
- th: 表格标题的单元格。默认居中
- caption: 表格的标题
- 表格自带属性
- border: 表格的边框
- cellpadding: 单元格的内容与边框之间的空间
- cellspacing: 单元格与单元格之间的空间
- align: 单元格的水平对齐方式
- valign: 单元格的垂直对齐方式
- 表格的css属性
- border-collapse
- collapse: 表格设置为单一边框，cellspacing失效
- border-collapse
- 表格的合并
- 行合并
- rowspan
- 两行合并为一行，上下合并
- 列合并
- colspan
- 两列合并为一列，左右合并
- 行合并
语义化
- 概念：运用合适的标签和特定的属性去格式化文档（合适标签和属性要用在合适的场合）
- 优点：
- 易于开发和维护
- 用户体验比较好
- 易于seo,易于爬虫抓取关键字，能和搜索引擎建立良好的沟通。
- 即使在没有css样式的情况下，也能呈现良好的效果
css简介
css引入方式
-
行内式
-
行内式只作用于当前标签
-
<div style="width: 200px;height: 200px;background-color: red;">1</div> -
特点：代码冗余，结构层与表示层不分离。
-
-
内嵌式（文本内部引入）
-
只作用于当前文档
-
<head> <style> /* 标签选择器 */ div { width: 200px; height: 200px; background-color: blue; } </style> </head> -
特点：代码相对清晰，结构层与表示层不完全分离
-
-
外链式（文本外部引入）
-
可以作用于任何文档，需要link标签引入
-
<link rel="stylesheet" href="./css/index.css"> -
特点：代码非常清晰，结构层与表示层完全分离
-
css语法
- 属性名：属性值；属性名：属性值；属性名：属性值；属性名：属性值；。。。
- 属性名：属性值；-----一个css样式声明
- color:red;
css引入方式优先级
- 行内式最优先，内嵌式和外链式后引入生效
基础选择器
-
通配符选择器
-
格式：
* {
属性名:属性值;
属性名:属性值;
属性名:属性值;
。
。
}
* 代表所有标签
-
-
标签选择器
-
格式：
关键字 {
属性名:属性值;
属性名:属性值;
属性名:属性值;
。
。
}
-
-
类选择器
-
格式：
.类名 {
属性名:属性值;
属性名:属性值;
属性名:属性值;
。
。
}
-
-
id选择器
-
格式
#id名 {
属性名:属性值;
属性名:属性值;
属性名:属性值;
。
。
}
-
-
优先级
- id选择器>类选择器>标签选择器>通配符选择器
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
