CSS3入门

带带二师兄

于 2022-10-28 21:03:47 发布

阅读量838

点赞数

分类专栏：笔记文章标签：前端 css3

本文链接：https://blog.csdn.net/qq_42523037/article/details/127402576

版权

笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

目录标题

1.入门

先看一个例子

h1 {
	/* 这是注释*/
	color:red;
	font-weight:bold;
	font-style:italit;
}

标签名{
	属性：属性值；
}

内嵌式：写在<style></style>标签内

外链式：单独存为.css文件，用link引入他。
<link rel = "stylesheet" href = "css.css">

2.选择器

class选择器，用”点“

.warning{
}
.spec{
}
<p class = "warning spe">可以用空格隔开，以便被多个选择器选中 </p>

原子类

.fs12{
	font-size:12px;
}
.fs14{
	font-size:14px;
}
.fs16{
	font-size:16px;
}
<p class = "fs18 color-green"></p>

2.1伪类
激活的、已访问的、未访问的或者当有鼠标悬停在其上的链接，它们会在支持 CSS 的浏览器中以不同的方式显示出来

a:link {
	/* 未访问的链接 */
}
a:visited {
	/* 已访问的链接 */
}
a:hover {
	/* 当有鼠标悬停在链接上 */
}
a:active {
/* 点击鼠标不松手的效果 */
}

新增伪类
:empty 表示选择空元素，空元素是指标签里面没有内容的元素。
:focus 表示选择当前获得焦点的表单元素
:enable 表示选择当前有效的表单元素。所谓有效的表单元素，就是标签上没有添加disabled这个属性的表单元素
:diable表示选择当前无效的表单元素。所谓无效的表单元素，就是指在表单元素上面添加了disabled属性，此时这个表单就是无效的
:checked

	div:empty{
		color:red;
	}
	input:focus{
		color:yellow;
	}
	.inputClass:enable{
		color:green;
	}

2.2复合选择器

后代选择器：用空格表示后代

.box p{
	color:red;
}

 选择类名为box 后代为p的标签(后代不一定是儿子）

<div class = "box">
<p>被选中的内容</p>
</div>
<p>不被选中</p>

并集选择器：用逗号

2.2标签选择器和id选择器
标签选择器：常用于标签的初始化。

ul {
	list-style:none;
}
a {
	text-decoration: none;
}

id唯一，id选择器用#

#para1 {
	color: red;
}

2.3层叠性和样式计算
层叠性的冲突
id的个数 > class的个数 > 标签的个数
按正则比较大小
（0，0，0）

p {
	color:red;
}
#para1{
	color:blue;
}
.spec{
	color:green;
}

提升权重

p{
	color: red !important;
}

2.4 伪元素
用双冒号表示，表示虚拟动态创建的元素。

	a::before{
		content:"前缀“；
	}
	a::after{
		content:"后缀“；
	}
	a::selection{
		bgc: red;
		/* 用鼠标选中时颜色变红 */
	}

2.5属性选择器
alt属性是对图片的描述
在这里插入图片描述
2.6序号选择器

在这里插入图片描述
2.7元素关系选择器

3 文本和字体属性

color
font-开头的
list-开头的
text-开头的
line-开头的

重叠选中就近原则,继承不如直接选中
段落和行相关属性
text-indent属性：首行文本内容之前的缩进量。
line-height属性：行高。
行高 = 盒子高单行文本垂直居中
text-align:center 水平居中

p{
	text-indent: 2em;
	line-height: 1.5
}

font合写属性

p{
	font: 20px/1.5 Arial
	/* 字号/行高 字体 */
}

字体属性
font-family
后面的是后备字体，后面能用用后面，不然就用前面。
一般英文字体在前面

p{
	font-family:serif, "Times New Roman", "微软雅黑";
}

文本属性

4.盒子模型

== 所有标签都可以看成矩形盒子==，由width、height、 border、 margin构成
在这里插入图片描述
margin的塌陷现象
竖直有塌陷，水平没有
默认margin清除

	*{
		margin: 0;
		padding: 0;
	}
body, ul, p{
	margin:0;
	padding:0;
}

盒子的水平居中margin:auto

.bos{
	margin: 0 auto;
}

盒模型计算

box-sizing:border-box;属性
添加box-sizing属性后，盒子的height、width就变成了实际宽高，padding、border内缩。

.bos{
	box-sizing:border-box;
	width:200px;
	height:200px;
	border:10px;
	padding:10px;
}
实际大小：160 X 160

display属性
在这里插入图片描述
行内块：img标签input标签，既能并排显示，也能设置宽高。

行内元素和块级元素的相互转换：

display:block;将元素转换为块级元素
display:inline;将元素转为行内元素
display:inline-block;将元素转为行内块

a{
	display:blocl:
}
好几个超链接垂直显示。

元素的隐藏

display:none; 彻底放弃元素
visibility:hidden;元素不可见，但是位置保留

5.浮动和定位

浮动的概念:可以用来实现并排。
在这里插入图片描述
并排的盒子都要设置浮动。父盒子要有足够的宽度，不然子盒子会掉下去。
浮动的顺序贴靠特性：子盒子会按顺序贴靠，如果没有足够空间，就会寻找再前一个兄弟元素。

先贴2，不够，再贴1.
浮动的元素一定能设置宽高。
浮动的元素不再区分块级、行内元素，一律能设置宽高。
右浮动：float:right;
在这里插入图片描述
使用浮动实现网页布局

垂直显示的盒子，不要设置浮动，只有并排显示的盒子才设置浮动。
不要节约盒子

BFC概念:页面上的一个隔离的独立容器，容器内的子元素不会影响到外面的元素。
在这里插入图片描述

方法四：overflow:hidden;

定位
相对定位:盒子可以相对自己原来的位置进行调整。postion:relative

	.box1{
		position:relative;
		top:100px;
		left:100px;
	}
向右下移动100px;

在这里插入图片描述

在这里插入图片描述
相对定位用来微调位置。
导航栏小项目

绝对定位：盒子可以在浏览器中以坐标进行位置精确描述，拥有自己的绝对位置。
position:absolute

	div{
		position: relative;
		margin: 40px auto;
	}
	p{
		width:80px;
		height:80px;
		bgc:red;
		postion: absolute;
		top: 50%;
		left:50;
		margin-top: -40px;
		margin-left: -40px;
	}

堆叠顺序z-index属性
数值大的压住数值小的

固定定位：不管页面如何卷动，它永远固定在那里。position:fixed

6.边框与圆角

border属性

	p{
		border: 1px solid red;
	}
	/* 线宽 线型 颜色   */

线型： dotted 、 solid 、 dashed
在这里插入图片描述
小属性方便你层叠大属性

四个方向的边框
在这里插入图片描述

去掉边框
border-left: none;
利用边框制作三角形

.box1{
	width:0px;
	height:0px;
	border: 30px solid transparent;
	border-top-color: red;
	}

盒子阴影

box-shadow属性
在这里插入图片描述

7 背景与渐变

background-image属性
用来设置背景图片，图片路径要写到url（）括号内。
在这里插入图片描述
会被拉伸

backgroud-size属性
在这里插入图片描述

backgroud-repeat: no-repeat; 留白经常和contain一起用
background-clip属性背景裁切
以下三个常用值：

在这里插入图片描述
背景固定

	.box{
		background-position: center center;
		/* 这个非常常用，可以把图片放在中间位置 */
	}

css精灵
在这里插入图片描述
css精灵可以减少http请求数，加快网页显示速度。缺点：不方便测量，后期改动麻烦。

在这里插入图片描述
线性渐变：

径向渐变：
在这里插入图片描述

8.变形

在这里插入图片描述

	transform-origin:0 0;
	transform: rotate(90deg);
	/* 以坐上角为中心旋转90度 */

在这里插入图片描述

.pic:hover{
	transform: scale(2);
}
/* 鼠标一碰就放大 */

在这里插入图片描述

IE6相对定位
IE9位移变形

制作一个正方体

<style>
.box {
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            margin: 100px auto;
            perspective: 300px;
            position: relative;
        }

        .box p {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
        }

        .box p:nth-child(1) {
            background-color: rgba(219, 56, 211, 0.486);
            /* 前面 */
            transform: translateZ(100px);
        }

        .box p:nth-child(2) {
            background-color: rgba(42, 128, 199, 0.486);
            /* 顶面 */
            transform: rotateX(90deg) translateZ(100px);
        }

        .box p:nth-child(3) {
            background-color: rgba(56, 219, 83, 0.486);
            /* 背面 */
            transform: rotateX(180deg) translateZ(100px);
        }

        .box p:nth-child(4) {
            background-color: rgba(213, 216, 32, 0.486);
            /* 底面 */
            transform: rotateX(-90deg) translateZ(100px);
        }

        .box p:nth-child(5) {
            background-color: rgba(236, 82, 102, 0.486);
            /* 侧面 */
            transform: rotateY(90deg) translateZ(100px);
        }

        .box p:nth-child(6) {
            background-color: rgba(119, 17, 236, 0.486);
            /* 侧面 */
            transform: rotateY(-90deg) translateZ(100px);
        }
    </style>
</head>

<body>
    <div class="box">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
</body>

9.过渡与动画

在这里插入图片描述

.box1{
	width:300px;
	height: 200px;
	bgc:orange;
	transition: width 5s linear 0s;
	}
.box1:hover{
	width:800px;
	}

在这里插入图片描述

				2D动画过度 
 .box{
 	width:200px;
 	height: 100px;
 	bgc:orange;
 	transition:tranform 2s linear 0s;
 	}
 .box:hover{
 	tranform: rotate(360deg) scale(1.5);
 	}