JS基础编程课件05_邂逅CSS.pdf

邂逅CSS

王红元coderwhy

目录

content1认识CSS

2编写CSS样式

3CSS注释

4常见的CSS属性

5案例练习

coderwhy认识CSS

◼CSS表示层叠样式表（CascadingStyleSheet，简称：CSS，又称为又称串样式列表、级联样式表、串接样式表、阶层式样式表）

是为网页添加样式的代码。

◼CSS是一种语言吗？(知道即可)

MDN解释：CSS也不是真正的编程语言，甚至不是标记语言。它是一门样式表语言；

维基百科解释：是一种计算机语言，但是不算是一种编程语言；

coderwhyCSS的历史

◼早期的网页都是通过HTML来编写的，但是我们希望HTML页面可以更加丰富:

这个时候就增加了很多具备特殊样式的元素：比如i、strong、del等等；

后来也有不同的浏览器实现各自的样式语言，但是没有统一的规划；

1994年，哈肯·维姆·莱和伯特·波斯合作设计CSS，在1996年的时候发布了CSS1；

直到1997年初，W3C组织才专门成立了CSS的工作组，1998年5月发布了CSS2；

在2006~2009非常流行“DIV+CSS”布局的方式来替代所有的html标签；

从CSS3开始，所有的CSS分成了不同的模块（modules），每一个“modules”都有于CSS2中额外增加的功能，以及向后

兼容。

直到2011年6月7日，CSS3ColorModule终于发布为W3CRecommendation。

◼总结：CSS的出现是为了美化HTML的，并且让结构（HTML）与样式（CSS）分离；

美化方式一：为HTML添加各种各样的样式，比如颜色、字体、大小、下划线等等；

美化方式二：对HTML进行布局，按照某种结构显示（CSS进行布局–浮动、flex、grid）；

coderwhyCSS如何编写呢？

◼CSS这么重要，那么它的语法规则是怎么样的呢？

◼声明（Declaration）一个单独的CSS规则，如color:red;用来指定添加的CSS样式。

属性名（Propertyname）：要添加的css规则的名称；

属性值（Propertyvalue）：要添加的css规则的值；

◼但是有个问题：我们会编写了，要编写到什么位置呢？

coderwhy如何将CSS样式应用到元素上？

◼CSS提供了3种方法，可以将CSS样式应用到元素上：

内联样式（inlinestyle）

内部样式表（internalstylesheet）、文档样式表（documentstylesheet）、内嵌样式表（embedstylesheet）

外部样式表（externalstylesheet）

◼疑问：三种方式，学好哪一个呢？

每一个都很重要，目前开发中不同的场景都会用到

coderwhy内联样式（inlinestyle）

◼内联样式（inlinestyle），也有人翻译成行内样式。

内联样式表存在于HTML元素的style属性之中。

◼CSS样式之间用分号;隔开，建议每条CSS样式后面都加上分号;

◼很多资料不推荐这种写法：

1.在原生的HTML编写过程中确实这种写法是不推荐的

2.在Vue的template中某些动态的样式是会使用内联样式的；

◼所以，内联样式的写法依然需要掌握。

coderwhy内部样式表（internalstylesheet）

◼内部样式表（internalstylesheet）

将CSS放在HTML文件head元素里的style元素之中。

◼在Vue的开发过程中，每个组件也会有一个style元素，和内部