CSS使用方式
- 外部样式
test.css
h1{
color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>css外部引入</title>
<!--外部引入式-->
<link rel="stylesheet" href="test.css" type="text/css"/>
</head>
<body>
<h1>我是一级标题</h1>
</body>
</html>
- 内部样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>css内部样式</title>
<!--内部样式式-->
<style>
/*css注释，这里边只能写css代码*/
h1{
color: red;
}
</style>
</head>
<body>
<h1>我是一级标题</h1>
</body>
</html>
- 行内样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>css行内样式式</title>
<!--行内样式式-->
</head>
<body>
<h1 style="color: red;">我是一级标题</h1>
</body>
</html>
css书写规则
1、确定添加样式的元素（找到目标）
2、确定添加的样式（美化的样式）
选择器{
属性1：值
属性2：值
}
选择器就是一种选择元素的方式，把你需要的标签选中，找目标
属性：设置样式
值：具体的样式
css选择器
用来定位查找元素
1.写法
2.含义
基本选择器
元素选择器
写法：元素名称
含义：找到该名称的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>元素选择器</title>
<style>
p{
color: red;
}
h1{
color: blue;
}
</style>
</head>
<body>
<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<h1>我也是一级标题</h1>
<p>我是第一个段落</p>
<p>我是第二个段落</p>
<p>我是第三个段落</p>
</body>
</html>
id选择器
以为元素设置一个id，然后针对具有这个id的元素进行CSS样式操作。
注意，在同一个页面中，不允许出现两个相同的id，这个就像没有哪两个人的身份证号是相同的道理一样。
写法：#id值
含义：找到具有特定id属性值的元素（一个）
#beauty{
color: yellow;
}
类选择器
可以对“相同的元素”或者“不同的元素”设置一个class（类名），
然后针对这个class的元素进行CSS样式操作。
写法：.class值
含义：选取具有指定的class属性值的元素（可以是多个）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>类选择器</title>
<style>
.redtext{
color: red;
}
.bluetext{
color: blue;
}
</style>
</head>
<body>
<h1 class="redtext">我是一级标题</h1>
<h2 class="bluetext">我是二级标题</h2>
<h1 class="redtext">我也是一级标题</h1>
<p class="bluetext">我是第一个段落</p>
<p class="redtext">我是第二个段落</p>
<p class="bluetext">我是第三个段落</p>
</body>
</html>
通用选择器
写法：*
含义：选中当前页面所有元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>通用选择器</title>
<style>
*{
color: red;
}
</style>
</head>
<body>
<h1 class="redtext">我是一级标题</h1>
<h2 class="bluetext">我是二级标题</h2>
<h1 class="redtext">我也是一级标题</h1>
<p class="bluetext">我是第一个段落</p>
<p class="redtext">我是第二个段落</p>
<p class="bluetext">我是第三个段落</p>
</body>
</html>
子元素选择器
子元素选择器，就是选中某个元素下的子元素，然后对该子元素设置CSS样式。
B是A的孩子，C是B的孩子，但C不是A的孩子
写法：选择器1 选择器2
含义：查找满足选择器1元素里面（直接孩子）的满足选择器2的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>子元素选择器</title>
<style>
div span{
color: red ;
}
</style>
</head>
<body>
<div>
<p>这是一个段落</p>
<span>这是div里边的span</span>
<span>这也是div里边的span</span>
</div>
<p>
<span>这是p里边的span</span>
<span>这也是p里边的span</span>
</p>
<div>这是div标签</div>
</body>
</html>
相邻选择器
写法：选择器1+选择器2
含义：找到满足选择器1元素，相邻（下边）一个元素需要满足选择器2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>相邻元素选择器</title>
<style>
div+span{
color: red ;
}
</style>
</head>
<body>
<div>
<p>这是一个段落</p>
<span>这是div里边的span</span>
<span>这也是div里边的span</span>
</div>
<p>
<span>这是p里边的span</span>
<span>这也是p里边的span</span>
</p>
<div>这是div标签</div>
<span>span标签1</span>
<p>段落标签2</p>
<span>span标签2</span>
</body>
</html>
群选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>相邻元素选择器</title>
<style>
h1,p{
color: red;
}
</style>
</head>
<body>
<h1>一级标签</h1>
<p>1段落</p>
<h2>二级标签</h2>
<p>2段落</p>
<h1>1一级标签</h1>
</body>
</html>
常用样式
1、确定设置哪方面样式 属性
2、确定样式 值
文本样式
字体 ：font-family属性
选择器{
font-family： 字体名称
}
大小：font-size属性
颜色：color
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style>
#h1_1{
font-family: 宋体;
font-size: 150px;
color: red;
}
p{
color: blue;
font-size: 50px;
}
</style>
</head>
<body>
<h1 id="h1_1">一级标签</h1>
<p>1段落</p>
<h2>二级标签</h2>
<p>2段落</p>
<h1>1一级标签</h1>
</body>
</html>
颜色
关键字，RGB值（6位十六进制数，两两一组表示三原色，00的时候两位可以省略为一个0）
边框样式
设置一个元素的边框必须要同时设置border-width、border-style、border-color这三个属性，这个元素的边框才能在浏览器显示出来。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style>
#h1_1{
font-family: 宋体,黑体;
font-size: 10px;
color: red;
border-style:solid;
border-width: 20px;
border-color: blueviolet;
}
span{
border-style:solid;
border-width: 20px;
border-color: blueviolet;
}
p{
border: red solid 30px;
}
h2{
/*border: double red 30px;*/
border-top: red 40px double ;
border-left: red 40px solid ;
border-bottom: red 40px double ;
border-right: red 40px solid ;
}
</style>
</head>
<body>
<h1 id="h1_1">一级标签</h1>
<p>1段落</p>
<h2>二级标签</h2>
<p>2段落</p>
<h1>1一级标签</h1>
<span>我是行内元素</span>
</body>
</html>
设置元素大小
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style>
div{
border: solid red 2px;
width: 100px;
height: 300px;
}
span{
border: solid red 2px;
width: 100px;/*对于行内元素无效*/
height: 300px;/*对于行内元素无效*/
}
</style>
</head>
<body>
<div>块级元素</div>
<span>行内元素------------</span>
</body>
</html>
背景样式
在CSS中，使用background-color属性来定义元素的背景颜色。
背景颜色background-color
选择器{
background-color：颜色；
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style>
div{
border: solid red 2px;
width: 100px;
height: 300px;
background-color: blue;
color: white;
}
span{
border: solid red 2px;
background-color: red;
font-size: 30px;
color: blue;
}
</style>
</head>
<body>
<div>块级元素</div>
<span>行内元素------------</span>
</body>
</html>
背景图片background-image
选择器{
background-image：url("图片地址")；
}
默认平铺
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style>
div{
border: solid red 2px;
width: 10801px;
height: 24301px;
background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.doubanio.com%2Fview%2Fgroup_topic%2Fl%2Fpublic%2Fp464268886.jpg&refer=http%3A%2F%2Fimg9.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648374185&t=7e7ddcca51a80ca5434ea93cde2cbaeb");
background-repeat: repeat;
color: white;
}
span{
border: solid red 2px;
background-color: red;
font-size: 30px;
color: blue;
}
</style>
</head>
<body>
<div>块级元素</div>
<span>行内元素------------</span>
</body>
</html>
不平铺
部分代码变化
div{
border: solid red 2px;
width: 10801px;
height: 24301px;
background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.doubanio.com%2Fview%2Fgroup_topic%2Fl%2Fpublic%2Fp464268886.jpg&refer=http%3A%2F%2Fimg9.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648374185&t=7e7ddcca51a80ca5434ea93cde2cbaeb");
background-repeat: no-repeat;
color: white;
}
