1.CSS 简介
CSS 就是用来美化Html标签的
2.标签选择器
样式CSS 用来美观标签 ,web领域样式分为三种:
- 外部样式
- 内部样式
- 行内样式
内部样式写在head中,利用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
h1{
color: red;
}
</style>
</head>
<body>
<h1>测试一下css样式</h1>
</body>
</html>
如果用标签选择器来制定样式,会有一个问题,一个html页面里所有的h1标签的样式都被改变了。所以就有了下面的id选择器
3.id选择器
一般情况下,页面的标签id属性值是唯一的。
- 在标签开始位置加上属性id
- 在style中加上 #id
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
h1{
color: red;
}
#hhh{
color: blue;
}
.onepiece{
list-style-type: square;
}
</style>
</head>
<body>
<h1 id="hhh">测试一下css样式</h1>
<ul class="onepiece">
<li>路飞</li>
<li>娜美</li>
</ul>
</body>
</html>
4.class 选择器
class选择器可以重复,它代表一类事物
和id选择器区别开,它用 .class 表示
5.固定定位
- 只有position 属性才有left,right,bottom,top
- position 属性是相对于当前窗口的位置,不管浏览器如何滑动,它不会跟随滑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
h1{
color: red;
}
#hhh{
color: blue;
}
#c{
width: 500px;
height: 500px;
background-color: rebeccapurple;
}
#a{
width: 500px;
height: 500px;
background-color: red;
}
#i{
position: fixed;
left: 300px;
top: 300px;
width: 500px;
height: 500px;
background-color: black;
}
</style>
<link rel="stylesheet" href="css/defeault.css">
</head>
<body>
<h1 id="hhh">测试一下css样式</h1>
<ul class="onepiece">
<li>路飞</li>
<li>娜美</li>
</ul>
<div>
<div id="c"></div>
<div id="a"></div>
<div id="i"></div>
</div>
</body>
</html>
6.相对定位
相对定位相对的是自己的起始位置,可以滚动
position:relative
相对定位的起始位置是被占用的
7.绝对定位
绝对定位也可以让元素脱离文档流(文档流指的是按规则依次排列下去)
position: absolute;
- 绝对定位的元素,如果没有父元素,就按照页面定位
- 绝对定位的元素,如果有父元素,并且父元素有定位,就按照父元素定位,否则就按照页面定位
- 绝对定位的元素不占用起始位置