1、HTML&Css简介,学习路径
课件简介章节
2、HTML常用标签
2-1:开发工具(Hbuilder,vsCode等),个人习惯使用Hbuilder
2-2:HTML基本结构
2-3:常用标签(标题标签,段落标签,换行标签,水平线标签,加粗,斜体,)
2-4:图像标签(<img />)
2-5:相对路径和绝对路径
相对路径:相对于当前资源所在位置的路径
3、列表
3-1:无序列表
3-2:有序列表
3-3:自定义列表
4、CSS的基本语法:
4-1:基本语法结构:要使样式生效,需要放在<style>标签内部,方可生效
4-2:CSS选择器
4-2-1:标签选择器:
4-2-2:类选择器:
4-2-3:ID选择器:
4-2-4:后代选择器:(外层标签写前面,内层标签写里边,中间用空格分开,故:呢层标签为外层的后代)
交集选择器:由两个选择器直接连接构成,选中二者各自元素范围的交集,第一个必须是标签选择器,第 二个必须是类选择器或者ID选择器,选择器之间不能有空格,必须连续书写
并集选择器:多个选择器通过逗号连接而成
5、HTML中引入CSS样式
5-1:行内样式: 使用style属性引入CSS样式
5-2:内部样式表:CSS代码写在<head>的<style>标签中
优点:方便在同页面中修改样式
缺点:不利于在多页面间共享复用代码及维护,对内容与样式的分离也不够彻底
5-3:外部样式表:CSS代码保存在扩展名为.css的样式表中
5-3-1:链入式:
5-3-2:导入式:
两者的区别在哪儿:使用链接方式时,会在装载页面主体部分之前装载css文件,这样显示出来的网页从一开始 就是带有样式,导入式,会在整个页面装载完成后再装载css文件,对于有的浏览器来说,在 一些情况下,如果网页文件的体积比较大,则会出现先显示无样式页面,闪一下之后再出现 设置样式后的效果。
5-4:CSS继承
子标签可以继承父标签的样式风格,子标签的样式不会影响父标签的样式风格
5-5:CSS的优先级
内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中)。
6、字体样式、文本样式、伪类
font简写顺序,字体属性的顺序:字体风格→字体粗细→字体大小→字体类型
其中,字体大小和字体类型必须要写,其他两个可以不写省略
文本样式:
网友评论