【无标题】

第二十一集

嵌套列表

列表之间(无序列表: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属性中的顺序,
标签+类的写法在这里插入图片描述

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值