理解CSS｜ 青训营笔记

零距离6161
140 阅读2分钟

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

一.认识CCS

CSS是什么?

Cascading Style Sheets 层叠样式表

CSS可以干什么?

  • 设置字体和颜色
  • 设置位置和大小
  • 添加动画效果

CSS有什么作用呢?

页面外观美化,控制页面的外观样式

二.基本用法

CSS语法

h1{
    color: red;
    font-size: 50px;
}

下面我们来分析一下其含义:

h1:标签选择器

color:属性,表示其颜色

red:属性值,表示其颜色是红色

font-size:属性,表示字体大小

50px:属性值,表示大小为50px(像素)

使用方式

内联样式

<p style="font-size: 10px;">我的第一个段落</p>

行内样式

h1{
    color: red;
    font-size: 50px;
}

外链样式

<link href="css/new_file.css" rel="stylesheet" type="text/css"/>

一般我们推荐外链样式来使用,不推荐内联样式,当我们做大型网站时,内联样式会导致我们的代码看上去比较杂乱

接下来我们看一个示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>示例2</title>
		<style>
			h1{
				color: orange;
				font-family: "隶书";
				text-align: center;
			}
			p{
				color: pink;
				font-size: 20px;
			}
		</style>
	</head>
	<body>
		<h1>CSS示例</h1>
		<p>Cascading Style Sheets 层叠样式表</p>
	</body>
</html>

以上代码通过行内样式h1标签设置了颜色为橙色,字体为隶书,对齐方式为居中,p标签设置了颜色为粉色

CSS工作方式

6f86ca2578b69b14224d94a33cbd3e7.png

以上介绍了CSS如何进行工作

二.选择器

  1. 标签选择器 以标签名作为依据,来修改样式,例如h1,p,div,span等等

示例代码:

h1{
	color: orange;
	font-family: "隶书";
	text-align: center;
}
  1. 类选择器 可自定义名称，以 . 号作为前缀来选中要修改的内容

示例代码:

<h1 class="title">CSS示例</h1>

.title{
	color: orange;
	font-family: "隶书";
	text-align: center;
}

以上代码通过类选择器,选中class名为title的元素修改其颜色,字体和对齐方式

3.ID选择器

可自定义名称，以 # 作为前缀，id属性进行名称匹配

示例代码:

<p id="paragraph">Cascading Style Sheets 层叠样式表</p>

#paragraph:{
	color: pink;
	font-size: 20px;
}

以上代码通过ID选择器,选中ID名为paragraph的元素修改其颜色,字体大小,有一点需要注意:ID的值应该在页面中是唯一的

4.通配符选择器

通配符选择器常用*号表示，是作用范围最广的，可以匹配页面中所有的元素。

示例代码:

<h1 class="title">CSS示例</h1>
<p id="paragraph">Cascading Style Sheets 层叠样式表</p>

*{
	color: orange;
}

以上代码通过通配符选择器,选中页面所有元素修改其颜色

avatar
文章
阅读
粉丝