1.嵌套标签
1.列表之间可以互相形成多层级列表。
2.练习
2,表格标签
1.<table>
:表格的最外层容器
2.< tr>:定义表格行
3.< th>:定义表头
4.:定义表格单元
5.< captio>:定义表格标题
*注意:之前是有嵌套关系的,要符合嵌套规范。
3,表格的属性
1.border:表格边框
2.cellpadding:单元格之间的空间
3.cellspacing:单元格之间的空间
4rowspan:合并行
5.colspan:合并列
6.align:左右对齐方式
7.valign:上下对齐方式
4,表单标签
< form>:表单的最外层容器
< imput>:标签用于搜索用户信息,根据不同的type属性值,展示不同的控件,如输入框、密码框、复选框、等。
5.表单相关标签
< textarea>:多文本框
checked, disabled,name,
6. 表格表单组合实例
目标
7.< div>与< span>
div:做一个区域划分的块
span:对文字进行修饰的内联
8.css基础语法
格式:选择器{属性一:值一;属性二:值二}
单位;px;像素(pixel)、%(百分比当前容器的百分之多少*****)
基本样式:width,height,background-color
css快捷键:shift+ait+a
注释快捷键:ctrl+/
9.内联样式和内部样式
1.内联样式:style属性(在body当中)
2.内部样式;style标签(在head当中)
区别:内部样式的代码可以复用,符合w3c的标准规范
10.外部样式以及两种学法
1:< ling>标签引入外部资源,< rel>属性指的是资源跟页面的关系,
< href>:属性资源的地址。
2:通过@import方式引入外部样式。(一般不使用)在head上
练习:
10css颜色表示法
1.单词表示法
2.十六进制表示法0123456789abcdef.-----------#000000
3.rgb三原色表示法:红-绿-蓝-格式:rgb(255,255,255);
取值范围:(0~255)
4:提取颜色: ps(复制)
11,背景样式
1.background-color:背景颜色
2.background-image:背景图片(url)背景地址
3.background-repeat:背景图片的平铺方式
repeat-x
repeat-x
repeat(默认值)
no-repeat(都不平铺)
4.background-position:背景颜色的位置
:x --y:number
单词x;left,center,right
y:top,center,bottom
5.background-attachment:背景图随滚动条的移动方式
scroll:默认值(背景位置是按照当前元素进行偏移的)
fixed:固定值(背景位置是按照浏览器进行偏移的)
附加;添加滚动条!!!
注意:当设置成固定式应改变图片比例
例子!!!!!!!!
12.背景实现视觉差效果
注释:fixed效果
以及可以在body中可以添加表格之类
13.边框样式
1.border-style边框的样式
solid:实线
dashed:虚线
dotted:点线
2.border-width:边框的大小
px…
3.border-color:边框的颜色(只针对某一条边进行单独设置)
red——#0000…
边框也可以针对某一条边进行单独设置:border-left-style(中间是方向)
14.边框实现三角形
1.颜色:透明颜色(transparent)
2.在body也可以调颜色
15.css文字样式
font-family:文字类型
中文:(也可以用英文)
英文;
衬线体(有棱角)和非衬线体
1.多个字体类型设置的目的
2.引号的添加的目的
16.字体大小粗细样式
1**.font-size(文字大小**)默认大小16px
2.写法;number(px)
3.font-weight:字体粗(bold)细
写法:也可以加数值(100–900)
4.font-style:字体样式
1.模式:正常(normal) -----斜体(italic)(oblique)范围大
2.写法:单词
17 文本修饰和文本大小
(1)text-decoration:文本修饰
下划线under-line
删除线-line-through
上划线over-line
不添加任何修饰;none
注意;添加多个文本修饰要加空格
(2)text-transform:文本大小(针对英文)
小写;lowercase
大写**;uppercase**
只让首字母大写;capitalize
18css段落样式
1.taxt-indent:首行缩进单位
em单位:相对单位,lem永远和字体大小一样
2.twxt-alihn:文本对齐方式
对齐方式:left——right——center——justify(两端点对齐)
19.文本的行高
line-height:定义行高(一行文字的高度,上边距和下边距的等价关系
默认行高不是固定值,根据字体不断的变化
取值;1.number(px)——2.sale(比例值—跟文字大小成比例)
20.文本间距和英文折行
letter-spacing:定义子=字间距
word-spacing:英文间距
强制折行;(针对英文)
1.word-break:break-all(非常强烈)
2.word-wrap:break-word(比较强烈)会产生空白区域
21.文本与段落实现个人简介
练习
参考
22.css的复合样式
1.CSS 复合样式:
复合的写法,是通过空格的方式实现的。复合写法有的是不需要关心顺序,例如 background 、 border ;有的是需要关心顺序,例如 font .
1.background: red url () repeat 00;2. border :1px red solid ;
3。 font :
注:最少要有两个值 size family
weight style size family
23.id选择器
,CSS 选择器
id =" elem "
注:
- ID 是唯一值,在一个页面中只能出现一次,出现多次是不符合规范的。2.命名的规范,由字母、下划线、中划线、字母(并且第一个不能是数字)
3.驼峰写法: searchButton (小驼峰) SearchButton (大驼峰)
短线写法: search - small - button
下划线写法: search -small_ button
24.class选择器及注意事项
css:.elem{}
html:class=“elem”
注意事项;1.class选择器是可以复用的。
2.可以添加多个class样式。
3.多个样式的时候,样式的优先级根据css决定,而不是class属性中的顺序.
4.标签+类的写法