文章目录
21.嵌套列表
- 列表之间可以互相嵌套,形成多层级列表。
- 同理定义列表也可以嵌套
22.表格标签
<table>:表格的最外层容器
<tr>:定义表格行
<th>:定义表头
<td>:定义表格单元
<caption>:定义表格标题
table、tr、td、caption等
注:之间是有嵌套关系的,要符合嵌套规范
23.表格属性
border:表格边框
cellpadding:单元格内的空间
cellspacing:单元格之间的空间
rowspan:合并行
colspan:合并列
align:左右对齐方式
valign:上下对齐方式
24.表单标签
<form>:表单最外层容器
<input>:标签用于搜集用户信息,根据不同的type属性值,展示不同的控件,如输入框、密码框、复选框等。
form,input…
<textarae>:多行文本框
<select>、<option>:下拉菜单
<label>辅助标签
常见属性:checked、disabled、name、for
25.表单相关标签
<textarea> : 多行文本框
<select >、<option> : 下拉菜单
<label> : 辅助表单
26.表格表单标签
27.div与span
1.div:div全称为division,"分割,分区"的意思,
2.span:用来修饰文字的,div与span都是没有任何默认文字样式的,需要配合
28.CSS基础语法
1.格式:
选择器{属性1 : 值1 ;属性2 : 值2 }
2.单位:
px -> 像素(pixel)、% -> 百分比
外容器 -> 600px 当前容器 50% -> 300px
外容器 -> 400px 当前容器 50% -> 200px
3.基本样式:
width、height、background-color(背景色)
29.内联样式与内部样式
1,内联(行内、行间)样式
在html标签上添加style属性来实现的
注:内部样式的优点,可以复用代码
2,内部样式:style标签
区别:内部样式的代码可以复用、复合w3c的规格标准,进行让结构和样式分开处理。
30.外部样式及两种写法
外部样式
引入一个单独的CSS文件,name,css
通过link标签引入外部资源,rel属性指定资源和页面的关系,herf属性资源的地址。
31.CSS中的颜色表示法
1.单词表示法 : red、blue、green、yellow······
2.十六进制表示法:
0 1 2 3 4 5 6 7 8 9
0 1
0 1 2 3 4 5 6 7 8 9 a b c d e f
3.rgb三原色表示法: rgb(255,255,255);
取值范围: 0 ~ 255
32.背景样式
background-color:背景颜色
background-image:背景图片
url(背景地址)
默认:会水平垂直都铺满背景图
background-repeat:背景图片的平铺方式
repeat-x
repeat-y
repeat(x,y轴都平铺)
no-repeat
background-position:背景图片的位置
x y:number(px、%)|单词
x : left、center、right
y : top、center、bottom
background-attachment:背景图随滚动条的移动方式
scrol:默认值 (背景位置是按照当前元素进行偏移的)
fixed:固定不动(背景位置按照浏览器进行偏移)
33.CSS边框样式
border-style:边框的样式
solid:实线
dashed:虚线
dotted:点线
border-width:边框的大小
px…
border-color:边框的颜色
red #f00 …
注:针对某一条边进行单独设置
颜色:透明颜色 transparent
34.边框实现三角形
1.font-family : 字体类型
英文字体 : Arial,‘Times New Roman’
中文字体 : 微软雅黑,宋体
2.中文字体的英文名称 :
微软雅黑: ‘Microsoft YaHei’(非衬线体)
宋体: SimSun(衬线体)
3.衬线体与非衬线体
==注意点: ==
1.多个字体类型的设置目的
2.引号的添加目的
36.family字体类型
1.font-family : 字体类型
英文字体 : Arial,‘Times New Roman’
中文字体 : 微软雅黑,宋体
2.中文字体的英文名称 :
微软雅黑: ‘Microsoft YaHei’(非衬线体)
宋体: SimSun(衬线体)
3.衬线体与非衬线体
==注意点: ==
1.多个字体类型的设置目的
2.引号的添加目的
37.字体大小粗细样式
font-size:字体大小
默认大小:16px
写法:
number(px)| 单词(small、large…不推荐)
注:字体大小一般是偶数(方便文字对齐)
font-weight:字体粗细
模式:正常(normal)、加粗(bold)
写法:单词(normal、bold)| number(100、200…900;100 ~ 500都是正常,600 ~ 900都是加粗)
font-style:字体样式
模式:正常(normal)、斜体(italic)
写法:单词(normal、italic)注:oblique也是斜体,使用较少
区别:1.italic 只有带有倾斜字体的才可以设置
2.oblique 没有倾斜属性的字体也可以设置倾斜
color:字体颜色
38.文本修饰与文本大小写
1.rext-decoration : 文本装饰
下划线(underline)、删除线(line-through)、上划线(overline)、不添加任何装饰(none)
取值
注: 添加多个文本修饰 : line-through under-line overline
2.text-transform : 文本大小写(针对英文)
小写 : lowercase
大写 : uppercase
只针对首字母大写:capitalize
39.文本缩进与文本对齐
1.text-indent : 文本缩进
首行缩进
em单位: 相对单位 ,1em永远跟字体大小相同
2.text-align : 文本对齐方式
对齐方式 : left、right、 center、justify (两端点对齐)
40.文本的行高
line-height:定义行高
定义:一行文字的高度,上边距和下边距的等价关系
默认:不固定,根据当前字体大小不断变化
取值:number(px)| scale(比例值,跟文字大小成比例)