第二十一集
嵌套列表
列表之间(无序列表:ul列表的最外层容器,li列表项 ;有序列表:ol,li ;定义列表:dl定义列表,dt定义专业术语或名词,dd对名词进行解释和描述)可以相互嵌套形成多层级列表
第二十二集
表格标签
table 表格的最外层容器
tr 定义表格行
th 定义表头
td 定义表格单元
caption 定义表格标题
它们之间有嵌套关系,要符合嵌套规范
语义化标签:tHead tBody tFoot(一个table中,tHead和tBody只能出现一次)
第二十三集
表格属性
align的值有left,center,right
valign的值有top,middle,bottom
第二十四集
表单input标签
input是单标签
form 表单的最外层容器
input 便签用于搜集用户信息,跟据不同的typle属性值,展示不同的控件,如输入框,密码框,复选框等
第二十五集
表单相关标签
通过滑动鼠标多选, 按住ctrl键多选,ctrl+鼠标左键也可多选
第二十六集
表单表格组合实例
表格表单之间可以相互组合形成数据展示效果
表格有嵌套规范,而表单没有,所以先写表单form
第二十七集
divs与pan
第二十八集
CSS语法格式
第二十九集
内联样式与内部样式
内联样式:
内部样式:
内部样式的代码可以复用,符合W3C的标准,尽量让结构和样式分开处理
第三十集
外部样式及两种写法
引入一个单独的CSS文件为name.css
通过link标签引入外部资源,rel属性指定资源跟页面关系,herf属性资源的地址。通过@importd的方式引入外部样式9(问题多,不建议使用)
第三十一集
CSS颜色表示法
单词表示法
十六进制表示法
rgb三元色表示法(取值范围0-255)
用FeHelper,ps取色
第三十二集
背景样式
第三十三集
背景实现视觉差效果
第三十四集
边框样式
# 第三十五集
边框实现三角形
第三十六集
family字体类型
font-family:字体类型
英文字体;Arial,‘Times New Roman’
中文字体:微软雅黑,宋体
中文字体的英文名称
微软雅黑:‘microsoft YaHei’
宋体:SimSun
衬线体与非衬线体
设置多字体方式,引号的问题
第三十七集
字体大小与粗细样式
front-size:字体大小
默认:16px
写法:number(px)单词(small large…不推荐)
front-weight:字体粗细
模式:正常(normal)斜体(italic)
写法:单词(normal、italic)
注;oblique也是表示斜体,用的比较少,一般了解即可
区别:1、italic带有倾斜属性的字体的才可以设置倾斜操作
2、oblique没有倾斜属性的字体也可以设置倾斜操作
第三十八集
文本修饰与文本大小写
text-decoration:文本修饰
下划线:underline
删除线:line-through
上划线:overline
不添加任何装饰:none
注:添加多个文本修饰:line-through underline overline
text-transform:文本大小写(针对英文段落)
小写:lowercase
大写:uppercase
只针对首字母大小写:capitalize
第三十九集
文本缩进与文本对齐
text-indent:文本缩进
首行缩进
em单位:相对单位,1em永远都是跟字体大小相同
text-align:文本对齐方式
对齐方式:left、right、center、justify(两端点对齐)
第四十集
文本的行高
line-height:定义行高
什么是行高,一行文字的高度,上边距和下边距的等价关系。
默认行高:不是固定值,而是变化的。根据当前的字体不断变化。
取值:1.number(px) scale(比例值,跟文字大小成比例的)
第四十一集
文本间距与英文拆行
letter-spacing:子之间的间距
word-spacing:词之间的间距(针对英文段落)
英文和数字不自动折行的问题;
1.word-break:break-all;(非常强烈的折行)
2.word-wrap:break-word;(不是非常的强烈的折行,会产生一些空白区域)
第四十二集
文本与段落实现个人简介
第四十三集
复合样式
一个CSS属性只控制一种样式,叫做单一样式。
一个CSS属性控制多种样式,叫做复合样式。
复合样式
background
border
font
注:尽量不要混写,如果非要混写,那么一定要先写复合样式再写单一样式。
复合样式的写法,是通过空格的方式实现的。复合写法有的是不需要关心顺序,例如background、border;有的是需要关心顺序font。
1.background:red url()repeat00;
2.border:1px red solid;
3.font:
注:
最少要有两个值size family
weight style size family
style weight size family
weight style size/line-height family
注:如果非要混合去写的话,那么要先写复合样式,再写单一样式,这样样式才不会被覆盖掉。
复合的写法,是通过空格的方式实现的。复合写法有的是不需要关心顺序的,例如background,border;有的是需要关心顺序的,例如font
第四十四集
ID选择器及注意事项
1.ID是唯一的值,在一个页面中只能出现一次,出现多次是不符合规范的。
2.命名的规范,由字母、下划线、中划线、字母(并且第一个不能是数字)
3.驼峰的写法:searchButton(小驼峰)SearchButton(大驼峰)searchSmallButton
短线写法:search-small-button
下划线写法:search_small_button
第四十五集
CLASS选择器及注意事项
CSS:elem{}
html:class=“elem”
class选择器可复用,
可添加多个class样式,
多个标签的时候,样式的优先级根据CSS决定,而不是class属性中的顺序,
标签+类的写法