六、对之前table知识复习
>| 排名 | 关键词 | 趋势 | 今日搜索 | 最近七日 | 相关链接 |
|---|---|---|---|---|---|
| 1 | 鬼吹灯 | 345 | 123 | 贴吧 图片 百度 | |
| 2 | 盗墓笔记 | 345 | 123 | 贴吧 图片 百度 | |
| 3 | 西游记 | 345 | 123 | 贴吧 图片 百度 | |
| 4 | 东游记 | 345 | 123 | 贴吧 图片 百度 | |
七、体验CSS
选择器 { 样式}
给谁改 {改成什么样}
标签选择器
h1 {color: red;}
p {color: blue; font-size: 28px;}
类选择器 :样式点定义 结构类（class）调用 一个或多个 开发最常用
.red {
background-color: red;
width: 100px;
height: 100px;
}
.green {
background-color: green;
width: 100px;
height: 100px;
}
.black {
color: black;
}
.font {
font-size: 30px;
}
id选择器 ：样式#定义 结构id调用 只能调用一次 别人切勿使用
#pink {
color: pink;
}
通配符选择器 ：不需调用 自动给所有元素使用样式
{
margin: 0;
padding: 0;
}
这是一个标签
这是一个段落
- 苹果
- 香蕉
- 西瓜
- 橙子
- 菠萝
- 草莓
八、体验CSS字体
h1 {font-family: '微软雅黑';
font-size: 22px;
}
多个字体有利于兼容性 第一个字体浏览器不兼容就用第二个
p {
标题需单独指定字体大小
font-size: 20px;
font-family: 'Times New Roman', Times, serif;
text-indent: 2em;
line-height: 34px;
em是相对单位 是当前元素一个文字大小
}
.cu {
font-weight: 700;
}
.xie {
font-style: italic;
font-family: 'Microsoft YaHei';
text-align: center;
text-decoration: underline;
}
/div {
font-style: italic;
font-size: 18px;
font-weight: 700;
font-family: 'Microsoft YaHei';
}
上面可以简化为 有顺序的 style weight size/line_height family
font: italic 700 18px 'Microsoft YaHei'
a {
text-decoration: none;
}
text-align 位置 居中还是。。
text-decoration 下划线什么的
text-indent 首行缩进
line-height 行间距
页面：
静夜思
床前明月光
疑是地上霜
举头望明月
低头思故乡
九、元素显示模式
块内元素 比较霸道，独占一行 高度 宽度 内外边距都可以控制 宽度默认是父级宽度 是一个容器及盒子，里面可以放行内或块级元素
有 div h1-h6 p ol ul li
注意：文字类元素内不能放块元素
主要放文字，因此p内不能放块元素，主要是div 同理h1-h6也是
div {
/* width: 200px; */
height: 200px;
background-color: pink;
}
行内元素 有 、、等，有些地方也称内联元素
相邻元素在一行上 一行可以显示多个
高 宽 直接设置是无效的
默认宽度就是本身内容的宽度
行内元素只能容纳文本和其他行内元素l
注意：链接内不能放链接 a特殊情况下可以放块内元素
行内块元素
同时具有行内元素和块元素特点，称为行内块元素
1.和相邻行内元素(行内块 )在一行上，但是他们之间会有空白缝隙。一行可以显示多个( 行内元素特点)。
2.默认宽度就是它本身内容的宽度(行内元素特点)。
3.高度，行高、外边距以及内边距都可以控制( 块级元素特点 )。
元素模式转化
a {
width: 180px;
height: 200px;
background-color: blue;
color: pink;
/* 把行内元素转为块内元素 */
display: block;
}
div {
width: 300px;
height: 200px;
background-color: red;
把块内元素转为行内元素
display: inline;
}
span {
width: 150px;
height: 200px;
background-color: red;
display: inline-block;
}
页面：
你好 是的
行内元素转化为行内块元素
