为网页添加样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{
color: red;
background-color: lightblue;
text-align: center;
}
</style>
</head>
<body>
<h1>现在开始添加样式</h1>
</body>
</html>
在head中的style标签内的就是css代码，使用css代码可以定义样式等
CSS规则= 选择器 + 声明快
选择器
1、ID选择器
选中的是对应id值的元素
书写样式
#id名称{
样式名称...
}
2、元素选择器
直接书写元素名称，即可选择元素并且定义元素样式
选择器：选中元素
#元素名称{
样式名称...
}
3、类选择器
.class名称{
样式名称...
}
声明块
出现在大括号中
声明块中包含很多声明（属性），每一个声明表达了某一方面的属性改变
CSS代码书写位置
1、内部样式表
书写在style标签中
2、内联样式表，元素样式表
直接在元素标签内加入style添加样式
<h1 style="color: red;">现在开始添加样式</h1>
3、外联样式表
将样式书写到独立的css文件中
<link rel="stylesheet" href="">
1、外部样式表可以解决多个页面样式重复的问题
2、有利于浏览器缓存，从而提高页面响应速度
3、有利于代码分离，更容易阅读和维护
网友评论