CSS样式总结
一、选择器
1 基本选择器(css2.1)
id选择器( #)
class选择器(.)
标签选择器(input、p、selection…)
2 复合选择器(css2.1)
<style>
/* 1、后代选择器(空格分开) */
.end ul li .sp {
color: red;
}
/* 2、交集选择器(无空格分开) */
a.hello {
color: green
}
/* 3、并集选择器(逗号分开) */
.tip,
.tip2 {
color: yellow
}
</style>
3 伪类
<style>
a:link {}
a:visited {}
a:hover {}
a:active {}
</style>
3 元素关系选择器
<style>
1、子选择器(div>p)
2、相邻选择器(div+p)
3、同级选择器(div~p)
</style>
4 序号选择器
<style>
:first-child {}
:last-child {}
:nth-child(2n+1){} == :nth-child(odd){}奇数
:nth-child(2n){} == :nth-child(even){}偶数
/* 同一个标签的序号 */
:nth-of-type(3) {}
</style>
5 属性选择器
<div>博主懒得写OCR识别过来的</div>
<style>
举例|意义
img[alt] 选择有alt属性的img标签
img[alt=“故宫”] 选择alt属性是故宫的img标签
img[alt="北京“] 选择alt属性以北京开头的img标签
img[alt$=“夜景”] 选择alt属性以夜景结尾的img标签
img[alt*="美”] 选择有a1t属性中含有美字的img标签
img[alt=“手机拍摄”] 选择有a1t属性中有空格隔开的手机 指服学样的五mg标签
imgtalt1-“参赛作品”] 的 选择有a1t属性以“参赛作用-”开头
</style>
6 CSS3新增伪类(实用)
<style>
/* 空标签 */
:empty {}
/* 获取焦点 */
:focus {}
/* 有效表单 */
:enabled {}
/* 无效表单 */
:disabled {}
/* 选中表单 */
:checked {}
/* 对根元素操作，，类似htmL */
:root {}
</style>
7 CSS3伪元素(实用)
<style>
/* 在标签前面添加内容 */
::before{}
/* 在标签后面添加 */
::after{}
/* 设置鼠标选中文案的样式 */
::selection{}
/* 首字设置样式 */
::first-letter{}
/* 设置当前行样式 */
::first-line{}
</style>
8 选择器权重计算
1 id选择器>class选择器>标签选择器
2 (复杂选择器)当选择器比较多的时候,可以比较选择器 的个数,来区分哪个权重 (1 0 3) < (5 2,0)=>(id class 标签)
9 CSS3伪元素和CSS3新增伪类案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.pares {
height: 20px;
width: 60px;
border: 1px solid #dc0c0c;
}
.pares:empty {
background-color: yellow;
}
.inp:focus {
border: 1px solid red;
}
.inp:disabled {
background: green;
}
.inp:enabled {
border: 1px solid rgb(55, 2, 245);
}
.inp:checked+span {
color: hotpink;
}
:root {
background: rgb(170, 170, 170);
}
/* css3伪元素 */
.share::before{
content:"♥"
}
.share::after{
content:"😍"
}
.text::selection{
background: lawngreen;
color: red;
}
.text::first-letter{
font-size: 30px;
}
.text::first-line{
text-decoration:underline
}
</style>
</head>
<body>
<div>—————分割线(css3新增伪类)————</div>
<p class="pares"></p>
<p class="pares">45458</p>
<p class="pares"> </p>
<p class="pares"></p>
<input type="text" class="inp" disabled>
<input type="text" class="inp">
<input type="checkbox" class="inp" value="男"> <span>男</span>
<div>*****分割线CSS3伪元素***</div>
<div class="share">我是爱你的哟</div>
<textarea class="text" cols="30" rows="15">4544444444444444444444444sjkdhsakjhfffff,sdfhsfskjddddddddddddddd</textarea>
</body>
</html>
二、边框与圆角
<style>
p {
/* solid(实线) dashed（虚线） dotted（点状线） */
border: 1px solid red;
/* radius 半径*/
border-radius: 50%;
/* x偏移 y偏移 模糊量 颜色 */
box-shadow: 10px 20px 30px rgba(255, 0, 0, .4);
/* 参数四：延展值 */
box-shadow: 10px 20px 30px 20px rgba(255, 0, 0, .4);
/* 属性前面加inset 表示内阴影 */
box-shadow: inset 10px 20px 30px 20px rgba(255, 0, 0, .4);
/* 多阴影(逗号分割) */
box-shadow: inset 10px 20px 30px 20px rgba(255, 0, 0, .4), 10px 20px 30px 20px rgba(255, 0, 0, .4)
}
</style>
<style>
/* 小案例边框制作三角形 */
.triangle {
border: 30px solid transparent;
width: 0px;
height: 0px;
/* background: greenyellow; */
border-bottom: 90px solid black
}
</style>
<style>
/* 阴影案例 */
.shadow {
width: 200px;
height: 200px;
border: 2px solid rebeccapurple;
box-shadow: inset -20px 20px 30px 20px rgba(255, 0, 0, .4)
}
</style>
<body>
<div class=" triangle"></div><br />
<div>*****分割线阴影</div><br />
<div class="shadow"></div><br />
</body>
三、文本与字体属性
<style>
p{
/* 英文单词 十六进制 rgb rgba */
color: red;
color: #ffff55;
color:rgb(255,0,0);
color:rgba(255,0,1,0.5);
/* 加粗(700) 正常加粗(400) 不倾斜 倾斜 */
font-weight: bold;
font-weight: normal;
font-style:normal;
font-style:italic;
/* 下划线 清除下划线 中划线 */
text-decoration:underline;
text-decoration:none ;
text-decoration:line-through ;
/* 字体 */
font-family: "微软雅黑";
/* 缩进 行高 居中 */
text-indent: 2em;
line-height: 1.5;
text-align:center;
}
/* 继承性(属性) 继承性会影响权重的计算 遵守 的是就近原则*/
/* color
font-开头的
list-开头的
text-开头的
line-开头的 */
</style>
四、浮动与定位
1、浮动
浮动：脱离标准文档流,不区分行级 块级 行内开 元素
浮动的顺序贴靠特性：子盒子会按顺序进行贴靠，如果没有足够空间，则会寻找再 前一个兄弟元素
清除浮动方法：
overflow:hidden(形成BFC，关闭住内部的浮动)
清除浮方法2：给后面的父盒子设置clear:both属性。clear表示清除浮动对自己的影响，both表示左右浮动都清除
清除浮动方法3：使用：after伪元素给盒子添加最后一个子元素，并且给：after设置clear:both。 一定要是display：block
清除浮动方法4：在两个父盒子之间“隔墙”，隔一个携带clear:both的盒子
效果图1.1
（图1.1）
<style>
.big {
width: 600px;
height: 200px;
background: rosybrown;
}
.md1 {
float: left;
width: 200px;
height: 200px;
background: red;
}
.md2 {
float: right;
width: 100px;
height: 30px;
background: rgb(41, 24, 24);
}
.md3 {
float: right;
width: 320px;
height: 20px;
background: rgb(28, 69, 145);
}
</style>
<body>
<div class="big">
<div class='md1'></div>
<div class='md2'></div>
<div class='md3'></div>
</div>
</body>
2、BFC
面试题： ◆什么是BFC？如何创建BFC？BFC有哪些作用?
BFC(块级格式化上下文):是页面上的一个隔离的独立容器,容器里的子元素不会影响到外面的元素,
如何创建BFC
如何创建BFC?
1 float的值不是none
2 position 的值不是static或者relative
3 dispaly 的值是inline-block flex inline-flex
4 overflow :hidden (溢出:隐藏)
BFC的其他作用
BFC可以取消盒子margin塌陷问题
BFC可以阻止元素被浮动元素覆盖
图1.2
float中BFC创建例子（图1.2）
<style>
.parsent {
background: royalblue;
padding: 20px;
/* 方法一 */
/* float:left */
/* 方法二 */
/* display: inline-block; */
/* 方法三(推荐) */
overflow: hidden
}
.son1 {
width: 200px;
height: 200px;
float: left;
background: red
}
.son2 {
width: 200px;
height: 200px;
background: yellow;
float: left;
}
</style>
<html>
<div>——————分割线 float中BFC创建例子</div>
<div class="parsent">
<div class="son1"></div>
<div class="son2"></div>
</div>
</html>
BFC其他作用
<style>
.box1 {
height: 100px;
width: 100px;
background: yellow;
margin-bottom: 10px;
}
.box2 {
width: 100px;
height: 100px;
background: green;
margin-top: 30px;
}
.parsentBox {
overflow: hidden;
}
</style>
<html>
<div>——————分割线 BFC其他作用</div>
<div class="parsentBox">
<div class="box1"></div>
</div>
<div class="parsentBox">
<div class="box2"></div>
</div>
</html>
3、定位
◆相对定位：盒子可以相对自己原来的位置进行位置调整，称为相对定位
相对定位的用途：
◆相对定位用来微调元素位置
◆相对定位的元素，可以当做绝对定位的参考盒子
绝对定位 绝对定位：盒子可以在浏览器中以坐标进行位置精准描述， 拥有自己的绝对位置 position:absolute； top:100px； left:100px；
子绝父相
图1.3
图1.3
<style>
.nav ul {
background: greenyellow;
height: 50px;
}
.nav ul li {
float: left;
width: 100px;
line-height: 50px;
list-style-type: none;
text-align: center;
}
.nav ul li:hover {
border-bottom: 2px solid red;
/* 使用方法 */
position: relative;
bottom: 3px;
}
</style>
<html>
<div>——————分割线 相对定位微调案例</div>
<div class="nav">
<ul>
<li>栏目一</li>
<li>栏目二</li>
<li>栏目三</li>
<li>栏目三</li>
<li>栏目四</li>
<li>栏目一</li>
</ul>
</div>
</html>
五、盒模型(未补全)
margin塌陷问题(向上向下同上设置margin 的时候 出现，哪个值大取哪个)
visibility: hidden; //隐藏 占据空间
dispaly：none;隐藏，不占据空间
box-sizing:border-box ;
六、背景与渐变
<style>
span {
/* 背景颜色 */
background-color: royalblue;
/* 背景图片 */
background-image: url(./image/im.gif);
/* 参数:repeat(x,y均平铺（默认值）),repeat-X(x平铺),repeat-Y(Y平铺),no-repeat(bupingpu) */
background-repeat: no-repeat;
/* 背景尺寸 */
background-size: 100px 100px;
/* cover（撑满盒子） contain(容纳到盒子里面) */
background-size: cover;
/* 属性用来设置元素的背景裁切到哪个盒。兼容到IE9。
border-box:背景延伸至边框（默认值）背景延伸至内边（padding），不会绘制到边框
padding-box： 处（仅在dotted、dashea边框可索觉）”
content-box ：背景被裁剪至内容区 */
background-clip: padding-box;
/* background-attachment属性：background-attachment 属性决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。
属性：
fixed：自己滚动条不动，外部滚动条不动
1oca1：自己滚动条动，外部滚动条动
scro11：自己滚动条不动，外部滚动条动（默认值） */
/* background-position属性：background-position属性可以设置背景图片出现在盒子的什么位置background-position:100px 200px；可以用top、bottom、center、left、right描述图片出现的
位置 */
/* background 综合属性写法 */
background:yellow url(./image/im.gif) no-repeat center center
/* 线性渐变：盒子的background-image属性可以用linear-gradient（) */
/* 参数：渐变方向 开始颜色 结束颜色 */
/* background-image:1inear-gradient(to right,blue,red); */
/* 盒子的background-image属性可以用radial-gradient()形式创建径向渐变背景 */
/* 参数：圆心坐标 */
/* background-image:radial-gradient(50%,50%,red,blue)； */
/*
浏览器私有前缀:不同浏览器有不同的私有前缀，用来对试验性质的CSS属性加以标识
品牌(浏览器名字) 前缀
chrome -webkit-
Firefox -moz-
IE、Edge -ms-
欧朋 -Q-
*/
}
</style>
七、2D和3D转换
<style>
p {
/* 旋转 */
transform: rotate(45deg);
transform-origin: 0 0;
/* transform-origin属性:可以使用transform-origin属性设置自己的自定义变换原点 */
/* //缩放 */
transform: scale(0.5);
/* 斜切变形 */
transform:skew(10deg ,20deg);
/* 位移变形 */
transform:translate(100px,200px);
/* 3D旋转 */
transform:rotate3d(30deg,20deg);
perspective:300px;
/* 空间移动 */
/* transform:translate(100px) */
}
</style>
八、过渡和动画
<style>
p {
/* 属性四要素:参数:什么属性要过度 动画时长 变化速度曲线 延迟时间 */
transition: width 1s linear 0s
/* 1\那些属性可以参与过度 */
所有数值类型的属性，都可以参与过渡，比如width、height、left、top、border-radius
背景颜色和文字颜色都可以被过渡
所有变形（包括2D和3D）都能被过渡
/* 参数三介绍???变化的速度 的曲线 */
https://cubic-bezier.com/(贝赛尔曲线)
ease linear ease-in ease-out ease-in-out
}
</style>
九、动画的定义和调用
<!-- 如何动画的定义: 可以使用@keyframes来定义动画，keyframes表示“关键 帧”，在项目上线前，要补上@-webkit-这样的私有前缀 -->
@keyframes 动画名{
<!-- 开始状态 -->
form{}
<!-- 结束状态 -->
to{ }
}
<!-- 如何调用动画:定义动画之后，就可以使用animation属性调用动画 -->
animation:'动画名字' 1s linear 0s;
<!-- 动画的第五个参数??? -->
参数:数字(次数) 或者infinite(永久执行)
animation:'动画名字' 1s linear 0s 3 || infinite;
alternate和forwards
如果想让动画的第2、4、6.…（偶数次）自动逆向执行，那
么要加上alternate参数即可
animation:movelr 2s linear es infinite alternate;
◆如果想让动画停止在最后结束状态，那么要加上forwards
animation:changeToCircle 1s linear es forwards;
<!-- 如何设置多关键帧动画????? -->
@keyframes 动画名{
0%{ }
20%{ }
50%{ }
80%{ }
100%{ }
}
</style>
十、重置rest css（推荐）
扫一扫
1541
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
