使用CSS的三种方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 写CSS第二种方式：在head中定义style标签，在style标签内部通过选择器来为目标标签配置css样式-->
<style>
/*1、id选择器,使用#id{}样式*/
#i1{
background-color: blue;
height: 100px;
100px;
}
</style>
<!-- 写CSS第三种方式：引入css文件，文件内容为：选择器{样式表},通过link标签在head中引入CSS文件,href传入文件名-->
<!-- demo.css文件内容：-->
<!-- #i2{-->
<!-- background-color: green;-->
<!-- height: 100px;-->
<!-- 100px;-->
<!--}-->
<link rel="stylesheet" href="demo.css">
</head>
<body>
<!-- 写CSS第一种方式：在标签style属性中写，多个样式使用分号分隔-->
<div style="background-color: red;height:100px;100px;">背景色</div>
<div id="i1">背景色1</div>
<div id="i2">背景色2</div>
</body>
当一个标签上需要多个css样式来修饰时，只能使用class属性 ，不能使用id属性
.c1{ 100px; height: 100px; } .c2{ background-color: red; } <div class="c1 c2">1</div>
CSS优先级：使用同一个id 对应不同的背景色，然后采用上面三种方式来测试CSS优先级
结论：标签中的style优先级最高，然后从下往上，距离目标标签越近优先级越高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*1、id选择器,使用#id{}样式*/
#i1{
background-color: blue;
height: 100px;
100px;
}
</style>
<!-- demo.css文件内容：-->
<!-- #i1{-->
<!-- background-color: green;-->
<!-- height: 100px;-->
<!-- 100px;-->
<!--}-->
<link rel="stylesheet" href="demo.css">
</head>
<body>
<!--style属性中多个样式使用分号分割-->
<div id="i1" style="background-color: black;height:100px;100px;">背景色</div>
<!-- <div id="i1">背景色1</div>-->
<!-- <div id="i2">背景色2</div>-->
</body>
</html>
id与class区别：
由于id只能在一个标签中使用，多个标签不能使用同一个id，但是能共用同一个class
选择器：
id选择器（#）
class选择器（.）
标签选择器
层级选择器（空格）
组合选择器（逗号）
属性选择器（中括号）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 选择器-->
<style>
/*id选择器*/
#i1{
background-color: green;
100px;
height: 100px;
}
/*#class选择器*/
.c1{
background-color: blue;
100px;
height: 100px;
}
/*标签选择器*/
span{
background-color: green;
}
/* 层级选择器 组合选择器 span标签下面所有div标签颜色改变 层级通过空格*/
span div {
color: aqua;
background-color: red;
}
/* class 层级选择器 层级通过空格*/
.d1 div {
background-color: #336699;
height: 48px;
}
/* id 层级选择器 层级通过空格*/
#i2 div {
background-color: black;
height: 48px;
}
/* 组合选择器 id z1 z2 z3 共用一套css样式 组合 通过逗号*/
#z1, #z2, #z3 {
background-color: chocolate;
height: 48px;
}
/* 组合选择器 class s1 s2 s3 共用一套css样式 组合 通过逗号*/
.s1, .s2, .s3 {
background-color: darkmagenta;
height: 48px;
}
/* 属性选择器 对选择到的标签 在通过属性进行筛选 可以和层级选择器连用(自定义属性s)*/
div[s='dsx'] {
background-color: darkred;
height: 48px;
}
/*写一个不同颜色 相同宽高的正方形*/
.wh{
100px;
height: 100px;
}
.bc-1{
background-color: red;
}
.bc-2{
background-color: blue;
}
</style>
</head>
<body>
<!-- id选择器-->
<div id="i1"></div>
<!--class选择器-->
<div class="c1"></div>
<!-- 标签选择器-->
<!-- 所有的span都是绿色-->
<span>我是标签选择器</span>
<!-- 层级选择器 组合标签选择器 -->
<span>
<div>组合标签选择器</div>
</span>
<!--层级选择器 class选择器下的div标签 -->
<div class="d1">
<div></div>
</div>
<!--层级选择器 id选择器下的div标签-->
<div id="i2">
<div></div>
</div>
<!-- id组合选择器 -->
<div id="z1"></div>
<div id="z2"></div>
<div id="z3"></div>
<!-- class组合选择器 -->
<div class="s1"></div>
<div class="s2"></div>
<div class="s3"></div>
<!-- 属性选择器 -->
<div s="dsx">我是属性选择器</div>
<div name="nn">我不是属性选择器</div>
<!--写一个不同颜色 相同宽高的正方形-->
<!-- class中可以运用多个css样式，使用空格分割-->
<div class="wh bc-1"></div>
<div class="wh bc-2"></div>
</body>
CSS属性
backgroundclor、height、width、font-size、font-weight、text-align、line-height、float、display、margin、padding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- height：高 width：宽 -->
<div style="background-color:darkblue;height: 48px; 48px;border: 1px solid red"></div>
<!-- 宽度支持百分比-->
<div style="background-color: blue;height: 100px; 40%"></div>
<!-- 边框 border：宽度 (solid)实线还是(dotted)虚线 颜色-->
<div style="height: 48px;border: 1px solid red"></div>
<!-- 边框 border 上下左右边框 都可单独配置 -->
<div style="height: 48px;border-left: 1px dotted red"></div>
<!-- 字体大小 font-size: 14px font-weight: 字体加粗 bold-->
<div style="height: 48px; 80%;border: 1px solid red;font-size: 14px;font-weight: bold">字体</div>
<!-- 平行方向左右居中 text-align: center -->
<div style="height: 48px; 80%;border: 1px solid red;font-size: 14px;text-align: center">大师兄</div>
<!-- 垂直方向居中 line-height：垂直方向要根据标签高度-->
<div style="height: 48px; 80%;border: 1px solid red;font-size: 14px;text-align: center;line-height: 48px">大师兄</div>
<!-- float 浮动 块级标签浮动后 相当于分层 都向左浮动 块级标签会便在一行 如果超过宽度超过100则会换行-->
<div style="background-color: aqua; 20%;float: left">1</div>
<div style="background-color: red; 20%;float:left;">2</div>
<div style="background-color: black; 20%;float:right;">3</div>
<!-- 块及标签的占满100%是相对来说，相对与他外层的div -->
<div style=" 400px;height: 400px;border: 1px solid black;">
<div style=" 100px;height: 40px;background-color: red;float:left;"></div>
<div style=" 100px;height: 40px;background-color: blue;float:left;"></div>
<div style=" 100px;height: 40px;background-color: red;float:left;"></div>
<div style=" 100px;height: 40px;background-color: blue;float:left;"></div>
<div style=" 100px;height: 40px;background-color: red;float:left;"></div>
</div>
<!-- display 属性 展示属性 块级标签和行内标签之间切换的属性 display:inline 块级标签转换为行内标签-->
<div style="height: 100px;background-color: black;display: inline">外联标签</div>
<!-- display：block 内联标签转换为块及标签-->
<span style="height: 100px;background-color: red;display: block;">内联标签</span>
<!-- 行内标签必须要有内容，否则无法设置高度、宽度、padding、margin-->
<span style="background-color: blue; 100px;height: 100px;">大师兄</span>
<!-- 通过display:inline-block 可以完美的解决上个问题;他既有行内标签的自己多大就占多大的特性 又有块级标签使用 宽、高、内外边距的特性-->
<span style="background-color: aqua; 100px;height: 100px;display: inline-block "></span>
<!-- 隐藏标签;display：none-->
<span style="background-color: #336699;display: none">我是隐藏的</span>
<!-- 外边距 margin 内边距 padding-->
<!-- margin 外边距 自己针对外围的div产生变化 外边距撑大外层 -->
<div style="border: 1px solid red;height: 100px">
<div style="background-color: blue;height: 70px;margin-top: 40px"></div>
</div>
<!-- padding 内边距 自身的边距增加 从上到下增加 内边距扩大自身 -->
<div style="border: 1px solid red;height: 100px">
<div style="background-color: green;height: 70px;padding: 30px">内边距增加</div>
</div>
</body>
</html>
CSS基础样式（补充上面CSS属性的）
float浮动
<!-- 通过在div中增加style属性优先级最高，实现向左浮动-->
<style>.c1{100px;height:100px;float:right;}</style>
<div class="c1" style="float: left">2</div>
由于浮动的原因，浮动的div可能跑出了外层div,需要使用clear属性 清除浮动 left:清除左边浮动 right:清除右边浮动 both:清除两边浮动
<div style="clear: both;"></div>
display：none
<div style="display: none"></div>
绝对定位：position
position 分层
position：fixed 固定在窗口的某个位置 top：距离顶部多少像素 left right bottom 见body.html
position relative absolute
position：relative 与 position：absolute(绝对定位，单用没什么作用 结合relative才牛逼) absolute的定位针对于于relative的定位 单独relative没有任何意义 见body.html
<!-- 将div固定在最上方，无论如何滚动页面，都不会随着滚动上下移动--> <div style="position: fixed;top: 0px;left: 0;right: 0;height: 100px; 100%;background-color: burlywood;"></div>
相对定位：
position：relative 与 position：absolute(绝对定位，单用没什么作用 结合relative才牛逼) absolute的定位针对于于relative的定位 单独relative没有任何意义
在父层div中使用position：relative，在自己这层使用position：absolute，自己这层就可以通过 top bottom left right 来操作自己这层的div了
例子是在一个div内部四个角放上4个红色小div
.content-inner{ 100%; height: 200px; border: 1px black solid; /*相对定位：外层div需要使用position: relative*/ position: relative; } .test{ 40px; height: 40px; background-color: red; /*相对定位：内层div需要使用position: absolute*/ position: absolute; } <div class="content-inner"> <div class="test" style="top: 0;right: 0"></div> <div class="test" style="top: 0;left: 0"></div> <div class="test" style="bottom: 0;right: 0"></div> <div class="test" style="bottom: 0;left: 0"></div> </div>
margin 外边距
外边距 自己针对外围的div产生变化 外边距撑大外层 top left right bottom
当自己在兄弟div在下方的时候，margin调节距离是相对于上方的兄弟div，常用来控制兄弟div的间距
<h4>外边距 自己针对外围的div产生变化 外边距撑大外层 top left right bottom</h4> <div style="border: 1px red solid; 100%;height: 100px"> <div style="background-color: blue; 100%;height: 30px;margin-top: 10px"></div> </div> <h4>外边距 当自己在兄弟div在下方的时候，margin调节距离是相对于上方的兄弟div，常用来控制兄弟div的间距</h4> <div style="border: 1px red solid; 100%;height: 100px"> <div style="background-color: black; 100%;height: 10px;margin-top: 0"></div> <div style="background-color: blue; 100%;height: 30px;margin-top: 20px"></div> </div>
z-index层级：经常在滚动页面时，需要保持第一行标题栏div保持不动，也就是第一行div要压住其他div，就是要设置层级，层级数越大，表示层级越高，展示越靠前
.pg-header{ /*层级关系：数字越大，层级越高*/
z-index: 999;}
cursor ：鼠标悬浮时展示的样式
<!--截图样式--> <input type="button" value="登录" style="cursor: crosshair;" > <!--小手样式--> <input type="button" value="登录" style="cursor: pointer;" > <!--移动样式--> <input type="button" value="登录" style="cursor: move;" >
overflow
overflow属性设置当div内的内容溢出div的高宽时，如何处理？
hidden：溢出部分截取掉；
scroll：超出就出现滚动条；
auto:超出就出现滚动条
<div style=" 100px;height: 100px;border: 1px red solid;overflow: hidden;display: inline-block"> <img src="http://ui.imdsx.cn/static/image/dsx.jpg" > </div> <div style=" 100px;height: 100px;border: 1px red solid;overflow: auto;display: inline-block"> <img src="http://ui.imdsx.cn/static/image/dsx.jpg" > </div> <div style=" 100px;height: 100px;border: 1px red solid;overflow: scroll;display: inline-block"> <img src="http://ui.imdsx.cn/static/image/dsx.jpg" > </div>
hover
hover属性是当鼠标移动到上面后，展示其样式
background
background 是针对背景一些样式设置， background-image：背景图片，图片大小如果小于div的大小。则无限堆叠 水平垂直都堆叠。可通过background-repeat属性对是否堆叠进行设置 no-repeat(不堆叠) repeat-y(纵向堆叠) repeat-x(横向堆叠)。 background-position 针对div设置图片展示的位置。background-position-y: 10px 纵向移动图片 background-position-x: 10px 横向移动图片。也可以不写x或y，默认第一个为x的值 第二个位y的值，background-position:10px 10px。可以通过background直接简写，background 简写 参数分别为 颜色 背景图 postion横向 纵向 是否堆叠
<h4>无限堆叠</h4>
<div style="background-image: url('http://ui.imdsx.cn/static/image/dsx.jpg');height: 160px; 100%;height: 500px">
</div>
<h4>不堆叠</h4>
<div style="background-image: url('http://ui.imdsx.cn/static/image/dsx.jpg');height: 160px; 100%;height: 500px;background-repeat: no-repeat">
</div>
<h4>横向堆叠</h4>
<div style="background-image: url('http://ui.imdsx.cn/static/image/dsx.jpg');height: 160px; 100%;height: 500px;background-repeat: repeat-x">
</div>
<h4>纵向堆叠</h4>
<div style="background-image: url('http://ui.imdsx.cn/static/image/dsx.jpg');height: 160px; 100%;height: 500px;background-repeat: repeat-y">
</div>