css"/>
精简css
目录
1.什么是CSS
1.什么是CSS
2.发展史
3.快速入门
4.CSS的导入方式
2.选择器
1.基本选择器
2.层次选择器
3.结构伪类选择器
4.属性选择器
3.美化网页元素
1.为什么要美化网页
2.字体样式
3.css文本
1.css单位
2.css颜色
3.文本阴影
4.列表样式
5.背景图像应用及渐变
1.背景图像
2.渐变
6.尺寸
7.对齐
4.盒子模型
1.什么是盒子
2.边框
3.内外边距
4.圆角边框
5.盒子阴影
5.浮动
1.display
2.float
3.对比
6.定位
1.相对定位
2.绝对定位
3.固定定位
4.粘性定位
5.z-index
6.不透明度
7.动画
1.什么是CSS
1.什么是CSS
Cascading Style Sheet 层叠级联样式表
CSS：表现（美化页面），将样式和内容分离开更方便修改样式
字体，颜色，边距，高度。宽度，背景图片，页面定位，页面浮动......
2.发展史
- CSS1.0
- CSS2.0 DIV(块) + CSS，HTML与CSS结构分离的思想，页面变得简单
- CSS2.1 浮动，定位
- CSS3.0 圆角，阴影，动画...... 浏览器兼容性
3.快速入门
style
基本入门
规范：<style> 可以编写css的代码
语法： 选择器{ 声明1; 声明2; 声明3; }每一个声明，使用;(英文的分号)结束
- css的优势：
- 1.内容和表现分离
- 2.网页结构表现统一，可以实现复用
- 3.样式十分的丰富
- 4.建议使用独立于html的css文件
- 5.利用seo，容易被搜索引擎收录！
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
<!-- 引用外部样式表--><link rel="stylesheet" href="css/style.css"><style>@import url("CSS/style.css");</style>
<!--内部样式表
规范，<style> 可以编写css的代码 每一个声明，使用;(英文的分号)结束
语法：选择器{声明1;声明2;声明3;}
--><style>h1{color: red;}</style>
</head>
<body></body>
</html>4.CSS的导入方式
- 多重样式可以层叠，可以覆盖 ，
- 样式的优先级按照就近原则，行内样式>内嵌样式>链接样式>浏览器默认样式
- 行内样式（在内容行直接写css样式style = ....）
- 内嵌样式（<style type= "text/css"><style>放到head标签部分，即使有公共css代码，每个页面都要定义的 **适合文件少，css代码不多的情况**）
- 外部式样式表(<link rel="stylesheet"href="css/style.css"/>放在head标签部分，可以引用多个外部样式表)
- 浏览器默认样式
- 外部样式两种写法
- 链接式
- <link rel="stylesheet"href="css/style.css"/>
- 导入式
- <style>@import url("css/style.css");</style>
- 两种方式没有优先级，谁最后写，就覆盖掉前面的写法
- 首页link和import语法结构不同，前者<link>是html标签，只能放入html源码中使用，后者可以看作为css样式，作用是引入css样式功能，import在thml使用时需要<style type="text/css">标签，同时可以直接"@import url(CSS文件路径地址); '放如Css文件或css代码里引入其它Ccss文件。
本质上两者使用选择区别不大，但为了软件中编辑布局网页html代码，一般使用link较多，也推荐使用link。
- 链接式
2.选择器
作用：选择页面上的某一个或某一类元素
1.基本选择器
- 标签选择器：p、h1.......p{}用于公共选择器，通常用于所有标签出现的地方
- 类选择器：.p1、.p2.......class=“p1”用于一篇文章中，有多个不同段落使用不同样式的情况使用，可以多次使用
- id选择器：#p1、#p2和类别选择器的区别是只能使用一次，全局唯一性
- 优先级：id>class>标签
- css选择器嵌套声明（p span{}是声明的p标签里span标签里的内容）
- css选择器集体声明（h1，p{}是声明h1和p标签里的内容）
- css选择器全局声明（*{}是里面设定的样式都全局引用）
- css选择器混合（多个class选择器可以混用，用空格隔开 id和class可以混用用空格隔开，id选择器不可以多个使用）
2.层次选择器
- 后代选择器：在某个元素后面 祖爷爷 爷爷 爸爸 你 4 3 2 1{}
- 子选择器：一代 爸爸 你 2>1{}
- 相邻(兄弟)选择器 同辈 只有一个 .a+p{}
- 通用(兄弟)选择器 当前选中元素向下的所有兄弟元素 .a~p{}
3.结构伪类选择器
伪类：条件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<style>
<!---->/*ul的第一个子元素*/ul li:first-child{background: green;
}
/* ul的最后一个子元素*/
ul li:last-child{background: red;
}
/*第一步定位:p的父元素(p的第一个作用)第二步定位父元素下的第一个元素(数字的作用)第三步判断如果类型是p成立(p的第二个作用)第四步产生结果改变样式;只有是p才会改变样式*/
p:nth-child(1){background: #474c5e;
}
/*选中父元素下的p元素的第二个类型*/
p:nth-of-type(2){background: #09dc5c;
}
.a111:hover{color: red;
}
</style>
<body>
<h1>666</h1>
<p>1</p>
<p>2</p>
<p>3</p>
<ul><li>li1</li><li>li2</li><li>li3</li>
</ul>
<a href="" class="a111">看这里</a>
</body>
</html>4.属性选择器
- 语法：类型[条件]{方法体}
- 属性名，属性名=属性值(正则表达式)
- =绝对等于
- *=包含这个元素
- ^=以^=后面元素开头的元素
- $=以$=后面元素结尾的元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<style>/*属性名，属性名=属性值(正则表达式)=绝对等于*=包含这个元素^=以^=后面元素开头的元素$=以$=后面元素结尾的元素*/
/* 存在id属性的元素 a[]{}*/a[id]{background: #000;}
/* id=frist的元素*/a[id=first]{background: red;}
/* class中是links的元素*/a[class="links"]{background: yellow;}
/* class中包含links的元素*/a[class*="links"]{background: blue;}
/* 以http为开头的元素*/a[href^=http]{background: pink;}
/* 以cn结尾的元素*/a[href$=cn]{background: green;}
</style>
<body>
<a href="" class="links item first" id="first">1</a>
<a href="" class="links item first">2</a>
<a href="" class="links item">3</a>
<a href="" class="links">4</a>
<a href="#" class="item first">5</a>
<a href="#" class="item">6</a>
</body>
</html>3.美化网页元素
1.为什么要美化网页
1.有效的传递页面信息
2.美化网页，页面漂亮，才能吸引用户
3.凸显页面的主题
4.提高用户的体验
2.字体样式
- 在一个声明设置所有字体属性font：italic bold 16px/1.5em ‘幼圆’
- 字体系列font-family：“Hiragino Sans GB”（如果字体名称有空格需要用“”扩起来），“Microsoft YaHei”，sans-serif；会先选择第一个字体系列，如果没有，就会找第二个，直到最后一个或中途有为止
- 字号font-size：14px或120%
- 斜体font-style：italic（斜体：字体中样式有斜体会倾斜）、normal（字体不倾斜）、oblique（倾斜：就是把字体倾斜过来）
- 粗体font-weight：bold（加粗）、bolde（更粗）、lighter（更细）、100~900（700相当于bold，400默认）
- 字体像素font-size:px、em、%、pt
- 字体大小写font-variant:normal（停用备用字形（默认））、
- small-caps（小型大写字母）、all-small-caps（把大小写都显示为小型大写字母）
- petit-caps（特小型大写字母）、all-petit-caps（把大小写字母都显示为特小型大写字母）、unicase（允许将大写字母转化为小型大写字母与普通小写字母的混用）、titling-caps（首字母大写）、inherit（从父元素继承）
3.css文本
- 可以为颜色color，取值red、rgb（0，0，0）、rgb（1%，1%，1%）、rgba（255,0,0,0.5）、#fff
- 字符间距letter-spcaing，取值2px、-3px、4em
- 行高line-height，取值2px、1.5em、120%
- 对齐text-align，取值center（居中）、left（左对齐）、right（右对齐）、justify（两端对齐）
- 装饰线text-decoration，取值none（没有）、overline（上方）、underline（下方）、line-through（中间：类似删除线）
- 首行缩进text-indent，取值2em
- 文本方向direction:rtl文本从右向左direction:ltr文本从左向右
- letter-spacing文本间距（px为单位 如letter-spacing：2px）（1 2 3 4）
- word-spacing:文本段字间距（word-spacing:2px）(123 123)
1.css单位
- px（像素）
- em（字符单位，根据字体样式改动，如：字体样式原本12像素，1em=12像素）
- %（如果当前标签没有设置字体大小就会继承父元素的字体大小乘以百分比，如p=120%，div=10但是没有设置字体大小，p的百分比大小就是10*120%=12像素）
2.css颜色
- 颜色名，如：red，blue，green
- rgb值，rgb（x，x，x）每个分量取值为0~255，如红色rgb（255,0,0）
- rgb百分比，rgb（x%，x%，x%）取值为0~100%，如rgb（100%，0%，0%）
- rgb值透明度，rgba（x，x，x，x）取值最后一项为0（完全透明）和1（完全不透明），如红色半透明rgba（255,0,0,0.5）
- 十六进制数（#rrggbb），如红色#ff0000（可以取消重复位为#f00）
3.文本阴影
- 默认：a
- 鼠标悬浮：a:hover
- 鼠标按住未释放：a:active
- 鼠标未访问：a:link
- 鼠标已访问：a:visited
- text-shadow:阴影颜色 水平偏移 垂直偏移 阴影半径；
4.列表样式
- h1,,ul,li,a,body{margin:0;padding:0;text-decoration:none;} 常见初始化操作
- ul.a {list-style-type: circle;}无序列表不填充
- ul.b {list-style-type: square;}无序列表填充
- ol.c {list-style-type: decimal-leading;}有序列表123
- ol.c {list-style-type: decimal-leading-zero;}有序列表01,02,03
- ol.c {list-style-type: lower-roman;}有序列表
- ol.c {list-style-type: upper-roman;}有序列表I,II,III
- ol.c {list-style-type: lower-alpha ;}有序列表abc
- ol.c {list-style-type: upper-alpha ;}有序列表ABC
- ....等等n多种
- list-style: none;去掉列表前面的小点
- margin: 0; 移除外边距
- padding: 0; 移除填充
- 默认ul和ol都是有内外边距的
5.背景图像应用及渐变
1.背景图像
- background-color背景色
- background-image背景图
- 默认是平铺 repeat
- background-repeat:repeat-x; x轴铺
- background-repeat:repeat-y; y轴铺
- background-repeat:round; 环绕
- background-repeat:no-repeat； 不铺
- backgroud-position：200px 10px x水平200px，y垂直10px
- background：颜色 图片 图片位置 平铺方式
- background:red url("../imags/d.gif") no-repeat; 红色背景色，然后背景图片不铺
- background:red url("../imags/d.gif") 200px 10px no-repeat; 红色背景色，然后背景图片不铺 向右200px 向下10px
2.渐变
推荐一个渐变的网站：/
- linear-gradient（线性渐变）
- radial-gradient（径向渐变）
- conic-gradient（锥形渐变）
- 线性渐变
- 语法：background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
- 一个方向向另一个方向颜色渐变
- 默认为direction 从上向下渐变
- 单一方向渐变
- left从左边开始，right从右边开始，top...，bottom... 需要添加兼容前缀
- to left左边结束，right右边结束，top...，bottom... 不添加兼容前缀
- 对角渐变
- left top 左上开始、left top左下开始、right top右上开始、...
- to left top 左上结束、....
- 角度渐变
- 10deg 10度
- 公式 n(角度)-x=y
- 颜色区分
- 如果三个颜色，默认为都为33%
- 如果是两个，默认都为50%
- blue 10% 到10%都是蓝色
- 示例：
- linear-gradient(10deg, red, blue)
- 径向渐变
- 语法： background: radial-gradient(center, shape, size, start-color, ..., last-color);
- 一个点”向四周的颜色渐变
- 渐变位置 center
- 默认从中心到四周 center
- left从左边到四周、right从右边到四周、....
- left top从左上角到四周、right top从右上角到四周、...
- 渐变形状 shape
- 默认椭圆 ellipse
- 正圆 circle
- 大小 size
- closest-side：最近边；
- farthest-side：最远边；
- closest-corner：最近角；
- farthest-corner：最远角；
- 渐变位置 center
6.尺寸
- height：1px高度
- width：1px宽度
- line-height：行高
- max-height最大高度（min-height最低高度）
- max-width最大宽度（min-width最低宽度）
7.对齐
- 元素居中对齐 margin：auto 元素通过指定宽度，将两遍的空外边距平均分配
- 文本居中对齐 text-align：center 文本居中对齐
- 图片居中对齐 margin：auto 图片居中对齐要把图片放到块元素中（display：block）
- 定位左右对齐 position：absolute 使用margin和padding设置 要给父元素设置相对定位
- 左右对齐 float：right 右浮动 （left right）使用该对齐方式时可能出现子元素大于父元素需要清除浮动
- 可以使用clearfix（清除浮动）{overflow：auto} 用来解决子元素溢出问题
- 使用float 有些版本浏览器会自动在右侧增加17外边距 似乎是为滚动条预留的空间
- 垂直居中对齐 padding：xxx 可以使用填充向下顶多少数据
- 如果要水平和垂直都居中则使用padding和text-align：center
- 垂直居中 line-height和text-align：center来使文本居中对齐 line-height要与高度等同才会高度居中
- 如果文本有多行则使用 line-height：1.5； display：inline-block； vertical-align：middle；
- vertical-align：middle 垂直居中通常只用于img元素 只对inline，inline-block和表单元素起作用
- 垂直居中 transform: translate(-50%, -50%); 使小盒子在大盒子中向左向上移动50%来实现居中
4.盒子模型
1.什么是盒子
- margin：外边距
- border：边框
- padding：内边距
- 盒子计算方式：magin+border+padding+内容宽度
2.边框
- 语法：border：粗细 样式 颜色；
- body总有一个默认的外边距
- h1,,ul,li,a,body{margin:0;padding:0;text-decoration:none;} 常见初始化操作
- border：1px solid #fff 所有边框为1像素实线边框白色
- border-color：边框颜色
- border-style：none或0 无边框
- border-style：dotted 点线边框
- border-style：dashed 虚线边框
- border-style：solid 实线边框
- border-top-style：上边框（可设置不同方向的边框）
- border-style： dotted dotted dotted dotted（边框顺序为上右下左）
- border-width：边框的宽度（顺序为上右下左）
3.内外边距
- margin：外边距
- margin：0 auto 上下左右边距为0则居中
- margin：0 0 0 0上右下左
- margin：0 0 0 上 左右 下
- margin：0 上下 左右
- margin：0 四个边距
- margin-top：上边距（可为其他值 右下左）（right bottom left）
- margin：1px（em pt px % 还可以使用负值）（1em 1pt 1px 1% -1px）
- padding：内边距(填充)
- padding：0 0 0 0（同上）
- padding-top：（同上）
- padding：1px（em pt px % 不可以使用负值）
4.圆角边框
语法：border-radius：5px 5px 5px 5px；左上 右上 右下 左下
5.盒子阴影
语法：box-shadow：10px 10px 100px yellow；
要求：是一哥块元素，块元素有固定的元素
5.浮动
1.display
- 块级元素：独占一行 例：h1~h6、p、div、列表
- display:block;设置块元素 强制换行...
- 行内元素：不独占一行：span、a、img、strong...
- display:inline;设置元素为内联元素,给予一定宽度但不换行（行内元素）
- 行内元素可以被包含在块级元素中，块级元素不可以包含在行内元素中
- display:inline:(既是行内元素又是块级元素)
- display:none隐藏元素（不占空间）
- display：flex弹性布局
2.float
- float元素是否可以浮动
- float：right右浮动（left right none inherit）（左 右 不 继承）
- clear不允许元素周围有浮动
- clear：none允许元素周围有浮动（left right both none inherit）（左 右 不允许 允许 继承）
- visibility:hidden隐藏元素（但依旧占有位置）
- overflow:hidden溢出隐藏 给父级别边框添加
- overflow:scroll；隐藏超出部分，然后加一个滚动条
- vertical-align: middle; 将内容放在中部，去掉四边空隙
- 解决父级别边框塌陷
- #father:after{content:'';display:block;clear:both;}放在父级别边框解决塌陷问题
- 设置父元素高度：简单，但是新增的元素超过了高度还是会塌陷，需要重新调整
- 浮动元素后面增加空div：简单，代码中尽量避免空div
- overflow：简单，下拉的一些场景避免使用
- after：推荐使用：写法稍微复杂，但是没有副作用
3.对比
- display
- 方向不可以控制
- float
- 浮动起来的话会脱离标准文档流，需要解决父级边框塌陷问题
6.定位
1.相对定位
- position:relative;
- 相对于原来的位置，进行指定的偏移，相对定位的话，它仍然在标准文档流中，原来的位置会保留
- top：-20px 向上面相反的20px偏移
- left：20px，向左偏移20px
- bottom：-10px 向下的负10px进行偏移
- right：
2.绝对定位
- position:absolute;
- 相对于自己父元素的位置去定位 如果没有父元素就按浏览器定位
- 假设父级元素存在定位我们通常会对于父类元素进行偏移
- 在父级元素范围内移动
- 相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会保留
3.固定定位
- position:fixed;
- 元素位置 相对于浏览器可视化窗口是固定位置
- 原来的位置不会保留
4.粘性定位
- position: sticky;
- 粘性定位 依赖于浏览器可视化窗口，如果超出原本定位就会固定在目标位置
- 原来的位置会保留
- 相对定位和固定定位的结合
5.z-index
- z-index:-1;重叠定位
- （-1就放在其他元素的下面 1就放在其他元素的上面）
- 默认为0，最大为999
6.不透明度
- opacit=0.5半透明
- 可以设置背景颜色的透明度，也可以设置字体的透明度，
- 最大值为999，值越大透明度越低，默认为0
7.动画
css3动画自行了解
更多推荐
精简css
发布评论