CSS入门教程——HTML选择器

Posted 老梁写代码

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS入门教程——HTML选择器相关的知识,希望对你有一定的参考价值。

html 有标签(tags),而 CSS 有选择器(selectors)。

选择器是样式的名字,只能定义在在内部和外部样式表(style sheets)中。

CSS 入门篇的专栏中,我们只会用到 HTML 选择器。

所谓 HTML 选择器等同于 HTML 标签,它会作用于特定类型的标签。

每个选择器都有属性(properties),位于一个大括号内,属性的命名非常直观,比如 colorfont-weight 或者 background-color

每个属性都有一个值(value),两者用冒号隔开,不同属性用分号分割。

body 
    font-size: 14px;
    color: navy;

以上代码定义了一个 HTML 选择器——body,它含有两个属性 font-sizecolor,值分别是 14pxnavy。当它作用于 HTML 文档时, <body> 标签间的文本(也就是整个窗口的内容)将是14像素大小,海军色。

长度与百分比

除了属性特有单位,CSS 还提供了很多通用单位,比如:

  • px(用法:font-size: 12px)像素单位
  • em(用法:font-size: 2em)字体大小单位。例如,2em 表示当前字体大小的两倍。
  • pt(用法:font-size: 12pt)表示点(point),是一个常用于印刷媒介的物理单位。
  • %(用法:width: 18%)百分比。

其它单位还有 pc(活字,picas)、cm(厘米,centimeters)、mm(毫米,millimeters)和 in(英寸,inches),但并不常用。

当值为 0 时,不需要指明单位。例如 border: 0 ,表示没有边框。

以上是关于CSS入门教程——HTML选择器的主要内容,如果未能解决你的问题,请参考以下文章

CSS学习之一——Css基础入门

pyspider 爬虫教程:HTML 和 CSS 选择器

pyspider 爬虫教程:HTML 和 CSS 选择器

黑马程序员前端专栏css入门总结

CSS入门(css简介与样式汇总CSS的使用方式CSS样式表的特征CSS基础选择器和复杂选择器边框阴影)

黑马程序员前端-CSS的复合选择器