这是我参与「第五届青训营 」笔记创作活动的第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选择器
通配选择器 *
选择所有元素
属性选择器
使用属性选择器,我们可以选中拥有某个属性的元素,使用时通过[]包裹起相应的属性,例如:
如果我们想选中属性值为某个具体值的元素,可以使用”=“,例如:
除了”=“号进行严格匹配,还支持模糊匹配,我们可以用”^=“匹配开头,用”$=“匹配结尾,例如:
伪类选择器
伪类选择器不基于标签和属性定位元素。伪类主要分为状态性伪类和结构性伪类。
状态性伪类:只有处于某种状态才会被选中。常见的状态性伪类如下:
- link:匹配未曾访问的链接
- visited:用户访问后
- hover:鼠标悬浮在元素上时
- active:用户激活后
- focus:有焦点时
结构性伪类:根据dom节点在dom树中的位置进行选择。例如:
- first-child
- last-child
选择器的组合使用
不同选择器可以一起使用,中间没有空格隔开时,表示一个元素需要同时满足几个选择器的要求才能被选中,例如:
//只有又是input标签,同时类名为error的元素才会被选中
input.error {
width: 20px;
}
各种组合方式总结:
注意:
>选中的是直接子元素,不包括孙元素,曾孙元素;
+选中的是紧跟在后面的一个元素;
颜色
RGB
写法:rgb(143, 172, 135),另一种表示方式是用#十六进制表示,例如#8fac87
HSL
写法:hsl(18, 91%, 84%)。它由三部分组成:
hsl相比rgb的优点是可以更直观的看出颜色的饱和度和亮度。
alpha
alpha表示透明度,它的取值范围是0~1。当值为0时表示完全透明,为1时完全不透明。
使用方法是把作为第四个值它加到RGB、HSL模型中,使用函数rgba(),hsla(),也可以写成十六进制,例如:
字体
字体族font-family
font-family的值可以有多个用逗号隔开,这样做的目的是提高兼容性,例如写了两种不同的字体值,当浏览器不支持第一种字体时,会自动的使用第二种字体,以此类推。
此外,font-family的值最后可以指定通用字体族,表示某一类风格的字体。建议写代码时始终加上,如果前面所有字体都不支持,至少可以保证最终的字体是同一类别。
除了使用系统自带的字体,我们还可以使用Web Fonts引入自定义字体,通过@font-face关键字进行引入,例如:
其中src指定了字体文件所在的地址。
字体大小font-size
font-size的值有几种不同的表示方法,如下:
字体风格font-style
常用的值有italic,意大利斜体
字体粗细font-weight
常用取值:bold加粗
行高line-height
表示两行文字基准线之间的距离
当line-height的值不加px,表示的是字体大小的倍数,一般建议用1.6,例如:
line-height: 1.6;
text-align文字对齐方式
可以设置文字的对齐方式。
letter-spacing字母间距
设置字母的间距。
word-spacing单词间距
设置单词的间距。
text-indent首行缩进
可以实现首行缩进。
white-space处理空白
white-space可以设置如何处理元素的空白。
不同的取值效果如下:
(图片来源:www.w3school.com.cn/cssref/pr_t…)
当想保留多个空格时,我们可以设置属性值为pre。
本节小结
这节课我们先是学习CSS的引入方式,接着学习CSS规则的匹配方式----各种CSS选择器的应用,然后简单地了解CSS中颜色的表示方法,最后我们着重学习了跟字体有关的CSS属性。下节课我们将进一步深入地学习CSS的其他概念以及应用。