avatar

CSS01

本质介绍css基础选择器,引入CSS的三种方式

思维导图

CSS 简介

什么是CSS

CSS是层叠样式表,用来美化页面,布局页面

CSS书写位置

css样式要写在style标签中,style标签写在head标签中。

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* 编写CSS代码 */
</style>
</head>
<body></body>
</html>

CSS 格式

1
2
3
4
选择器  {
样式名: 样式值;
样式名: 样式值;
}

选择器

选择器作用

选择标签,然后给标签添加样式。分为基础选择器和复合选择器

基础选择器

标签选择器

根据标签名选择标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* 需求:让p标签中的文字为红色red,字体大小为24PX. li标签中的文字为绿色green,字体大小为46px */

/* 通过标签选择器"p"找到所有的p标签[可以找到3个],然后赋予样式 */
p {
color: red;
font-size: 24px;
}
/* 通过标签选择器"li"找到所有的li标签[可以找到4个],然后赋予样式 */
li {
color: green;
font-size: 46px;
}
</style>
</head>

<body>
<p>1</p>
<p>1</p>
<p>1</p>

<ul>
<li>2</li>
<li>2</li>
<li>2</li>
<li>2</li>
</ul>
</body>
</html>

类选择器

编写步骤

1.通过.定义类名
2.给标签添加class属性调用类

注意:定义类选择器的时候需要加点,调用的时候不需要

入门案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>

<style>
/* 第一步:通过.red 定义一个名为red的类选择器 */
.red {
color: red;
}
</style>
</head>
<body>
<!-- 第二步:给标签添加class属性调用名为red的类选择器 -->
<!-- 注意:定义类选择器的时候需要加点,调用的时候不需要 -->
<div class="red">哈哈</div>
<div>哈哈</div>
</body>
</html>

配置多个类中间使用空格分隔

需求:通过.定义四个类样,名字和功能如下

w100:功能设置宽度100px。

h100:功能设置高度100px。

bg-red:功能设置背景色为红色。

bg-green: 设置背景色为绿色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* 第一步:通过.定义名为w100,h100,bg-red,bg-green的类样式 */
.w100 {
width: 100px;
}
.h100 {
height: 100px;
}
.bg-red {
background-color: red;
}
.bg-green {
background-color: green;
}
</style>
</head>
<body>
<!-- 第二步:给标签添加class属性,在class属性中调用类样式,如果调用多个类样式,中间要用空格分隔 -->
<div class="w100 h100 bg-red"></div>
<div class="w100 h100 bg-green"></div>
</body>
</html>

ID选择器

使用步骤

1.通过#定义样式
2.给标签添加id属性调用样式

注意事项:id的值在页面中是唯一的。定义ID选择器的时候需要加#,调用的时候不需要

入门案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* 第一步:使用#定义名为box的ID选择器 */
#box {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<!-- 第二步:给标签添加id属性,调用ID选择器 -->
<!-- 注意:定义ID选择器的时候需要加#,调用的时候不需要 -->
<div id="box"></div>
</body>
</html>

通配符选择器

给所有的标签设置样式

1
2
*{
}

引入CSS的三种方式

内部样式

在页面内编写style标签,在style标签中编写样式

行内样式

给标签添加style属性,在属性值中编写样式,比如 <div style="width:100px; height:100px">

外部样式

创建一个CSS文件,将样式放入该文件,然后再html页面使用link标签引入CSS文件

演示

创建style.css

1
2
3
4
5
div {
width: 1000px;
height: 1000px;
background-color: hotpink;
}

创建index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>

<!-- 方式2:外部样式 -->
<link rel="stylesheet" href="./style.css" />

<!-- 方式1:内部样式 -->
<style>
div {
background-color: royalblue;
}
</style>
</head>
<body>
<!-- 方式3:行内样式 -->
<ul style="list-style: none">
<li><a href="#">今天吃了几碗面</a></li>
<li><a href="#">今天吃了几碗面</a></li>
<li><a href="#">今天吃了几碗面</a></li>
<li><a href="#">今天吃了几碗面</a></li>
</ul>
</body>
</html>

样式优先级

行内样式 大于 内部样式 大于 外部样式

注意事项

编写代码的时候先引入外部样式,在编写内部样式

样式速查表

CSS 学习套路

  1. 找它,利用选择器,把对应标签选出来;
  2. 摆它:利用布局样式(标准流、浮动、定位等),把盒子摆在需要的位置;
  3. 改它:利用外观样式(字体、文本、背景等),修改盒子内容的显示效果。

基础选择器

基础选择器 作用 特点 使用频率
标签选择器 选中相同标签 统一设置相同标签的样式,没有差异化 较多
类选择器(.) 按需选择标签 根据需求选择 非常多
id 选择器(#) 选中唯一标签 仅针对唯一标签 通常与 JavaScript 联用
通配符选择器(*) 选中所有标签 选择的太多,有部分不需要 有特定的应用场景

字体样式font-*

样式名 快捷写法 说明
font-family 字体 ff 工作中按照团队约定即可,例如font-family:”黑体”,”微软雅黑”; 表示如果不支持黑体则是用微软雅黑
font-size 字体大小 fz 单位通常是 px(像素),字号一定要有单位,例如font-size:12px ;
font-weight 字体粗细 fw 700 加粗 / 400 普通,数字字重不带单位
font-style 字体样式 fs / fsn italic 斜体 / normal 正常,把 em 改成不倾斜
font 缩写 f font-size/line-height font-family,工作中按照团队约定即可

文本样式text -*

样式名 快捷写法 含义 说明
color 文字颜色 c 文字颜色 #f60 , rgba(0~255, 0~255, 0~255, 0~1),rgba(0~255, 0~255, 0~255),red 有四种写法,十六进制,rgba,rgb,英文单词
text-align 文本对其方式 tac 对齐 center / left / right
text-decoration 文本修饰 td / tdu 文本修饰 text-decoration: none; / text-decoration: underline; 常用none去掉超链接的下划线
text-indent 首行缩进 ti 首行缩进 text-indent: 2em; 首行缩进2个文字
line-height 行高 lh 行高 行高等于盒子高度会垂直居中 例如 line-height:20px;height:20px 则文字会垂直居中
文章作者: 微信:hao_yongliang
文章链接: https://haoyongliang.gitee.io/2021/05/13/%E5%89%8D%E7%AB%AF/css/day01/css01/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 郝永亮的主页
打赏
  • 微信
    微信
  • 支付寶
    支付寶

评论