css规则又两个主要部分构成:选择器,及一条或者多条的声明
h1(表示选择器){
border: 1px solid #ccc; (声明多条css的样式语法 每个声明使用分号结束)
width: 150px;每个声明 👉:属性:属性值 组成
height: 100px;
color: red;
}
常见的选择器有:标签选择器(直接使用HTML的标签)、id选择器(在标签中使用id对属性命名,同一个页面的id不可重复)、类选择器(使用class属性命名 使用.class的形式作为选择器 类样式可以被多个元素复用)
搭建4个div标签:box1234:是标签的内容
使用内部样式--style添加样式属性
里面的div(是标签选择器){}===选择文档中所有的div标签 进行标签的处理
dashed:虚线
标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
border: 1px dashed rgb(45%,24%,78%);
}
</style>
</head>
<body>
<div>box1</div>
<div>box2</div>
<div>box3</div>
<div>box4</div>
</body>
</html>
id选择器
id名称需要使用双引号的字符串中 然后再标签中使用---唯一不可复用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
border: 1px dashed rgb(45%,24%,78%);
}
#box1{
border: 2px double rgb(100%,0%,0%);
}
</style>
</head>
<body>
<div id="box1">box1</div>
<div>box2</div>
<div>box3</div>
<div>box4</div>
</body>
</html>
id选择器 对行内标签也起了作用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
border: 1px dashed rgb(45%,24%,78%);
}
#box1{
border: 2px double rgb(100%,0%,0%);
}
#box2{
border: 2px solid rgb(100%,0%,0%);
}
</style>
</head>
<body>
<div id="box1">box1</div>
<div>box2</div>
<div>
<p>
<a id="box2" href="#">
box3
</a>
</p>
</div>
<div>box4</div>
</body>
</html>
类样式--可以复用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
border: 1px dashed rgb(45%,24%,78%);
}
.box{
border: 8px solid rgb(100%,0%,0%);
}
</style>
</head>
<body>
<div class="box">box1</div>
<div class="box">box2</div>
<div>
<p>
<a class="box" href="#">
box3
</a>
</p>
</div>
<div>box4</div>
</body>
</html>