1.CSS介绍
HTML学习完以后,以及可以使用HTML开发网页了,但是在呈现的效果上没有那么美观,所以接下来我们要学习CSS,CSS就是可以让我们页面变得更加美观,接下来我们开始学习CSS<br> 第一步:在IDEA中创建名为08_CSS-介绍.html的文件:<br> 第二步:编写如下代码,需要注意的是style标签中书写的是css样式,我们先照着写即可<br>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS介绍</title>
<style>
h1{
background-color:yellow;
color: red;
}
</style>
</head>
<body>
Hello CSS
</body>
</html>
第三步:浏览器打开页面,效果如下:<br> 很明显,如果没有css,我们只会呈现黑色的效果,而我们加入了css,此处呈现红色大号字体,让我们的网页变得更加的美观的(ps:此处我们审美问题,修饰的并不美丽)。所以css可以美化我们的页面。
2.CSS概念和作用
2.1CSS格式规范HTML,元素名称在规则集开始位置
格式 | 说明 |
---|---|
大括号 | 开头和结尾,所有的样式放在里面 |
样式名 | 左边是样式名,样式名和样式值是固定的,中间使用冒号分隔 |
样式值 | 右边是样式值 |
样式结尾 | 每个样式以分号结尾 |
2.2CSS介绍
2.2.1CSS概念
- 层叠样式表,用于控制页面的样式(表现)。
2.2.2 CSS作用
- 美化网页
CSS格式规范
- 选择器:位于规则集开始位置,用于选择HTML元素
- 属性:改变HTML元素样式
- 属性值: 在属性右边,冒号后面
- 存放位置:<head>标签中创建<style>标签
3.CSS三种引入方式
我们知道了css可以美化html的页面,那么我们该如何再html中书写css呢?接下来我们需要学习html中书写css的方式,具体有3种,语法如下表格所示:
名称 | 语法描述 |
---|---|
内联样式 | 在标签内使用style属性,属性值是css属性键值对 |
内部样式 | 定义<style>标签,在标签内部定义css样式 |
外部样式 | 定义<link>标签,通过href属性引入外部css文件 |
对于上述3种引入方式,企业开发的使用情况如下:
- 内联样式会出现大量的代码冗余,不方便后期的维护,所以不常用。
- 内部样式,通过定义css选择器,让样式作用于指定的标签上
- 外部样式,html和css实现了完全的分离,企业开发常用方式。
接下来,我们通过IDEA编写代码,来演示css的引入方式<br> 第一步:我们IDEA中创建名为09_CSS-引入方式.html的文件:<br> 第二步:我们首先演示内联样式,按照内联样式的语法,我们编写如下代码:<br>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS引入方式</title>
</head>
<body>
<!-- 1.内联样式-->
<p style="color: red;font-size: 40px">CSS内联样式</p>
</body>
</html>
第三步:我们通过浏览器打开观察效果如下:<br> 第四步:我们接下来注释掉内联样式,按照内部样式的语法演示内部样式,修改代码如下:<br>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS引入方式</title>
<!-- 2.内部样式-->
<style>
p{
color: yellow;
font-size: 50px;
}
</style>
</head>
<body>
<!-- 1.内联样式-->
<!-- <p style="color: red;font-size: 40px">CSS内联样式</p>-->
<!--2.内部样式-->
<p>CSS内部样式1</p>
<p>CSS内部样式2</p>
</body>
</html>
新增内容:
<!-- 2.内部样式-->
<style>
p{
color: yellow;
font-size: 50px;
}
</style>
第五步:打开浏览器观察效果如下:<br> 第七步:在resources目录下创建demo.css文件中编写如下的css代码:
p{
color: blue;
font-size: 60px;
}
第八步:我们注释掉内部样式,新增<link>标签来引入外部css文件,完整代码如下:<br>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS引入方式</title>
<!-- 2.内部样式-->
<!-- <style>
p{
color: yellow;
font-size: 50px;
}
</style>-->
<link rel="stylesheet" href="demo.css">
</head>
<body>
<!-- 1.内联样式-->
<!-- <p style="color: red;font-size: 40px">CSS内联样式</p>-->
<!--2.内部样式
<p>CSS内部样式1</p>
<p>CSS内部样式2</p>-->
<!--3.外部样式-->
<p>CSS内部样式1</p>
<p>CSS内部样式2</p>
</body>
</html>
新增内容:
<link rel="stylesheet" href="demo.css">
第九步:打开浏览器观察效果如图所示:<br>
4.CSS选择器
上一小节我们学习了css的引入方式,其中内联样式和外部样式都书写了css选择器**,那么本小节主要来讲解css的选择器,包括css选择器中的属性。顾名思义:选择器是选取需设置样式的元素(标签),但是我们根据业务场景不同,选择的标签的需求也是多种多样的,所以选择器有很多种**,我们只学习最基本的3种<br> 选择器通用语法如下:
选择器名 {
css样式名:css样式值;
css样式名:css样式值;
}
我们需要学习的3种选择器是元素选择器,id选择器,class选择器,语法以及作用如下:
4.1元素选择器
格式:
- 选择器的名字必须是标签的名字
- 作用:选择器中的样式会作用于所有同名的标签上
元素名称 {
css样式名:css样式值;
}
例子如下:
p{
color: #00FF00;
font-size: 30px;
}
4.2.id选择器:
- 选择器的名字前面需要加上#
- 作用:选择器中的样式会作用于指定id的标签上,而且有且只有一个标签
#id属性值 {
css样式名:css样式值;
}
例子如下:
#{
color: blue;
}
4.3类选择器
- 选择器的名字前面需要加上.
- 作用:选择器中的样式会作用于所有class的属性值和该名字一样的标签上,可以是多个
.class属性值 {
css样式名:css样式值;
}
例子如下:
.cls{
color: aqua;
}
接下来我们需要通过代码来演示3种选择器的作用:<br> 第一步:在IDEA中创建名为10_CSS-选择器.html的文件:<br> 第二步:遵循上述的3种选择器语法,编写如下代码:<br>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS选择器</title>
<!-- 1.元素选择器-->
<style>
p{
color: #00FF00;
font-size: 30px;
}
#pp{
color: blue;
}
.cls{
color: aqua;
}
</style>
</head>
<body>
<!-- 1.元素选择器-->
<p>CSS元素选择器</p>
<!-- 2.id选择器-->
<p id="pp">CSS id选择器</p>
<!-- 3.类选择器-->
<p class="cls">CSS类选择器</p>
</body>
</html>
第三步:打开浏览器,观察效果如下图所示:<br> css的属性有很多,这是前端做的,我们不写,想要知道详细属性的作用,参考文档https://developer.mozilla.org/zh-CN/docs/Learn/CSS
5.CSS常用样式
每个标签都可以设置背景,我们学习的时候以<div>标签为例
功能 | 属性名 | 属性取值 |
---|---|---|
背景色 | background-color | 颜色常量,如:red |
使用十六进制,如:#123 | ||
背景图片 | background-image | url(图片文件) |
平铺方式 | background-repeat | repeat 默认。背景图像将在垂直方向和水平方向重复。 |
repeat-x 背景图像将在水平方向重复。 repeat-y 背景图像将在垂直方向重复。 no-repeat 背景图像将仅显示一次。 | | 背景大小 | background-size | 宽度和高度 | | 颜色 | color | 颜色常量,如:red 使用十六进制,如:#123 | | 文本缩进 | text-indent | 用于缩进文本,可以使用em单位,表示缩进1个字符,无论字符的大小。 | | 文本对齐 | text-align | left 把文本排列到左边。默认值:由浏览器决定。 right 把文本排列到右边。 center 把文本排列到中间。 | | 设置大小 | font-size | 单位:像素 | | 设置样式 | font-style | 字体设置为斜体 italic 浏览器会显示一个斜体的字体样式。 normal 默认值。浏览器显示一个标准的字体样式。 | | 设置粗细 | font-weight | bolder加粗 normal 不加粗 |
接下来我们需要通过代码来演示<br> 第一步:在IDEA中创建名为11_CSS-背景颜色设置.html:<br> 第二步:遵循上述的背景语法,编写如下代码:<br>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景颜色设置</title>
<style>
/*background-color: 背景颜色*/
/*background-image: 背景图片*/
/*background-repeat: 背景平铺方式 no-repeat:不平铺, repeat-x:水平平铺, repeat-y:垂直平铺*/
/*background-size: 背景图片大小*/
div{
width: 1000px;
background-color: blue;
background-image: url("img/star.png");
background-repeat:no-repeat;
background-size: 1000px;
}
</style>
</head>
<body>
<div>
我是h1
我是h1
我是h1
我是h1
我是h1
我是h1
我是h1
我是h1
我是h1
</div>
</body>
</html>
第三步:打开浏览器,观察效果如下图所示:<br>