web前端开发基础3.0

前面的《web前端开发基础2.n》文章中介绍的都是常用的HTML标签和属性,从这一篇开始需要进入第二个前端开发的组成部分——CSS。

CSS 知多少?

CSS(Cascading Style Sheets)是层叠样式表的意思,定义了内容的表现形式。如上一篇所说,在第一次“浏览器战争”中,Netscape 和 Internet Explorer 不断将新的 HTML 标签和属性加入 HTML 规范中,使得创建清晰且兼容的 web 变得越来越困难,这时 W3C 站出来在 HTML 4.0 之外创造了样式,所有的主流浏览器都要支持这样式表,CSS 诞生。

CSS 与 CSS 3

CSS 语法由三部分构成:选择器、属性和值。CSS 3 只是在 CSS 的基础上新增了一些样式设置,它也完全向后兼容,也就是说,CSS 中有效的编码在 CSS 3 中同样有效。但也因为这些新增属性,CSS 3 能更好的实现动画。

CSS 基本语法

CSS由三个部分组成:选择器(Selector)、属性(properties)和属性的值(value)。下面这行代码将 p 元素内的文字设置为字体大小为12px,颜色为红色且居中显示的段落:

规范要求:

1. 不同属性之间必须加半角的封号;,最后一个属性也不例外。

2. 若属性值为两个及以上的单词,则需要给值加引号,如:

3. 每行最好只写一个属性,这样可以增加样式的可读性,维护起来也更方便。如:

4. 保持样式的一致性,上一行在什么地方设置了空格,下一行也记得加上;如果字体首字母大写了那就保持这种格式。

5. 属性值和它的单位之间不要加空格,这纯粹是一种画蛇添足的做法,这样的代码在像Mozilla/Firefox 之类的浏览器中无法正常工作。

CSS 高级语法

1. CSS 可以多个元素公用一个属性:

2. 继承属性——子元素从父元素继承属性。如下代码,其结果就是 之间所有内容,包括段落、列表、表格等文字都用“PingFang SC”字体呈现:

3. 打破继承——就算定义了 body 中的元素全部为“PingFang SC”字体,你也可以再使用一次样式对其中的某些元素重新定义字体:

CSS 三种引入方式

将 CSS 样式表引入 HTML 元素的三种方法:

内联式 CSS:将样式写在标签里。也就是我们之前在 HTML 中将 style 属性放在标签中的方式,如下图所示(这行代码将 p 元素内文字定义为蓝色)。因为不需要跳转到其他位置定义,所以比较快捷,但不便于维护,适合于不遵循统一样式的个别元素。

内部式CSS:在 html 文件的标签中间插入成对的标签,定义的是该元素统一的样式。

外链式 CSS:新建一个 css文件,将样式代码写在该文件中。这是一种最理想的引入方式,只要在一个文件修改就能改变网页内元素的样式。在 html 文件中用外部链接的方式引入该 css 文件,方法是在 标签中插入一个

单标签。

总而言之,三种引入方法中,外链式 CSS作用范围最广泛,内联式 CSS 作用范围最小,实际操作中应该酌情使用。小范围 CSS定义的属性可以改变大范围 CSS 中定义的属性,也就是说,在外链 CSS 定义的样式可以被内部式和内联式中的样式修改,内部式 CSS 中的样式可以被内联式 CSS 中的样式修改。

结语

CSS 和 HTML 的结合可以说对于设计而言非常重要,无论开发还是设计师都应该对此有清楚的了解。下一篇介绍 CSS 选择器的类型。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180604G0ND3R00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码关注腾讯云开发者

领取腾讯云代金券