美文网首页
HTML&CSS(Day01上午)

HTML&CSS(Day01上午)

作者: 宝宝跟你们拼啦 | 来源:发表于2019-09-26 21:00 被阅读0次

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简写顺序,字体属性的顺序:字体风格→字体粗细→字体大小→字体类型

其中,字体大小和字体类型必须要写,其他两个可以不写省略

文本样式:

相关文章

  • HTML&CSS(Day01上午)

    1、HTML&Css简介,学习路径 课件简介章节 2、HTML常用标签 2-1:开发工具(Hbuilder,vsC...

  • 总目录

    HTML&CSS JavaScript jQuery 趣味数学

  • html基础

    ------------- 《HTML&CSS设计与构建网站》 ----------------- 1. 页面结...

  • 彩票小项目-part1

    #2016.3.4 彩票系统的框架与界面分析day01 上午 #搭建整体的框架 1.根据功能创建文件夹 2.设置启...

  • 100天iOS数据结构与算法实战 Day01

    100天iOS数据结构与算法实战 Day01 100天iOS数据结构与算法实战 Day01

  • html&css

    网元的四大部分:header,nav,main,footerarticle-> sectionem 斜体stron...

  • HTML&CSS

    首先声明,这些文章是本人对于新知识以及遗忘知识的补漏,体系不完整是肯定的。如若有错,还请指正,感谢!! 一、标签H...

  • HTML&CSS

    1. comment: HTML: CSS: /*comment*/ 2. e...

  • HTML&CSS

    自学网站推荐------菜鸟教程 注:Java 文件是需要先编译,再由 java 虚拟机跑起来。但 HTML 文件...

  • HTML&CSS

    # 课程:HTML & CSS bilibili公益课程,来自渡一教育 ## 讲课风格 1. 风格 2. 形式 3...

网友评论

      本文标题:HTML&CSS(Day01上午)

      本文链接:https://www.haomeiwen.com/subject/lnynectx.html