CSS入门 | 青训营笔记

26 阅读4分钟

这是我参与「第五届青训营 」笔记创作活动的第1天。

在上一节,我们学习了HTML基础,这节课我们将开始学习CSS中的基本概念。

本节重点:

  • CSS选择器有哪些,他们的作用是什么
  • CSS选择器的组合使用
  • CSS中常见的字体相关属性

CSS引入方法

1、外链

通过link标签引入外部CSS文件:

<link rel="stylesheet" href="/assets/style.css">

2、嵌入

<style>
    li { margin: 0; list-style: none;}
    p { margin: 1em 0;}
</style>

3、内联

<p style="margin: 1em 0">hello</p>

CSS选择器

通配选择器 *

选择所有元素

属性选择器

使用属性选择器,我们可以选中拥有某个属性的元素,使用时通过[]包裹起相应的属性,例如:

属性选择器.png

如果我们想选中属性值为某个具体值的元素,可以使用”=“,例如:

属性选择器2.png

除了”=“号进行严格匹配,还支持模糊匹配,我们可以用”^=“匹配开头,用”$=“匹配结尾,例如:

属性选择器3.png

伪类选择器

伪类选择器不基于标签和属性定位元素。伪类主要分为状态性伪类和结构性伪类。

状态性伪类:只有处于某种状态才会被选中。常见的状态性伪类如下:

  • link:匹配未曾访问的链接
  • visited:用户访问后
  • hover:鼠标悬浮在元素上时
  • active:用户激活后
  • focus:有焦点时

结构性伪类:根据dom节点在dom树中的位置进行选择。例如:

  • first-child
  • last-child

选择器的组合使用

不同选择器可以一起使用,中间没有空格隔开时,表示一个元素需要同时满足几个选择器的要求才能被选中,例如:

//只有又是input标签,同时类名为error的元素才会被选中
input.error {
    width: 20px;
}

各种组合方式总结:

CSS选择器组合总结.png

注意:

>选中的是直接子元素,不包括孙元素,曾孙元素;

+选中的是紧跟在后面的一个元素;

颜色

RGB

写法:rgb(143, 172, 135),另一种表示方式是用#十六进制表示,例如#8fac87

HSL

写法:hsl(18, 91%, 84%)。它由三部分组成:

HSL.png

hsl相比rgb的优点是可以更直观的看出颜色的饱和度和亮度。

alpha

alpha表示透明度,它的取值范围是0~1。当值为0时表示完全透明,为1时完全不透明。

使用方法是把作为第四个值它加到RGB、HSL模型中,使用函数rgba(),hsla(),也可以写成十六进制,例如:

alpha.png

字体

字体族font-family

font-family的值可以有多个用逗号隔开,这样做的目的是提高兼容性,例如写了两种不同的字体值,当浏览器不支持第一种字体时,会自动的使用第二种字体,以此类推。

此外,font-family的值最后可以指定通用字体族,表示某一类风格的字体。建议写代码时始终加上,如果前面所有字体都不支持,至少可以保证最终的字体是同一类别。

通用字体族.png

除了使用系统自带的字体,我们还可以使用Web Fonts引入自定义字体,通过@font-face关键字进行引入,例如:

Web Fonts.png

其中src指定了字体文件所在的地址。

字体大小font-size

font-size的值有几种不同的表示方法,如下:

字体大小.png

字体风格font-style

常用的值有italic,意大利斜体

字体风格.png

字体粗细font-weight

常用取值:bold加粗

行高line-height

表示两行文字基准线之间的距离

line-height.png

当line-height的值不加px,表示的是字体大小的倍数,一般建议用1.6,例如:

line-height: 1.6;

text-align文字对齐方式

可以设置文字的对齐方式。

letter-spacing字母间距

设置字母的间距。

word-spacing单词间距

设置单词的间距。

text-indent首行缩进

可以实现首行缩进。

white-space处理空白

white-space可以设置如何处理元素的空白。

不同的取值效果如下:

white-space.png

(图片来源:www.w3school.com.cn/cssref/pr_t…

当想保留多个空格时,我们可以设置属性值为pre。

本节小结

这节课我们先是学习CSS的引入方式,接着学习CSS规则的匹配方式----各种CSS选择器的应用,然后简单地了解CSS中颜色的表示方法,最后我们着重学习了跟字体有关的CSS属性。下节课我们将进一步深入地学习CSS的其他概念以及应用。