用css定义网页样式要注意什么网页制作css样式

1.CSS介绍
HTML学习完以后，以及可以使用HTML开发网页了，但是在呈现的效果上没有那么美观，所以接下来我们要学习CSS,CSS就是可以让我们页面变得更加美观，接下来我们开始学习CSS
第一步：在IDEA中创建名为08_CSS-介绍.html的文件：

文章插图
第二步:编写如下代码，需要注意的是style标签中书写的是css样式，我们先照着写即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS介绍</title>
<style>
h1{
background-color:yellow;
color: red;
}
</style>
</head>
<body>
<h1>
Hello CSS
</h1>
</body>
</html>
第三步：浏览器打开页面，效果如下：

文章插图
很明显，如果没有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的引入方式
第一步：我们IDEA中创建名为09_CSS-引入方式.html的文件：

文章插图
第二步：我们首先演示内联样式，按照内联样式的语法，我们编写如下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS引入方式</title>
</head>
<body>

用css定义网页样式要注意什么 网页制作css样式

用css定义网页样式要注意什么网页制作css样式