目录
一、实现CSS的三种方式
1、引入外部CSS样式
2、内部样式
3、内联样式
二、CSS修饰各种标签使用方式
1、通用
2、指定id
3、指定属性
4、指定class
5、全选择器
6、子代选择器，指定某个标签内部的标签
三、边框及各种边距
四、CSS的position定位
1、static
2、relative
3、absolute
4、fixed
5、sticky
6、非定位祖先元素
一、实现CSS的三种方式
1、引入外部CSS样式
使用link标签引入
2、内部样式
写在head的style标签里。
3、内联样式
写在某个具体标签中。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!-- 引入外部css样式 --><link href="css/easyD.css" rel="stylesheet"/><!-- 样式从上往下会被覆盖掉 --><style>/* 内部样式 写在html文档内部 */*{color: red;}</style></head><body><!-- css可以写在三个位置 --><!-- 内联样式 写在标签中 --><img src="image/pubu.png" style="height: 100px"/><span style="color: orange;">123</span></body>
</html>上面代码中span里的123会显示orange颜色，因为css样式从上往下会依次被覆盖掉。
二、CSS修饰各种标签使用方式
1、通用
直接div、span
css"> /* 元素标签选择器 */div{border: 1px solid deeppink ;height: 100px;width: 100px;background-color: aquamarine;}2、指定id
使用#
css">/* 对指定id的div标签修饰 */#div1{background-color: blanchedalmond;}3、指定属性
css"> /* 属性选择器（选择属性中有name的） */[name="password"]{outline: none;}4、指定class
使用.
css">/* 类选择 class等于多少 */.box{border-radius: 10px;background-color: azure;}5、全选择器
css">/* 全选择器 */*{margin: 0;}6、子代选择器，指定某个标签内部的标签
使用>
css"> /* 子代选择器 指定div内部的标签 */.box>span{color: red;/* 字体大小 */font-size: 30px;/* 字体加粗 bold或者600以上*/font-weight: bold;}/* 只修饰子类 */.boxb>.boxc{border-width: 5px;}/* 修饰所有的后代 */.boxb .boxc{border-radius: 5px;}三、边框及各种边距
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>#easy{width: 400px;height: 300px;background-color: aquamarine;border-style: solid;border-color: black;}.box{width: 100px;height: 100px;background-color: antiquewhite;border-style: solid;/* border-left-width: 5px; */border-color: red;/* 顺序为上-右-下-左 顺时针*/border-width: 5px 10px 15px 20px;/* 上-左右-下 */border-width: 5px 10px 20px;/* 上下-左右 */border-width: 5px 10px;/* 四条边都一样 */border-width: 5px;/* 内边距 内部空间--边框的距离 */padding: 20px;/* 外边距 边框距离其他组件的距离*/margin: 50px;/* 垂直方向的没有间隔的外边距会合并成一个,取最大值 盒模型塌陷*/}</style></head><body><!-- 盒模型 将块级标签抽象为一个盒子--><div id="easy"><div class="box">你好</div></div><div style="margin: 100px;padding: 50px;">你好</div></body>
</html>四、CSS的position定位
1、static
static（默认值）
行为：元素按照正常的文档流进行布局，不会受到top、right、bottom、left等偏移属性的影响。
用途：通常不需要特殊定位时使用。
<style>.box {width: 100px;height: 100px;background-color: lightblue;margin: 10px;position: static; /* 默认值 */}
</style>
<div class="box">Box 1</div>
<div class="box">Box 2</div>
2、relative
行为：元素相对于其正常位置进行偏移，但不会影响其他元素的布局。元素仍然占据原来的位置。
用途：常用于微调元素的位置，同时不影响页面的整体布局。
<style>.box {width: 100px;height: 100px;background-color: lightblue;margin: 10px;}.relative {position: relative;top: 20px;/* 向下偏移20px */left: 20px;/* 向右偏移20px */}</style>
3、absolute
行为：元素相对于其最近的已定位（非static）祖先元素进行偏移。如果没有祖先元素，则相对于初始包含块（通常是<html>元素）。
用途：常用于将元素从文档流中脱离出来，进行精确的布局。
<style>.container {position: relative; /* 作为绝对定位的参照物 */width: 300px;height: 300px;background-color: lightgray;}.box {width: 100px;height: 100px;background-color: lightblue;margin: 10px;}.absolute {position: absolute;top: 50px; /* 距离容器顶部50px */right: 50px; /* 距离容器右侧50px */}
</style><div class="container"><div class="box">Box 1</div><div class="box absolute">Box 2</div>
</div>
4、fixed
行为：元素相对于浏览器窗口进行偏移，即使滚动页面，元素位置也不会改变。
用途：常用于创建固定导航栏、悬浮按钮等。
<style>.fixed {position: fixed;top: 20px; /* 距离窗口顶部20px */right: 20px; /* 距离窗口右侧20px */width: 100px;height: 100px;background-color: lightcoral;z-index: 1000; /* 确保在最上层 */}.content {height: 1000px; /* 让页面可以滚动 */background-color: lightgray;}
</style><div class="fixed">Fixed Box</div>
<div class="content"><p>滚动页面看看固定定位的效果。</p><p>...</p>
</div>
5、sticky
行为：元素在页面滚动到一定位置时，会“粘”在指定位置（类似于fixed），但在其他位置时仍然按照正常文档流布局。
用途：常用于创建粘性导航栏、侧边栏等。
<style>.sticky {position: sticky;top: 0; /* 距离窗口顶部0px时变为固定定位 */width: 100%;height: 50px;background-color: lightgreen;z-index: 1000;}.content {height: 1000px; /* 让页面可以滚动 */background-color: lightgray;}
</style><div class="sticky">Sticky Box</div>
<div class="content"><p>滚动页面看看粘性定位的效果。</p><p>...</p>
</div>
6、非定位祖先元素
