一、CSS的概述
解释：CSS:Cascding Style Sheet 层叠样式表。CSS是网页的外观。
（一）概念
（1）.作用:用来控制我们HTML标签的展示样式,他是跟我们HTML标签进行配合，来美化HTMl标签的。html本身会带有一些样式，或者说html标签本身，会自带一些属性，也能进行一些样式的设置。但是这些样式，还是不能满足我们的需求，我们需要更加丰富的样式，那么这个时候CSS出现了，我们学习了CSS以后 尽量不使用 HTML标签自带的属性 全部用CSS 去设置。
层叠性: 多个多个样式控制一个标签,这几个样式对一个标签同时生效。（2）.CSS 跟HTML 配合使用的方式
- 1:内联样式: 将CSS 代码写在标签上 所有的标签都会有一个 style属性
我们的CSS代码 就可以写在 style 属性里面
每个CSS样式 写法 属性名:属性值;属性名2:属性值2;属性3:属性值3
举例: 这段文字的样式
内联样式的写法:只能控制单个标签,且书写凌乱,不推荐使用. - 2.内部方式:就是将CSS代码单独写在一个style标签内，他要配合选择器来使用，可以控制多个标签的展示样式。
- 3.外联样式:将CSS代码单独写在一个文件中，可以对多个页面的样式进行控制。
- 1:内联样式: 将CSS 代码写在标签上 所有的标签都会有一个 style属性
（3）.CSS语法：选择器+属性+值
（4）.id和class选择器（设置CSS样式）
id 属性只能在每个 HTML 文档中出现一次
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：
举例：所有拥有 center 类的 HTML 元素均为居中。
.center {text-align:center;}
二、CSS常用属性
- 设置字体、背景
font-size:10px/pt/mm/cm/em 设置字体大小
color:red 设置颜色
font-family:华文彩云 设置字体
border:1px black solid; 设置边框 边框粗细 边框颜色 边框的线条（solid 实现）
width: 100px; 设置元素的宽
height: 100px; 设置元素的高
background-color:yellow; 设置背景颜色 简写background
background-image: url(img/timg.jpg); 设置背景图片
background-size: 100% 100%; 宽高 给成100% 让背景图片填满这个div区域
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="" style="font-size: 20px;color: red;font-family:微软雅黑;">
div是一个纯净的块标签
</div>
<div id="" style="border:1px black solid;">
div是一个纯净的块标签2
</div>
<div id="" style="width: 100px; height: 100px;border: 1px black solid;margin-top: 20px;background-color:red ;">
//格式：宽100，高100，边框1黑色，距离顶部20，设置背景颜色：红色
</div>
<div id="" style="width: 200px; height: 300px;border: 1px black solid;margin-top: 20px;background-image: url(img/timg.jpg);background-size: 100% 100%;">
//格式：宽200，高300，边框1黑色，距离顶部20，设置背景图片：time.jpg，背景图片大小：占满
</div>
<div id="" style="width: 200px; height: 300px;border: 1px black solid;margin-top: 20px;">
<img src="img/timg.jpg" style="width:200px;height: 300px;" >
//格式：宽200，高300，边框1黑色，距离顶部20，插入图片：宽200，高300
</div>
</body>
</html>
- 页面元素的定位：
position 相对定位relative 绝对定位absolute 页面元素，默认用的是相对定位，所谓想相对定位，一个元素位置，会参照上一个元素的位置。所谓的绝对定位：所有元素，只参照原点我如果用了绝对定位：那么我要设置元素 上下左右四个方向的位置用 top bottom left right 这四个属性来设置。
//绝对定位
<body>
<button type="button" style="position:absolute;left:10px;top:19px;bottom: ;">第一个按钮</button>
<button type="button" style="position:absolute;left:20px;">第二个按钮</button>
<button type="button" style="position:absolute;left:40px;">第三个按钮</button>
//相对定位
<button type="button" style="position:relative;margin-left: 100px;margin-top: 100px;">第一个按钮</button>
<button type="button" style="position:relative;margin-left: 50px;">第二个按钮</button>
<button type="button" style="position:relative;margin-left: 20px;">第三个按钮</button>
</body>
- 框架
框架标签，可以将一个页面，切割成不同的独立的板块，通常用于页面布局，框架标签不能和body标签共存。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>框架标签</title>
</head>
<frameset rows="20%,*" framespacing="10">
<frame src="top.html" noresize="noresize">
<frameset cols="20%,*">
<frame src="left.html" noresize="noresize" >
<frame src="right.html" name="right_body" noresize="noresize" scrolling="no">
</frameset>
</frameset>
</html>
1、frameset
- 属性
①border
设置框架的边框粗细。
②bordercolor
设置框架的边框颜色。
③frameborder
设置是否显示框架边框。设定值只有0、1；0 表示不要边框，1 表示要显示边框。
④cols纵向分割页面。其数值表示方法有三种：30%、30（或者30px）、数值的个数代表分成的视窗数目且数值之间用”,”隔开。“30%”表示该框架区域占全部浏览器页面区域的30%；“30”表示该区域横向宽度为30像素，表示该区域占用余下页面空间。例如：cols=25%,200,* 表示将页面分为三部分，左面部分占页面30%，中间横向宽度为200像素，页面余下的作为右面部分。
⑤rows
横向分割页面。数值表示方法与意义与cols相同。
⑥framespacing
设置框架与框架间的保留的空白距离。 - 用例
2、frame
- 属性
①name
设置框架名称。此为必须设置的属性。
②src
设置此框架要显示的网页名称或路径。此为必须设置的属性。
③scrolling
设置是否要显示滚动条。设定值为auto, yes, no。
④bordercolor
设置框架的边框颜色。
⑤frameborder
设置是否显示框架边框。设定值只有0、1；0 表示不要边框，1 表示要显示边框。
⑥noresize
设置框架大小是否能手动调节。
⑦marginwidth
设置框架边界和其中内容之间的宽度。
⑧marginhight
设置框架边界和其中内容之间的高度。
⑨width
设置框架宽度。
⑩height
设置框架高度。
3、iframe
是浮动的框架（frame），其常用属性与frame类似，其他的主要有以下（相同的就不列举了） - 属性
①align
设置垂直或水平对齐方式
②allowTransparency
设置或获取对象是否可为透明。
- div标签
div 我们称之为一个块表标签，或者说层标签，他是一个非常纯净的块标签，所谓的纯净，就是这个标签，没有自带任何样式，没宽，没有高度，没有背景颜色。
div因为他 不带任何样式，所以我们就通过他跟CSS配合，来对他所包裹的内容，进行样式的控制
——块标签：这个标签的宽度默认会占据一整行 h1 ul div
——行标签：这个标签的宽度，不会占据一整行，内容有多宽他就有多宽 font b s u a
——span 他是一个非常纯净的行标签，没有自带任何样式，没宽，没有高度，没有背景颜色。
<body>
<div id="">
abc
</div>
<span>
从前有座山
</span>
<span>
山上有棵树
</span>
<span>
树上有什么呢
</body>
- 多媒体标签
<body>
<embed src="mp3/apple.mp3" loop="true" autostart="true"></embed>
<audio src="mp4/monkey.mp4" controls="controls"></audio>
<video src="mp4/monkey.mp4" width="320" height="240" controls="controls">
</video>
</body>
- 文本
| 文本属性 | 属性 | 值 |
|---|---|---|
| 设置文本颜色 | color | color |
| 设置文本方向 | letter-spacing | ltr 、rtl |
| 设置字符间距 | text-align | normal、 length |
| 向文本添加修饰 | text-decoration | none |
| 缩进文本中的首行 | text-indent | length% |
- 边框
| 边框 | 属性 | 值 |
|---|---|---|
| 简写设置四边样框 | border | border-width 、border-width 、border-color |
| 设置四个边框的颜色，可以设置一到四个 | border-color | color |
| 设置四个边框的样式，可以设置一到四个 | border-style | none、 hidden、 dotted、 dashed 、solid double 、groov、 ridge、 inset、 outset |
| 设置四个边框的宽度，可以设置一到四个 | border-width | thin、 medium、 thick、 length |
| 简写底框属性 | border-bottom | border-bottom-width border-style border-color |
| 设置底框的颜色 | border-bottom-scolor | border-color |
| 设置底框的样式 | border-bottom-style | border-style |
| 设置底框的宽度 | border-bottom-width | thin、 medium、 thick 、length |
- 边距
| 属性 | 值 | |
|---|---|---|
| 设置四边边距 | margin | margin-top、 margin-bottom、 margin-left 、margin-right |
| 设置元素的上边距 | margin-top | auto length % |
| 设置元素的下边距 | margin-bottom | auto length % |
| 设置元素的左边距 | margin-left | auto length % |
| 设置元素的右边距 | margin-right | auto length % |
- 单元格填充
| 属性 | 值 | |
|---|---|---|
| 简写 | padding | padding-top、 padding-right、 padding-bottom 、padding-left |
| 设置元素顶端的填充 | padding-top | length % |
| 设置元素底端的填充 | padding-bottom | length % |
| 设置元素左端的填充 | padding-left | length % |
| 设置元素右端的填充 | padding-right | length % |
- 尺寸属性
| 属性 | 值 | |
|---|---|---|
| 设置行间距 | line-height | normal number length % |
| 设置元素的最大高度 | max-height | none length % |
| 设置元素的最小高度 | min-height | length % |
| 设置元素的最大宽度 | max-width | none length % |
| 设置元素的最小宽度 | min-width | length % |
- 定位属性
| 属性 | 值 | |
|---|---|---|
| 设置元素的形状。元素被剪入这个形状之中，然后被显示出来 | clip | shape auto |
| 设置当元素内容溢出其区域时如何对内容进行管理 | overflow | visible hidden scroll auto |
| 将元素放置于静态、相对、绝对或固定的位置 | position | static relative absolute fixed |
| 设置元素的垂直排列 | vertical-align | baseline sub super top text-top middle bottom text-bottom length % |
| 设置元素的堆叠顺序 | z-index | auto number |
三、div+css布局
（一）显示隐藏层
visibility:hidden 隐藏 他隐藏后，这个块标签，他占的位置还在 display:none 隐藏后占的位置就不在了visible 显示
<body>
<div id="" style="width: 200px;height: 200px;background: yellow;float:left;visibility:hidden">
</div>
<div id="" style="width: 200px;height: 200px;background: red;float:left;">
</div>
<div id="" style="width: 200px;height: 200px;background:blue;float:left;">
</div>
//display:block 显示为块 none 隐藏 inline
<div id="" style="width: 200px;height: 200px;background: yellow;float: left;margin-left:10%;">
</div>
<div id="" style="width: 200px;height: 200px;background: red;float: left;margin-left:10%;display:none;">
</div>
<div id="" style="width: 200px;height: 200px;background:blue;float: left;margin-left:10%;display:block">
</div>
</body>
（二）行标签和块标签
块标签；在设置上下左右的间距时，等能够起作用
行标签：设置左右间距，起作用，但是设置上下间距不起作用
display:none 隐藏这个标签
inline 可以将块标签转成行标签
block:可以将行标签转成块标签
inline-block; 可以让行标签设置上下间距
<body>
<h1 style="display: inline;">这是一个块标签</h1>
<b style="display: block;">这是一个行标签</b>
<b style="display:inline-block;">这是一个行标签</b>
<div id="" style="width: 200px;height: 200px;background: yellow;margin-left: 100px;margin-top: 100px;">
</div>
<div id="" style="width: 200px;height: 200px;background: red;;margin-left: 100px;margin-top: 100px;">
</div>
<b style="margin-left: 100px;margin-top:200px;display:inline-block;">这是一个行标签</b>
<b style="margin-left: 100px;margin-top:200px;">这是一个行标签</b>
</body>
（三）层的浮动
<body>
<!-- div 层的浮动 float left right -->
<div id="" style="width: 200px;height: 200px;background: yellow;float: left;margin-left:10%;">
</div>
<div id="" style="width: 200px;height: 200px;background: red;float: left;margin-left:10%;">
</div>
<div id="" style="width: 200px;height: 200px;background:blue;float: left;margin-left:10%;">
</div>
<!-- 定义一个空层 清除浮动，清除后就不会影响下面的层 -->
<div id="" style="clear:left">
</div>
<div id="" style="width: 200px;height: 200px;background:green;">
</div>
<div id="" style="width: 200px;height: 200px;background: yellow;float:right;">
</div>
<div id="" style="width: 200px;height: 200px;background: red;float:right;margin-right:20px ;">
</div>
<div id="" style="width: 200px;height: 200px;background:blue;float:right;margin-right:20px ;">
</div>
<!-- 定义一个空层 清除浮动，清除后就不会影响下面的层 -->
<div id="" style="clear:left">
</body>
（四）页面布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#bt2:hover {
font-size: 25px;
box-shadow: 0px 0px 10px yellow;
}
</style>
</head>
<body style="margin-left:5%;margin-right: 5%;">
<div style="width: 100%;height: 500px;border: 1px black solid;background-image: url(img/girl.jpg);background-size: 100% 100%;">
</div>
<div style="width: 100%;height:80px;border: 1px black solid;margin-top: 5px;">
<button type="button" style="width:120px;height:60px ;margin-top: 10px;margin-left:10%;background: green;border-style:none ;border-radius:8px ;color: white;font-size: 20px;box-shadow:0px 0px 10px aqua;">进入首页</button>
<button id="bt2" type="button" style="width:120px;height:60px ;margin-top: 10px;margin-left: 10%;background: green;border-style:none ;border-radius:8px ;color: white;font-size: 20px;">进入首页</button>
<button type="button" style="width:120px;height:60px ;margin-top: 10px;margin-left:10%;background: green;border-style:none ;border-radius:8px ;color: white;font-size: 20px;">进入首页</button>
<button type="button" style="width:120px;height:60px ;margin-top: 10px;margin-left: 10%;background: green;border-style:none ;border-radius:8px ;color: white;font-size: 20px;">进入首页</button>
<button type="button" style="width:120px;height:60px ;margin-top: 10px;margin-left: 10%;background: green;border-style:none ;border-radius:8px ;color: white;font-size: 20px;">进入首页</button>
</div>
<div id="" style="width: 100%;height:600px;border: 0px black solid;margin-top: 5px;">
<div style="width:20%;height:600px;float: left;border: 1px black solid;">
</div>
<div style="width:55%;height:600px;float: left;border: 1px black solid;margin-left:30px;">
</div>
<div style="width:20%;height:600px;float:right;border: 1px black solid;margin-left:10px;margin-right: -2px;">
</div>
</div>
<div style="width: 100%;height: 300px;border: 1px black solid;margin-top: 10px;">
横幅
</div>
</body>
</html>
<body style="margin-left:20%;margin-right: 20%;">
<div id="" style="margin:auto;height:1000px;border: 0px black solid;">
<div id="" style="height: 300px;border: 0px black solid;">
<div id="" style="width:70%;height: 300px;border: 1px black solid;float:left">
<table border="0">
<tr>
<td><b>自我评价</b></td>
</tr>
<tr>
<td>
自我评价：本人性格开朗、稳重、有活力，待人热情、真诚；
工作认真负责，积极主动，能吃苦耐劳，用于承受压力，勇于创新；
有很强的组织能力和团队协作精神，具有较强的适应能力；
纪律性强，工作积极配合；意志坚强，具有较强的无私奉献精神。
</td>
</tr>
</table>
</div>
<div id="" style="width:25%; height: 300px;border: 1px black solid;float:right;background-image:url(img/timg.jpg) ;background-size:100% 100% ;">
</div>
</div>
<!-- 下面大的 -->
<div id="" style="height:600px;border: 0px black solid;margin-top: 20px;">
<div id="" style="width:70%;height:600px;border: 0px black solid;float:left">
<div id="" style="width:100%;height:48%;border: 1px black solid;">
</div>
<div id="" style="width:100%;height:48%;border: 1px black solid;margin-top: 3%;">
</div>
</div>
<div id="" style="width:25%;height:600px;border: 0px black solid;float:right">
<div id="" style="width:100%;height:28%;border: 1px black solid;">
</div>
<div id="" style="width:100%;height:20%;border: 1px black solid;margin-top:8%;">
</div>
<div id="" style="width:100%;height:20%;border: 1px black solid;margin-top:12%;">
</div>
<div id="" style="width:100%;height:20%;border: 1px black solid;margin-top:8%;">
</div>
</div>
</div>
</div>
</body>
（五）内部样式抽取
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 在head表内部，添加一个 style标签，然后在style标签内部，写css代码，但是得配合选择器来用
选择器：一种语法，用来选择你要控制的一个或多个标签 id选取器：通过id值来选择单个标签 -->
<style type="text/css">
#div1{
/*通过id选择器选择到这个标签，在这里就可以写css代码来控制这个标签的样式*/
width: 200px;
height: 200px;
background: yellow;
font-size: 19pt;
}
#div2{
width: 300px;
height: 300px;
background: red;
font-size: 15pt;
}
#div3{
width: 300px;
height: 300px;
background: blue;
font-size: 15pt;
}
</style>
</head>
<body>
<!-- 每个标签都会有一个id属性 注意的是 每个标签的id属性值是唯一的，不要重复 -->
<div id="div1">
我想要带你去浪漫的土耳其，还要一起去东京和巴黎
</div>
<div id="div2">
我想要带你去浪漫的土耳其，还要一起去东京和巴黎
</div>
<div id="div3">
我想要带你去浪漫的土耳其，还要一起去东京和巴黎
</div>
</body>
</html>
（六）样式继承
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
color: red;
}
</style>
</head>
<body>
<div id="" style="color: #00FFFF;">
<h1>abc</h1>
</div>
<div id="">
<h1>abc</h1>
</div>
<div id="">
<h1>abc</h1>
</div>
</body>
</html>
四、盒子模型
<html>
<head>
<meta charset="utf-8">
<title>盒子模型</title>
<style type="text/css">
div{
border: 1px black solid;
}
#box{
height:400px;
width:100%;
/*我们把外层设置为一个盒子*/
display: flex;
/*盒子里面的子层排列方向 row 横向排列 column 纵向排列*/
flex-direction:row;
justify-content:center;/*盒子中的子层的对齐方式 左中右*/
flex-wrap:nowrap;/*当所有的子层，高度或宽度超过盒子的高度或宽度后是否要自动换行*/
}
#box>div{
/*里面的子层 上下左右间距自动适配*/
/* margin:auto; */
/* margin-left: auto;
margin-right:auto ;
margin-top: 20px; */
margin-top:0px;
height: 150px;
width: 150px;
/* margin-left: 10px; */
}
#div1{
display: flex;
justify-content:center;/*盒子中的子层的对齐方式 左中右*/
}
#div1>div{
width:50px;
height: 50px;
margin: auto;
}
</style>
</head>
<body>
<!-- div+css 布局 -->
<div id="box">
<!-- order:5 这个属性可以改变，子层的排列顺序 -->
<div id="div1" style="order:1;">
<div id="son1">
</div>
<div id="son2">
</div>
</div>
<div id="div2" style="order:2;">
2
</div>
<div id="div3" style="order:3;">
3
</div>
<div id="div4" style="order:4;">
4
</div>
<div id="div5" style="order:5;">
5
</div>
</div>
</body>
</html>
五、浏览器兼容问题
一些css有的浏览器支持不是很好，为了让浏览器尝试去支持，我们需要给css加一些前缀去适配不同的浏览器
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 400px;
-ms-filter: grayscale(100%);
-ms-filter: gray;
filter: grayscale(100%);
filter: gray;
background-image: url(img/girl1.jpg);
background-size: 100% 100%;
}
</style>
</head>
<body>
<div id="">
</div>
</body>
</html>
版权声明：本文为panda_burn原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。