单色图标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入 -->
<link rel="stylesheet" href="./font_9jsghj9h2i/iconfont.css">
<style>
.iconfont{
font-size: 28px;
color: pink;
}
</style>
</head>
<body>
<i class="iconfont icon-lipin"></i>
</body>
</html>
多色图标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://at.alicdn.com/t/c/font_4291319_ps0ppebkr4.js"></script>
<!-- 本地引入 -->
</head>
<body>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-a-QQMusic"></use>
</svg>
</body>
</html>
文本修饰
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
width: 100px;
height: 100px;
border: 1px solid red;
/* text-decoration 给文字设置上划线overline 下划线underline 删除线 line-through none 默认 */
text-decoration: none;
/* 设置文本水平对齐方式 text-align left center right justify */
text-align: justify;
/* 垂直对齐方式 line-height 垂直居中 line-height与height一致*/
line-height: 100px;
}
p{
/* 设置文本缩进 text-indent */
text-indent: 2em;
color: yellow;
}
section{
/* 设置文字形变 text-transform capitalize 首字母大写 uppercase 转为大写 lowercase 转为小写 full-width 等宽字体*/
text-transform: capitalize;
/* 设置文字阴影 h-shadow(水平位置) v-shadow(垂直位置) blur(模糊距离) color(颜色) */
text-shadow: 5px 5px 5px red;
}
</style>
<body>
<div>我是块级元素</div>
<p>
段落标签段落标签段落标签段落标签段落标签段落标签段落标签<br>
段落标签段落标签段落标签段落标签段落标签段落标签段落标签<br>
段落标签段落标签段落标签段落标签段落标签段落标签段落标签
</p>
<section>hello css</section>
<section>HELLO CSS</section>
</body>
</html>
列表样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
li{
/* 设置列表标志项 */
list-style-type: disc;
/* 设置列表标志项的文职 */
list-style-position: inside;
/* 自定义列表标志项 */
list-style-image: url(./images/01.png);
/* 简写属性 list-style(type url position) */
list-style: circle url(./images/03.png) inside;
}
</style>
<body>
<ul>
<li>列表标签</li>
<li>列表标签</li>
<li>列表标签</li>
</ul>
</body>
</html>
display属性
<!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{
width: 200px;
height: 200px;
border: 1px solid red;
/* 将当前元素设置行内元素 inline 行内块元素 inline-block */
display: inline-block;
}
span{
border: 1px solid red;
display: inline-block;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div>块级元素</div>
<span>行内元素</span><span>行内元素</span>
<div>块级元素</div>
</body>
</html>
css隐藏样式
<!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>
/*
隐藏元素方式
1.display:none 隐藏元素 不占据原先在浏览器的空间,绑定事件不生效 会引起浏览器重排 显示:block
2.visiblity:hidden 占据在浏览器的空间,绑定js事件不生效 会引起浏览器重绘 visible显示元素
3.opacity 透明度 0-1 0:完全透明 占据浏览器空间,绑定js事件生效 一般引起重绘(一个图层,一个标签)
*/
div{
width: 100px;
height: 100px;
background-color: red;
/* display: none; */
visibility: hidden;
/* opacity: 0; */
}
</style>
</head>
<body>
<div></div>
<script>
var div=document.querySelector("div");
//给div绑定单击时间
div.onclick=function(){
alert("hello css")
}
</script>
</body>
</html>
overflow
<!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>
.parent{
width: 100px;
height: 100px;
background-color: red;
/*
对溢出父元素的处理 overflow
hidden:对超出内容进行隐藏
auto:自适应
scroll:滚动条
*/
overflow: auto;
/*
游标 cursor
*/
cursor: alias;
}
</style>
</head>
<body>
<div class="parent">
<div>块级元素</div>
<div>块级元素</div>
<div>块级元素</div>
<div>块级元素</div>
<div>块级元素</div>
<div>块级元素</div>
<div>块级元素</div>
<div>块级元素</div>
<div>块级元素</div>
<div>块级元素</div>
<div>块级元素</div>
<div>块级元素</div>
<div>块级元素</div>
<div>块级元素</div>
<div>块级元素</div>
<div>块级元素</div>
<div>块级元素</div>
<div>块级元素</div>
<div>块级元素</div>
<div>块级元素</div>
<div>块级元素</div>
<div>块级元素</div>
<div>块级元素</div>
<div>块级元素</div>
<div>块级元素</div>
<div>块级元素</div>
<div>块级元素</div>
<div>块级元素</div>
<div>块级元素</div>
<div>块级元素</div>
<div>块级元素</div>
<div>块级元素</div>
<div>块级元素</div>
<div>块级元素</div>
<div>块级元素</div>
<div>块级元素</div>
<div>块级元素</div>
<div>块级元素</div>
<div>块级元素</div>
<div>块级元素</div>
<div>块级元素</div>
<div>块级元素</div>
<div>块级元素</div>
<div>块级元素</div>
<div>块级元素</div>
<div>块级元素</div>
<div>块级元素</div>
<div>块级元素</div>
<div>块级元素</div>
<div>块级元素</div>
</div>
</body>
</html>
盒子属性
<!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{
/* 最大宽度 */
max-width: 500px;
/* 最小宽度 */
min-width: 100px;
width: 100px;
height: 100px;
border: 1px solid red;
/* 外边距 盒子和盒子之间的距离 */
/* 上下左右都为10px */
margin: 10px;
/* 上下外边距10px 左右20px */
margin: 10px 20px;
/* 上边距30px 左右20px 下边距50px */
margin: 30px 20px 50px;
/* 上右下左外边距 顺时针 */
margin: 20px 50px 30px 40px;
/* paddind 内边距 元素内容到边框的距离 */
padding: 10px;
}
</style>
</head>
<body>
<div>块级元素</div>
</body>
</html>
盒子模型
<!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>
.contentDiv{
width: 100px;
height: 100px;
margin: 10px 20px 30px;
padding: 13px 27px 32px;
border: 5px solid red;
}
/*
内容盒子计算公式(标准盒子)
宽:内容宽+左右内边距+左右边框 100+27+27+10=164
高:内容高+上下内边距+上下边框 155
所占页面宽:内容宽+左右内边距+左右边框+左右外边距 204
所占页面高:内容高+上下内边距+上下边框+上下外边距 195
*/
.borderDiv{
/* 设置盒模型 box-sizing content-box(内容盒子默认) border-box(边框盒子) */
box-sizing: border-box;
width: 100px;
height: 100px;
border: 3px solid blue;
margin: 17px 28px 39px;
padding: 12px 19px 27px;
}
/*
边框盒子计算公式
宽:内容宽+左右内边距+左右边框 100px
高:内容高+上下内边距+上下边框 100px
所占页面宽:内容宽+左右内边距+左右边框+左右外边距 100px+28px+28px
所占页面高:内容高+上下内边距+上下边框+上下外边距 100px+17px+39px
*/
</style>
</head>
<body>
<div class="contentDiv">内容盒子</div>
<div class="borderDiv">边框盒子</div>
</body>
</html>
CSS选择器 ****
1.标签 id class 后代 子代
2.交集和并集选择器(组合选择器)
3.通用兄弟选择器 相邻兄弟选择器
4.序选择器 伪类选择器 :first-child last-child nth-child
5.动态伪类选择器 link visited hover active
6.属性选择器 p[id='one']
css2以某一个属性开头 [name|='user'] 只能选择以-分割
css2以某一个属性开头 [name^='user']
以某一个属性结尾 [name$='name']
css2 [name~='username'] css3 [name*='u']
7.通配符选择器 普遍选择器 选取所有标签 *
2.CSS三大特性:************
1.继承性 给父元素设置样式 后代元素可以继承
可继承属性:color text- line- font- letter-spacing word-spacing
注意:h1作为子元素时候无法继承font-size 参考自身font-size
a标签作为子元素无法继承color 和 取消下划线
2.层叠性 使用多个选择器给同一个标签设置样式
3.优先级 层叠性冲突问题
内联样式>内部样式/外部样式(就近原则)
!important 不计入权重 优先级最高
style 属性 1000
id选择器 100
类选择器 伪类选择器 属性选择器 10
标签选择器 伪元素选择器 1
input[name='user'] 11
3.文本字体属性
font-size 设置字体大小
font-style 设置字体是否开启斜体 italic normal
font-weight 设置字体是否加粗 lighter/normal bold(700) bolder(900)
font-fmaily 设置字体类型
webfont
@font-face
简写:font:style weight size family; size和family不可以省略
4.字体图标库使用
单色图标库
将选中图标下载到本地
1.使用link标签引入iconfont.css
2.使用i标签设置类名 class='iconfont 图标类名'
5.重排(回流)和重绘 *******************
重排:当一个dom元素几何位置发生改变,引起浏览器重新排列,
将其正确显示在页面的过程就叫重排,也叫回流。
重绘:当一个dom元素的外观发生改变,并不影响排列布局,引起浏览器重新绘制的过程就叫重绘。
重排和重绘会影响浏览器性能(占据cpu)造成页面卡顿,ui迟缓。
重排一定会触发重绘,重绘不一定会触发重排!
造成重排场景:dom元素增加 删除 插入
重绘:visiblity
6.css隐藏元素方式 ******
1.display:none 不占据原先在浏览器空间 绑定js事件不生效 会引起浏览器重排
2.visiblity:hidden 占据原先在浏览器空间 绑定js事件不生效 会引起浏览器重绘
3.opacity:0 占据原先在浏览器空间 绑定js事件生效 一般会引起浏览器重绘(一个图层)
7.CSS盒模型 *******
1.盒子种类:{
1.内容盒子 w3c盒子 标准盒子
2.边框盒子 IE盒子 怪异盒子
}
2.盒子区别:
内容盒子width height是设置给内容区宽高
边框盒子width height是设置给盒子本身的
计算公式:
{
1.内容盒子 w3c盒子 标准盒子
盒子宽:width+左右内边距+左右边框
盒子高:height+上下内边距+上下边框
所占页面空间宽:盒子宽+左右外边距
所占页面空间高:盒子高+上下外边距
}
{
2.边框盒子 IE盒子 怪异盒子 通过box-sizing设置为border-box
盒子宽:width
盒子高:height
所占页面空间宽:盒子宽+左右外边距
所占页面空间高:盒子高+上下外边距
}