前端三大件html、css 、javascript
id选择器：唯一的标签,权重最高的
<div id='abc'></div> 只能有一个div id叫abc
类选择器：class 用的比较广范 比较多
标签选择器：div{} <div></div> 都会触发这个样式
<style>
选择器{样式:样式值;样式:样式值;样式:样式值;}
</style>
优先级：id>class>标签选择器，下面是三种方式的代码基础展示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>初始css</title>
<style>
/* 标签选择器的修饰方式 */
div{
width: 200px;
height: 200px;
background: black;
}
/* id 选择器的修饰方式 */
#yy{
width: 200px;
height: 200px;
background: blue;
}
/* 类选择器的修饰方式 */
.hanhan{
background: mediumorchid;
}
</style>
</head>
<body>
<div></div>
<div id='yy'></div>
<div class="hanhan"></div>
</body>
</html>
后代选择器：在css中越精准权重越高
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#mydiv p{
background: green;
}
</style>
</head>
<body>
<p>憨憨日常</p>
<div id="mydiv">
<p>今天继续加油</p>
<p>加油加油</p>
</div>
</body>
</html>
群组选择器：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>群组选择器</title>
<style>
.a1,.a2{
background:rebeccapurple ;
}
</style>
</head>
<body>
<div class="a1">今天天气真好<</div>
<p class="a1">今天天气真好</p>
<p class="a1">今天天气真好</p>
<p class="a2">今天天气真好</p>
<p class="a2">今天天气真好</p>
<p class="a1">今天天气真好</p>
</body>
</html>
css可以给我们html赋值的三种方式：
外链式 一般来说 优先使用这样的方式
建立一个css文件，然后通过<link />进行外链
<link rel="stylesheet" href="css.css">
内嵌式
<style>
div{witdth:200px;height:200px;background:black;}
/* 选择器{样式:样式值;样式:样式值;样式:样式值;} */
</style>
行内式
<div style="width: 200px;height: 200px;background: yellow;"></div>
三种方式执行层级不同：行内式 > 内嵌式 > 外链式，代码自上而下之行
margin——外边距
margin-left/ margin-right/ margin-bottom/margin-top
margin 可以缩写
margin:4个值 上 右 下 左
margin:3个值 上 左右 下
margin:2个值 上下 左右
margin:1个值 上下左右
注意：margin原来的元素大小不发生改变
举例：
width:200px;height:200px;
margin-left:100px;
实际宽度是 200像素
padding-内边距
padding-left/ padding-right/ padding-bottom/padding-top
缩写方式跟margin缩写同理
注意：padding 原来的元素大小发生了改变
border——边框，占元素的大小，是往外长的
border - 缩写样式
border : 大小（10px） 实线或者虚线 颜色
实线(solid)
虚线(dashed)
颜色(#)(rgb())(red)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>border</title>
<style>
.borderNode{
width: 200px;
height: 200px;
background: #ccc;
border: 10px solid black;
/* solid 实线边框
dashed 虚线边框
border 占元素的大小是往外面长的
*/
}
.borderNode2{
width: 200px;
height: 200px;
background: greenyellow;
border: 10px dashed black;
}
</style>
</head>
<body>
<div class="borderNode"></div>
<div class="borderNode2"></div>
</body>
</html>
background缩写样式
background-color:背景颜色
background-image:背景图片
background-size:背景图的大小
background-repeat:背景图平铺
no-repeat 不平铺
repeat-x 横坐标平铺
repeat-y 纵坐标平铺
background-position:背景坐标
放两个参数 第二个参数默认是center
第一个参数是x轴
第二个参数是y轴
支持 right/bottom/left/top/center的写法
块状元素：可以随意嵌套
div 最基本的块状元素
1.支持宽高 margin、padding
2.width 默认是100% ,独占一行
行内元素：只可以嵌套行内元素
span 最基本的行内元素
1.宽高会随着内容变化而变化
2.支持margin、padding
3.不独占一行