系列文章目录
这篇文章是css系列的一个基础归纳总结
文章目录
css的三种引入方式
内嵌、外链、行内
内嵌式:
style标签里面写的样式
外链式:
link引入
行内式:
直接写在标签里面的
级别
行内式最高、外链式最低。
内嵌和外链还有一个就近原则,
<!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 和 link的就近原则
-->
<style>
div{
background-color: black;
}
</style>
<link rel="stylesheet" href="./css.css">
<!--
虽然style的级别比link的高,但是link离标签近,所以最后元素展示的依旧是link的样式
如果想展示style里面的样式,那就把style放在link标签下面即可
-->
</head>
<body>
<div>
</div>
</body>
</html>
css选择器part
常见的选择器
标签选择器、id选择器(唯一的)#、class类选择器 .
后代选择器div p、nth-child()第几个本元素
群组选择器 a1,a2{}
子集选择器p>span,只能选择p标签下的第一层的span
菜鸟教程之css选择器
css选择器的权重
id的权重最大
id>class>标签
(越精准、权重越高)
注意:::
如果同时给标签的class两个样式的话,如果是以下这种写法会 优先选择第一个。例子:
<!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>
.liu{
height: 100px; width: 100px; background-color: blue;
}
.he{
background-color: brown;
}
</style>
</head>
<body>
<!--先来后到--->
<div class="liu" class="he"></div>
<div></div>
<p></p>
</body>
</html>
如果是这种写法的话,后面的会覆盖掉前面的
<div class="liu he" ></div>
如果想给已经存在的元素添加样式的话,直接选这种方式就可以。
后代选择器的玩法
像有些商品下面的文字都是红色的,就需要去选中,但往往标签不是同一种标签,就可以这么玩
<!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>
.top .top2 .top3 *{
color: red;
}
/* .top{
color: red;
} */
/* .top .top2{
color: red;
} */
</style>
</head>
<body>
<div class="top">
<div class="top2">
<div class="top3">
<p>1111</p>
<span>222</span>
</div>
</div>
</div>
</body>
</html>
子代选择器
不支持ie6
只能选择子集元素的直系标签(只要是直系的就可以。)
<!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>
/*这个表示选择的是one 第一层下面的 two 下面的所有的thr*/
.one>.two>.thr{
color: royalblue;
}
</style>
</head>
<body>
<!---
子级选择器可以更加精准的选择元素
子集选择器不支持ie6
子集选择器只能选择 第一层 元素下面所有的(子集元素选择器就是选择自己直系后代)
-->
<div class="one">
<div class="two">
<p class="thr">1111</p>
<p class="thr">222</p>
<div class="two">
<p class="thr">1111</p>
<p class="thr">222</p>
</div>
</div>
</div>
</body>
</html>
但是像这样写的话是可以选中的,所有的11、22都会变色的
这是因为two都是one的直系子元素
<!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>
.one>.two>.thr{
color: royalblue;
}
</style>
</head>
<body>
<!---
选择器可以更加精准的选择元素
-->
<div class="one">
<div class="two">
<p class="thr">1111</p>
<p class="thr">222</p>
</div>
<div class="two">
<p class="thr">1111</p>
<p class="thr">222</p>
</div>
</div>
</body>
</html>
外边距
margin不占据元素本身的宽高,决定元素的位置
上下左右都可以分别设置
<style>
div{
background-color: blueviolet;
/*四个值:上 右 下 左*/
margin: 10px 20px 10px 50px;
/*四个值的时候:上 左右 下*/
margin:10px 20px 40px;
/*margin两个值:上下 左右*/
margin: 10px 20px;
}
</style>
内边距
padding用法和margin相似
padding与margin 不同的是:padding会影响元素的宽和高
border 边框
<!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>
div{
height: 100px;
width: 100px;
border-left-width: 3px;
border-left-color: deeppink;
border-left-style: solid;
background-color: antiquewhite;
border-right-width: 3px;
border-right-color: rgb(20, 24, 255);
border-right-style: dashed;
}
</style>
</head>
<body>
<!--
边框样式border
1、他是由宽度 颜色 样式组成的
2、本质是四个倒立的三角形
3、缩写的顺序可以自由设定
---->
<div>
</div>
</body>
</html>
css的样式继承
子集继承父级的样式,像color等文字样式可以继承
box-sizing:border-box
这个属性会自动的保持盒子的宽度为初始值,会自动平衡 padding和width的值,使得最后的总宽度是width的值
制作圆形图片
当宽高一致时,设置border-radius: 50%;时 就是圆形
padding(子元素想动?)
是个好东西,子元素想动,给父元素padding,挤走子元素
要想宽度不变,设置box-sizing:border-box;