理解CSS | 青训营笔记

79 阅读3分钟

CSS语法

css由两个主要的部分构成:选择器,以及一条或多条声明:

image.png

CSS声明总是以分号 ; 结束,声明总以大括号 {} 括起来: 实例:

<style>
p
{
	color:red;
	text-align:center;
} 
</style>

选择器

ID选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。 以下的样式规则应用于元素属性 id="para1":

#para1
{
	text-align:center;
	color:red;
} 

class选择器

class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。 class 选择器在 HTML 中以 class 属性表示, 在 CSS 中,类选择器以一个点 . 号显示:

.center {text-align:center;}

指定特定的 HTML 元素使用 class:

p.center {text-align:center;}

多个class选择器可以用空格分开:

.center { text-align:center; } 
.color { color:#ff0000; }

CSS插入方式

  • 外部样式表
  • 内部样式表
  • 内联样式
  • 多重样式

多重样式的优先级

优先级是浏览器是通过判断哪些属性值与元素最相关以决定并应用到该元素上的。 优先级仅由选择器组成的匹配规则决定的。 优先级就是分配给指定的CSS声明的一个权重,它由匹配的选择器中的每一种选择器类型的数值决定。

优先级顺序

下列是一份优先级逐级增加的选择器列表:

  • 通用选择器
  • 元素(类型)选择器
  • 类选择器
  • 属性选择器
  • 伪类
  • ID 选择器
  • 内联样式

!important 规则例外

当!important 规则被应用在一个样式声明中时,该样式声明会覆盖CSS中任何其他的声明, 无论它处在声明列表中的哪里. 尽管如此, !important规则还是与优先级毫无关系.使用 !important 不是一个好习惯,因为它改变了你样式表本来的级联规则,从而使其难以调试。

一些经验法则:

  • Always 要优化考虑使用样式规则的优先级来解决问题而不是 !important
  • Only 只在需要覆盖全站或外部 css(例如引用的 ExtJs 或者 YUI )的特定页面中使用 !important
  • Never 永远不要在全站范围的 css 上使用 !important
  • Never 永远不要在你的插件中使用 !importan

学习CSS的感想

  • 作为一种用于网页设计的语言,CSS可以帮助我们实现对网页布局、字体、颜色、背景等各种样式的控制,从而让网页变得更加美观、易读、易用。
  • 在学习CSS的过程中,我深刻体会到了它的强大和灵活性,同时也发现了一些挑战和难点。
  • 需要不断地练习和实践才能掌握它的技巧和应用,但一旦掌握了,就可以创造出令人惊叹的网页设计效果。学习CSS是一项有趣而有挑战的过程,我会继续努力掌握它。