后端工程师学前端(二): CSS基础知识(规则与选择器)
这一篇文章主要出自阅读《CSS权威指南》之后的笔记
基础介绍
CSS的全称是Cascading Style Sheet,即层叠样式表。层叠就说明样式可以组合起来使用。CSS说白了,其实就是一种DSL。 浏览器提供了各种各样调整样式的规则,而CSS就是把这些规则集合在一起来进行描述。
元素是HTML中的基本结构,例如p,div,span等等。元素按是否直接显示内容可以分为两种:
- 置换元素:浏览器展示的不是元素的内容,而是元素所指向的内容,例如
<img src="xxx.png" >
,浏览器并不展示<img src="xxx.png" >
这样的文字,而是展示src="xxx.png"
所指向的图片 - 非置换元素:浏览器直接展示元素的内容,例如
<p>hello world</p>
那么浏览器会展示hello world
如果按显示的方式,可以这样分为两种:
- 块级元素:块级元素默认生成一个填满父级元素内容区域的框,旁边不能有其他元素。也就是说,块级元素在前后都会断行。例如
<p>
,<div>
- 行内元素:行内元素在一行文本内生成元素框,不打断所在的行。例如
<strong>
,<em>
虽然元素有默认的值来指示自己是块级元素还是行内元素,但是我们可以通过设置 display
这个值来强制让他们表现为块级元素/行内元素。display
默认取值 inline
,可以为 block
, inline
和 run-in
。
HTML要求,行内元素可以放在块级元素中,反之则不行,但是CSS中没有这种要求。
CSS与HTML的结合
我们如何把CSS应用到HTML上呢?常见的有三种方式:
- 在HTML元素中加一个属性:
style="xxx"
来书写CSS,例如<button style="border-radius:9999px">this is</button>
在HTML中使用
<style>
标签来书写CSS,例如:<!DOCTYPE html> <html> <style> button { border-radius: 99999px; } </style> <body> <button>this is</button> </body> </html>
在HTML中使用
<link>
来引用CSS,例如<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >
此外,CSS中也可以使用 @import
指令导入其它CSS,例如 @import url(styles.css)
。
CSS规则的结构
举个例子:
h1 {
color: red;
background: yellow;
}
其中的 h1 就叫选择符,括号和里面的内容就是声明块,而其中的每一个分号隔开来的,就是一个声明,例如 color: red;
,而一个声明中
包含一个属性和一个值,例如上述例子中,color
就是属性,red
就是值。
CSS 的属性中,有一个概念是厂商前缀,例如:
-epub-
:ePub格式-moz-
:基于Mozilla的浏览器-ms-
:微软的浏览器-o-
:基于Opera的浏览器-webkit-
:基于WebKit的浏览器
媒体查询和特性查询
媒体查询是CSS中用于查询一些浏览器信息用的,例如屏幕宽度等,使用 @media
来进行查询;特性查询是CSS查询是否支持某特性,
使用 @supports
来进行查询。
CSS 选择符
CSS有一套强大的选择符,用于匹配HTML中的元素。以下是常见的几种:
元素选择符:元素选择符直接使用HTML元素进行选择,例如:
h2 { color: red; } p { color: yellow; }
群组选择符,群组选择符就是一次选中多个元素,他们之间使用逗号分隔。例如:
h2, p { color: yellow; }
通用选择符:
*
是通用选择符,他会选中所有元素类选择符:类选择符的形式是
.class
,以点开头,后面接类名ID选择符:ID选择符的形式是
#id
,以#
开头,后面接id属性选择符:选择具有某个属性的元素,例如:
h1[class] {color: silver;}
就会选中所有有class
这个属性的元素。后代选择符:例如
h1 em {color: gray;}
就会选中h1
中的每个em
元素。伪类选择符:这个用于选择一些非元素的属性,例如:
a:link:hover {color: red;}
就会使得当鼠标放在上面的时候,颜色变红
总结:
这一篇中看了一些CSS的基本概念,例如什么是CSS,如何使用CSS,CSS选择符。这是使用CSS的前置内容。
更多文章
- socks5 协议详解
- zerotier简明教程
- 搞定面试中的系统设计题
- frp 源码阅读与分析(一):流程和概念
- 用peewee代替SQLAlchemy
- Golang(Go语言)中实现典型的fork调用
- DNSCrypt简明教程
- 一个Gunicorn worker数量引发的血案
- Golang validator使用教程
- Docker组件介绍(一):runc和containerd
- Docker组件介绍(二):shim, docker-init和docker-proxy
- 使用Go语言实现一个异步任务框架
- 协程(coroutine)简介 - 什么是协程?
- SQLAlchemy简明教程
- Go Module 简明教程