Css学习笔记总结

最新推荐文章于 2023-06-30 09:36:11 发布

缘灬小太阳

最新推荐文章于 2023-06-30 09:36:11 发布

阅读量155

点赞数

分类专栏：前端文章标签： html css

本文链接：https://blog.csdn.net/qq_43389754/article/details/109998234

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、简介

层叠样式表。Cascading Style Sheets
作用主要是让页面的基本HTML元素外观（大小、形状、颜色、位置等）改变。
优点
- 让html代码和样式代码分离，更加方便开发人员维护
现在通用的版本是3.0

二、基本语法和引用方式

语法结构：

样式(选择器)名称{
名称: 值; 名称: 值;
}

引用方式：

行内 : 直接在标签内部使用style属性来设置样式。
优点：简单、方便
缺点：代码维护麻烦，可复用性差

内部 : 在head中使用style标签来实现页面的样式效果。
优点：简单、方便、复用性较强
缺点：不同文件中的组件样式不可重复

外部 : 在项目中创建一个后缀名为css的文件，在文件中编写样式，在需要使用该样式的页面引入该文件。了解：还可以使用@import方式。import浏览器兼容性不好。不推荐使用。
优点：简单、方便、复用性强、可维护性高

注意：优先级：行内 > 内部 > 外部

代码演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/common.css" /><!-- 引用外部样式 -->
		<style type="text/css">
            @import url("css/common.css");
			p{
				border: 1px solid blue;
				width: 200px;
			}
		</style><!--内部样式 -->
	</head>
	<body>
		<!-- 行内样式-->
		<div style="width: 300px; height: 200px; background-color: red;">
			
		</div>
		
		<h1>望庐山瀑布</h1>
		
		<p>
			日照香炉生紫烟，遥看瀑布挂前川。
		</p>
		
	</body>
</html>

三、CSS常见的选择器

常见的选择器有三种：
- 元素（标签）选择器：直接以元素（标签）的名称作为选择器的名称。会使得所有的该名称的元素（标签）都应用该样式。
例如：
div{ width: 300px; }
- ID选择器：样式的选择器的名称跟页面元素的ID名称一致，会根据元素的ID，自动应用该样式。语法结构是以#号开头。
例如：
#username{ border: 1px solid red; }
<input type="text" id="username"/>
- 类选择器：使用 . 开头来定义一个样式名称，在页面元素里面使用class属性来引用该样式。
代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			div{
				background-color: greenyellow;
			}
			
			#username{
				border: 1px solid red;
			}
			
			.btn{
				border: 1px solid red;
			}
		</style><!--内部样式 -->
	</head>
	<body>
		<!-- 行内样式-->
		<div style="width: 300px; height: 200px; ">
			
		</div>
		
		<input type="text" id="username" placeholder="用户名"/>
		
		<input type="button" value="按钮" class="btn"/><br />
		<a href="" class="btn">百度一下</a><br />
		<span class="btn">我也要点击</span><br />
	</body>
</html>

四、其他选择器

4.1 *选择器

通配符，表示所有的元素均有效。

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            color: red;
        }
    </style>
</head>

注意：如果一个元素被多个样式所影响，优先级为：ID选择器 > 类选择器 > 元素选择器 > 通配符

4.2 子元素选择器

使用某些元素的子元素被选择器应用。
例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
        <!--使用ID为div1的元素里面所有的a标签应用-->
		<style>
			#div1 a{
				color: red;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<a href="">百度一下</a>
		</div>
		
		<div>
			<a href="">百度</a>
		</div>
		
		<a href="">选择</a>
	</body>
</html>

4.3 伪类选择器

针对某些元素的某些状态应用的样式。

<html>

	<head>
		<meta charset="UTF-8">
		<title>css伪类</title>
		<style>
			
			a {
				font-size: 30px;
			}
			a:link {
				color: yellow
			}
			/* 未访问的链接 */
			
			a:visited {
				color: gray
			}
			/* 已访问的链接 */
			
			a:hover {
				color: red
			}
			/* 鼠标移动到链接上 */
			
			a:active {
				color: blue
			}
			/* 选定的链接 */
			
			
			img:hover{
				width: 700px;
				height: 500px;
			}
		</style>
	</head>

	<body>

		<a href="demo01.html">超链接</a>
		
		<img src="img/girl.jpg" width="350px"  height="250px"/>
	</body>

</html>

4.4 组选择器

给一组元素设置样式。

#div1,#div2,#div3{
				
}

五、常见的样式属性

5.1 尺寸相关

width:宽度
height: 高度
单位：px（像素）

5.2 文字相关

color：颜色，值可以是常见表示颜色的单词，也可以是#ffffff（红，绿，蓝）
font-weight：权重。（粗细）500为默认值，700是加粗，最高900，100为细体
font-size：大小，单位px
font-family：字体，应该使用系统自带的字体，不推荐使用其他字体
如果要一次设置三个值，可以缩写：font:900 60px “微软雅黑”;
text-align：文本对齐方式(水平对齐)
line-height：行高。小技巧：可以通过将行高设置与容器的高度一致来实现在容器中垂直居中的效果。
text-decoration：文本修饰
letter-spacing/word-spacing : 文本字符间距/文本单词间距
direction：文本方向
代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				/*font-size: 60px;
				font-family: "微软雅黑";
				font-weight: 100;*/
				
				font:900 60px "微软雅黑";
				text-align: center;
				border: 1px solid red;
				width: 800px;
				height: 400px;
				line-height: 400px;
				text-decoration:underline;
			}
			span{
				font:900 60px "微软雅黑";
				text-align: center;
				border: 1px solid red;
				width: 800px;
				height: 400px;
			}
		</style>
	</head>
	<body>
		<div>
			正道的光
		</div>
		<span>
			你是空
		</span>
	</body>
</html>

5.3 背景相关

background-color:背景颜色
background-image：背景图片
background-repeat：重复方式，no-repeat不重复，repeat-x：横向重复，repeat-y：纵向重复
background-position：当背景图比容器大时，可以通过此属性来移动x和y，来显示不同的图片位置。

缩写：background：url 重复方式 x y

代码演示：

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style>
			div{
				background-color: red;
			}
			
			body{
				background-image: url(img/girl02.jpg);
				background-repeat: no-repeat;
				background-size: cover;
			}
			
			
		</style>
	</head>
	<body >
		
		<div>这是一个div</div>
		
	</body>
</html>

5.5 列表相关样式和浮动效果

list-style：设置前面的图标样式，none去掉点。
浮动效果：float
使得元素漂浮起来，不好占据页面空间。

六、盒子模型

页面上任何一个元素可以看作为一个盒子。
它包含几个重要的样式设置的点。边框，与内容的距离，与其他元素的距离。

6.1 边框

一个元素的边框。

border-width: 10px;

border-style:solid ;

border-color: blue;

可以简写为：border:1px solid red;

也可以单独设置某一个边框：border-left:1px solid red;

可以通过border-radius来设置边框的圆角。小技巧：当此属性设置为边框的一半时，正方形会变成圆形。

注意：默认情况下width是不计算border的，如果需要width包含border，那么可以设置box-sizing属性值为：border-box。

6.2 外边距margin

margin是指当前元素与其他元素的距离。

可以单独写4边的距离，例如：margin-left。

也可以直接简写：margin: 上 右 下 左。

当少写属性的值时，跟对向一致，如果只写了一个，表示4向一致。

小技巧：可以通过设置margin:0px auto来实现左右居中，（垂直居中不能使用auto实

6.3内边距padding

padding是指元素与内容直接距离。

七、布局相关

position：定位
static：默认值，特点是元素自上而下布局，每一个元素都会在页面上占据相应的空间。
absolute：绝对定位，自己设置坐标（位置），可以放在页面的任何位置。而且不会与static元素抢位置。
可以通过left、right、top、bottom四个值来设置位置，（对向只能设置一个）z-index可以设置叠层的次序。值越大越在表层。
演示代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body{
				margin: 0px;
			}
			#div1{
				width: 200px;
				height: 200px;
				background-color: red;
				position: absolute;
				left: 100px;
				top: 50px;
				z-index: 6;
			}
			#div2{
				width: 300px;
				height: 300px;
				background-color: blue;
			}
			#div3{
				width: 200px;
				height: 200px;
				background-color: orange;
				position: absolute;
				left: 0px;
				top: 0px;
				z-index: 5;
			}
		</style>
	</head>
	<body>
		<div id="div1"></div>
		<div id="div2"></div>
		<div id="div3"></div>
	</body>
</html>

relative：相对定位。

绝对定位默认是以整个浏览器为坐标系。一般项目中不可能直接如此做，通常会在元素容器内部使用绝对定位。此时需要以为外部的容器作为坐标系，那么就需要将外部元素设置为relative。

fixed：固定定位，以浏览器为参考。

八、变形和动画

transform：变形

值：translate(100px, 100px)移动，单位px，

scale(1.5)拉伸。

rotate(45deg)旋转。rotateX、rotateY、rotateZ

skew(30deg)翻转。

transition：width(all) 5s 表示动画执行5秒，改变宽度（所有）

需要设置一个初始样式，和一个最终样式，中间会自动补帧。

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#div2{/*初始样式*/
				width: 200px;
				height: 200px;
				background-color: blue;
				transition: all 20s;
				
			}
			
			#div2:hover{/*最终样式*/
				width: 500px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div id="div2"></div>
	</body>
</html>

自定义动画：使用@keyframes来定义动画，也可以定义from和to，表示开始样式和最终样式，也可以通过百分比定义中间样式。通过animation来调用相应的动画。
代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#rocket{
				position: absolute;
				left: 20px;
				top: 600px;
				animation: fly 10s infinite;
			}
			
			@keyframes fly{
				10%{
					left: 100px;
					top: 500px;
					transform: rotate(30deg);
				}
				50%{
					left: 500px;
					top: 50px;
					transform: rotate(90deg);
				}
				100%{
					left: 1000px;
					top: 600px;
					transform: rotate(180deg);
				}
			}
		</style>
	</head>
	<body>
		<img id="rocket" src="img/clipboard.png" height="50px"/>
	</body>
</html>