2.1 CSS——定义方式、选择器、颜色

定义方式

行内样式表

1
<img src="/static/images/mountain.jpg" alt="mountain" style="width: 300px;">

内部样式表

在<head>的标签里添加 <style>，通过类来选择

1
2
3
4
5
<style type="text/css">
	img {
		# 具体的样式
	}
</style>

通过class来选择

1
2
3
.blue-p {
	#具体的样式
}
1
<p class="blue-p">1</p>   #用.blue-p就可以选中这个class

同一个标签可以定义多个class,需要用空格隔开

image-20240714125359470image-20240714125413249

外部样式表

head里添加

1
<link rel="stylesheet" href="/static/css/style.css" type="text/css">
image-20240714125913985

在css文件夹下新建一个style.css文件

文件中直接添加样式即可

选择器

标签选择器

image-20240714131140171

id选择器

标签中的属性id="123123"一般来说是唯一的

==#加id==

image-20240714131236838

类选择器

属性为class="jdska sdjfkas"多个class用空格隔开

==.加类==

image-20240714131549482

后面的选择器可以跳过用的比较少，要用的时候再学

伪类选择器

image-20240714132130829

鼠标悬停会变大

  • link 点击前
  • visited 点击后
  • hover 悬停
  • active 鼠标按下状态
  • focus input类型，光标出来后

实际上是一种状态,下面这个就不会执行

image-20240714133332734image-20240714133408295image-20240714133342729

复合选择器

逗号隔开就可以了

image-20240714134818671

div同时具有big属性

image-20240714135103904

同时具有big和real的才会应用样式

image-20240714135151376

仅跟在div后面的p 才应用样式

image-20240714135643292

父节点

image-20240714142523979

通配符选择器

image-20240714142742938

按照属性选择

image-20240714143050387

伪元素选择器

image-20240714143545483image-20240714143600682

image-20240714143738769image-20240714143748515

样式渲染优先级

不重要，没啥用

行内 > id > class > 标签

颜色

预定义颜色值

black，white等等

16进制数表示

#FFFFFF

rgb表示

rgb(173,216,230)

取色方式

snipaste