<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体</title>
<style>
p {
/*设置字体大小*/
font-size: 20px;
/*设置字体*/
font-family: "宋体","微软雅黑";
/*字体加粗*/
font-weight: 700;
/*字体倾斜*/
font-style: italic;/*normal 取消样式*/
/*字体颜色 预定义颜色:red;十六进制颜色:#FF0000;RGB颜色:rgb(255,255,255) */
color: #aa00cc;/* #aa00cc可以简写为#a0c 两两相同才可以*/
/*设置行高*/
line-height: 20px;
/*设置文字对齐方式*/
text-align: center;
/*段落首行缩进*/
text-indent: 2em;
/*设置字体装饰 underline下划线 overline上划线 line-through删除线 none无装饰 */
text-decoration: underline;
}
h1 {
/*字体连写，顺序不能交换，size/family不能省略*/
/*font: font-style font-weight font-size font-family;*/
font: 25px "宋体";
}
</style>
</head>
<body>
<p>字体</p>
<h1>标题</h1>
</body>
</html>
元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">ｈ
<title>块级元素</title>
<style>
/* 块级元素 block-level
总是从新行开始
高度，行高，外边距都可以控制
宽度默认是容器的１００％
可以容纳内联元素和其他元素
常见的块元素：<h> <p> <div> <ul> <ol>等等*/
/* 行类元素 inline-level
和相邻的行内元素在一行上
高宽无效，但水平方向的padding和margin可以设置，垂直方向无效
默认宽度为他本身内容的宽度
常见的行内样式有：<a> <strong> <em> <s>等等 */
/*行内块元素 inline-block
和相邻行内元素在一行上，但之间有空白缝隙
默认宽度为他本身内容的宽度
宽度，高度，外边距都可以控制
常见的行内块元素有：<img> <input> <td> */
/*可以将行内元素和行内块元素看作文字对待*/
div {
/*将块元素转换为行内元素*/
display: inline;
}
span {
/*将行内元素转换为块元素*/
display: block;
}
a {
/*将行内元素转换为行内块元素*/
display: inline-block;
}
</style>
</head>
<body>
<div></div>
<span></span>
<a href="#"></a>
</body>
</html>
CSS的特性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">ｈ
<title>继承性</title>
<style>
/*一般情况下，如果出现样式冲突，会按照CSS的书写顺序，已最后的样式为准
样式冲突，遵循的原则为就近原则，那个样式离结构进，就执行那个样式,就近原则
样式不会冲突，不会层叠
color样式冲突了，就执行最近的一个color，font-size没有冲突，正常执行 */
p {
color: red;
font-size: 20px;
}
p {
color: blue;
}
</style>
</head>
<body>
<p>段落</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">ｈ
<title>继承性</title>
<style>
/*子标签会继承父标签的某些属性，比如：字体颜色和字号*/
.xiu {
color: red;
}
</style>
</head>
<body>
<div class="xiu">
<p>段落</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">ｈ
<title>优先级</title>
<style>
/*
继承或者*的贡献值 0000
每个元素的贡献值 0001
每个类,伪类的贡献值 0010
每个ID的贡献值 0100
行内样式的贡献值 1000
每个!important的贡献值 无穷大
贡献值越大,越先执行
贡献值可以叠加,比如:
div ul li {} -- 0003
.xiu ul li {} -- 0012
#xiu ul li {} -- 0102
*/
.xiu {
color: red!important;/*最先执行*/
}
.xiu {
color: blue;
}
</style>
</head>
<body>
<div class="xiu">
<p>段落</p>
</div>
</body>
</html>
背景图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">ｈ
<title>背景图片</title>
<style>
body {
/*添加背景颜色*/
background-color: red;
/*添加背景图片*/
background-image: url(1.png);
/*no-repeat图片不平铺 repeat-x水平平铺 repeat-y垂直平铺*/
background-repeat: no-repeat;
/*设置图片位置 top上 bottom下 left左 right右 也可以写数值x,y值 */
background-position: right bottom;/*如果只写一个,剩下一个为居中center*/
/*设置图片滚动 fixed固定 scroll默认滚动而滚动*/
background-attachment: fixed;
/*设置图片透明度*/
background: rgba(0,0,0,0.5);
/*background连写方式*/
/*background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置*/
}
</style>
</head>
<body>
</body>
</html>
边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框</title>
<style>
table {
width: 100px;
height: 100px;
/*设置边框宽度*/
/*border-width: 1px;*/
/*设置边框样式 none无边框 solid实线边框 dashed虚线 */
/*border-style: dashed;*/
/*设置边框颜色*/
/*border-color: red;*/
/*设置上边框*/
/*border-top: 1px solid red;*/
/*border连写*/
border: 1px solid red;
}
td {
border: 1px solid blue;
}
table,td {
/*合并单元格相邻边框*/
border-collapse: collapse;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0">
<tr>
<td>修抗</td>
<td>修抗</td>
</tr>
<tr>
<td>牛皮</td>
<td>牛皮</td>
</tr>
</table>
</body>
</html>
边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内边距与外边距</title>
<style>
/* padding 用于设置内边距:自身的边框与自身内部内容的距离
margin 用于设置外边距:自身边框与相邻边框的距离
margin与padding的语法一样:
padding-top 上内边距
padding-right 右内边距
padding-bottom 下内边距
padding-left 左内边距
padding: 3px; 上下左右都是3px
padding: 3px 4px; 上下为3px,左右为4px
padding: 2px 3px 4px;上2px,左右为3px,下为4px
padding: 1px 2px 3px 4px; 上1px,左2px,下3px,右4px
padding不能为负数值
padding在块级元素下,上下左右可以随意设置,会撑开盒子,一般要减去padding设置的高度宽度
padding在行内元素只有左右边距有效果,上下不识别
margin: 0 auto;设置水平居中,auto自动 只对块元素起作用
margin在块级元素下,上下左右可以随意设置
margin在行内元素只有左右边距有效果,上下不识别 */
</style>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*外边距合并*/
.xiu {
width: 100px;
height: 100px;
background-color: red;
margin-bottom: 150px;
}
.kang {
width: 100px;
height: 100px;
background-color: blue;
margin-top: 100px;/*最终两个盒子的距离已最大的那个为准*/
}
</style>
</head>
<body>
<div class="xiu"></div>
<div class="kang"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>嵌套块元素垂直外边距合并</title>
<style>
.xiu {
width: 400px;
height: 400px;
background-color: red;
border:1px solid red;
}
.kang {
width: 100px;
height: 100px;
background-color: blue;
/*嵌套块元素垂直外边距合并
如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并
大概意思就是：
父元素有个margin-top，子元素有一个margin-top 会合并为最大的margin-top
即使父元素的上外边距为0
解决方法有两种：
1.为父元素定义一个1px的外边框或上内边框 border:1px solid red;/padding-top: 1px;
2.为父元素添加overflow:hidden;
*/
margin-top: 100px;
}
</style>
</head>
<body>
<div class="xiu">
<div class="kang"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边距问题3</title>
<style>
.xiu {
/*宽度width/高度height仅适用于块级元素，对行内元素无效(img/input除外)*/
width: 300px;
height: 300px;
background-color: red;
}
.kang {
height: 100px;
background-color: blue;
/*如果子元素没有设置宽度，会继承父元素的宽度，而padding-left则不会撑开盒子*/
padding-left: 20px;
}
</style>
</head>
<body>
<div class="xiu">
<div class="kang">修抗</div>
</div>
</body>
</html>
圆角边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圆角边框</title>
<style>
.xiu {
width: 100px;
height: 100px;
border: 1px solid red;
/*设置边框圆角，可以设置百分比*/
border-radius: 50px;
/*border-radius: 50px 50px 50px 50px;*/
}
</style>
</head>
<body>
<div class="xiu"></div>
</body>
</html>
盒子阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子阴影</title>
<style>
div {
width: 100px;
height: 100px;
/*设置盒子阴影
box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内部阴影inset; */
box-shadow: 2px 2px 2px 2px red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style>
/*浮动会脱离标准流，不占位置 一般会给浮动添加一个父元素设置高度来占位置
浮动只会影响后面的标准流，不会影响前面的标准流
浮动不会超过内边距，不会超出父边框
浮动只有左右浮动 left左 right右 none默认
如果一个父盒子中一个子盒子浮动了，则其他子盒子都应该浮动，这样才能一行显示
浮动可以让元素变成行内块元素
如果已经给行内元素添加了浮动，此时不需要转换这个元素也可以有宽高了
浮动的作用: 让多个块元素在一行显示
清除浮动：
子盒子是标准流会撑开父盒子的高度(没有设置盒子高度)
子盒子浮动就不会撑开父盒子的高度(没有设置盒子高度)
清除动主要为了解决父元素因为子元素浮动引起内部高度为0的问题
不是所有情况都需要清除浮动，在影响布局的情况下才清除浮动
清除浮动的方法：
1.额外标签法: 在浮动最后添加一个空标签
<div style="clear:both"></div>
2.父级添加overflow属性方法
overflow: hidden;
3.使用after伪元素清除浮动,额外标签法的升级版
.clearfix:after {
content:"";
display: bloak;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1; 清除ie7以下的浏览器
}
*/
.xiu {
width: 100px;
height: 100px;
background-color: red;
/*左浮动*/
float: left;
}
</style>
</head>
<body>
<div class="xiu clearfix"></div>
</body>
</html>
定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位</title>
<style>
/*position
定位属性：
static：静态定位：所有元素的默认定位方式：作用清除定位
relative：相对定位：已自己左上角的位置移动
absolute：绝对定位：根据当前最近父元素设置的定位而定位，不占位置跟浮动一样
fixed：固定定位：随浏览器滚动而滚动 */
/*z-index: 1;
设置层叠等级属性
默认属性值为0，取值越大，定位元素在层叠元素中越居上
如果取值相同，则后来居上，没有单位
只有定位的盒子才有该属性 */
/*设置绝对定位居中的盒子*/
.xiu {
width: 200px;
height: 200px;
border: 1px solid blue;
/*设置相对定位*/
position: absolute;
/*将盒子向右移动50%*/
left: 50%;
/*在将盒子向左移动一半的距离*/
margin-left: -100px;
/*默认值*/
z-index: 0;
}
</style>
</head>
<body>
<div class="xiu"></div>
</body>
</html>
显示或隐藏隐藏元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示或隐藏元素</title>
<style>
.xiu {
width: 100px;
height: 100px;
border: 1px solid red;
/*hidden隐藏元素,保留位置 visible显示元素*/
/*visibility: hidden;*/
/*none隐藏元素,不保留位置 block显示元素*/
display: block;/*除了转换为块元素,还有可以显示元素*/
/*visible默认不剪切内容也不添加滚动条 auto超出部分显示滚动条 hidden隐藏超出内容 scroll总是显示滚动条*/
overflow: hidden;
/*设置文本换行 nowrap禁止文本换行 normal默认可以换行*/
white-space: nowrap;
/*将超出部分用省略号代替 要和overflow/white-space一同使用 */
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="xiu"></div>
</body>
</html>
用户样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户样式</title>
<style>
div {
/*pointer小手样式 text选择样式 move十字架样式 default默认鼠标样式*/
cursor: pointer;
}
input {
/*取消边框轮廓线的做法 轮廓线就是点击输入框默认显示的蓝色边框*/
outline: none;
/*在输入框添加图片*/
background-image: url(1.png);
/*设置输入框边框*/
border: 1px solid red;
}
textarea {
/*禁止拖动文本框*/
resize: none;
}
img{
/*设置垂直对齐 baseline默认基线对齐 middle垂直居中 top顶部对齐
因为图片是默认以基线对齐,所以图片底部有一点缝隙,取消基线对齐或改成块元素可以解决该问题*/
vertical-align: baseline;/*行内块元素才有效果*/
}
</style>
</head>
<body>
<div>修抗</div>
<input type="text"/>
<textarea name="" id="" cols="30" rows="10"></textarea>
<img src="1.png" alt="">
</body>
</html>
精灵图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>精灵图</title>
<style>
/*精灵图的作用
处理一些零碎的背景图像集中在一张大图上,然后将大图应用到网页上
为了有效减少服务器接收和发送请求的次数,提高页面的加载速度
*/
div {
width: 100px;
height: 100px;
background: url(1.png) no-repeat -2px -4px;
}
/*滑动门*/
a {
height: 30px;
display: inline-block;
background: url(1.png) no-repeat;
padding-left: 15px;
}
span {
display: inline-block;
background: url(1.png) no-repeat right;
padding-right: 15px;
}
</style>
</head>
<body>
<div></div>
<a href="#">
<span>商业</span>
</a>
</body>
</html>
字体图标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体图标</title>
<style>
/*字体图标的好处:
可以做出图片一样的事情,改变透明度,旋转度...
但其本质是文字,可以任意改变颜色,产生阴影...
本身体积更小,但携带的信息并没有消减
没有兼容问题
字体图标下载地址:
国内阿里巴巴图标: http://www.iconfont.cn
国外的字体图标网站: https://icomoon.io/app
将图片转换为字体图标:
图片后缀名为svg,在https://icomoon.io/app 网页中点击 import Icons 上传然后在选中下载就行了
追加字体图片:
以前有字体图标,然后需要在加一个图标在https://icomoon.io/app 网页中点击 import Icons 上传 selection.json文件上传然后在选中下载就行了
*/
/*引用字体图标到网页中*/
/*第一步,引用字体文件夹fonts*/
@font-face {/*声明字体,引用字体*/
font-family: 'icomoon'; /*自己取的名字*/
src: url('fonts/icomoon.eot?cj3rhu');/*引用fonts文件夹*/
src: url('fonts/icomoon.eot?cj3rhu#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?cj3rhu') format('truetype'),
url('fonts/icomoon.woff?cj3rhu') format('woff'),
url('fonts/icomoon.svg?cj3rhu#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
span {
/*第三步:声明字体*/
font-family: "icomoon";
}
</style>
</head>
<body>
<!-- 第二步:在demo.html中选择想要的图标,复制粘贴 -->
<span>?</span>
</body>
</html>
伪元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪元素</title>
<style>
/*选择第一个字*/
/*p::first-letter {
font-size: 30px;
}*/
/*选择第一行字*/
/*p::first-line {
font-size: 30px;
}*/
/*选择鼠标选中的文字*/
/*p::selection {
color: red;
}*/
/*在盒子内容前面添加一个伪元素*/
div:before {
/*必须带一个属性content 伪元素 before就是一个行内盒子*/
content: "";
}
/*在盒子内容后面添加一个伪元素*/
div::after {
/*必须带一个属性content 伪元素 before就是一个行内盒子*/
content: "";
}
</style>
</head>
<body>
<p>段落</p>
<div></div>
</body>
</html>
CSS3盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3内减边框</title>
<style>
/*CSS2的模型的盒子大小为width+padding+border
可以通过CSS3的box-sizing:border-box来设置盒子,盒子的大小就是width,也就是说border与padding在width里面*/
.xiu {
width: 300px;
height: 300px;
border: 10px solid red;
padding: 20px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="xiu">修抗</div>
</body>
</html>
过度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过度</title>
<style>
div {
width: 100px;
height: 100px;
border: 1px solid red;
/*transition: 要过度的属性 过度时间 运动曲线(默认ease) 何时开始(默认0s);
如果有多个属性用逗号隔开*/
transition: width 2s ease 0s,height 2s ease 0s;
/*简写为 all所有过度属性
transition: all 2s*/
}
div:hover {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
2D效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2D效果</title>
<style>
/* 2D效果
transfrom */
.xiu{
width: 100px;
height: 100px;
border: 1px solid red;
/*移动盒子 translate(x,y)
水平移动盒子 translateX(x)
垂直移动盒子 translateY(y)*/
transform: translate(100px,100px);/*如果只有x，y默认为0*/
}
.kang{
width: 100px;
height: 100px;
border: 1px solid red;
/*放大缩小 scale(x,y)
水平放大缩小 scaleX(x)
垂直放大缩小 scaleY(y)*/
transform: scale(1,2);/*如果只有x，y默认等比例缩放*/
}
.sear{
width: 100px;
height: 100px;
border: 1px solid red;
/*旋转度数 rotate(deg)*/
transform: rotate(10deg);
/*设置旋转的原点 左下角*/
transform-origin: right bottom;
}
.niu{
width: 100px;
height: 100px;
border: 1px solid red;
/*倾斜度数 skew(deg)*/
transform: skew(10deg);
}
.niu{
width: 100px;
height: 100px;
border: 1px solid red;
/*也可以设置多个效果用空格隔开*/
transform: skew(10deg) rotate(10deg);
}
</style>
</head>
<body>
<div class="xiu"></div>
<div class="kang"></div>
<div class="sear"></div>
<div class="niu"></div>
<div class="niu1"></div>
</body>
</html>
CSS动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS动画</title>
<style>
div {
width: 100px;
height: 100px;
border: 1px solid red;
/*animation：动画名称 花费时间 运动曲线(默认ease) 何时开始(默认0) 播放次数(默认1/infinite无限) 是否逆向播放(默认normal/alternate逆向播放);*/
animation: xiu 3s;
}
/*声明动画*/
@keyframes xiu {
0% {/*开始*/
width: 100px;
}
50% {
width: 150px;
}
100% {/*结束*/
width: 200px;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
flex布局
img {
transform: translate(21px,23px);
}
