CSS常用属性

最新推荐文章于 2022-07-29 09:32:54 发布

裂缝中的豆芽

最新推荐文章于 2022-07-29 09:32:54 发布

阅读量214

点赞数

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

本文链接：https://blog.csdn.net/qq_49548374/article/details/107523230

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

创建CSS的三种方式

通过style属性引用样式
通过style标签引用样式
通过link标签引用css文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!-- 通过style标签引用样式 -->
		<style type="text/css">
			span{
				color: green;
			}
		</style>
		<!--引入外部css文件-->
		<link rel="stylesheet" type="text/css" href="css/exam.css"/>
	</head>
	<body>
		<!-- 通过style属性引用样式 -->
		<p style="color: red;">
			演示CSS写的地方1
		</p>
		<span>演示CSS写的地方2</span>
		<div>演示CSS写的地方3</div>
	</body>
</html>

运行结果：
在这里插入图片描述

CSS常用属性

css常用字体属性

font-size：设置字体大小
font-weight：设置字体加粗
font-family：设置字体样式
font-style：设置字体类型
text-align：设置字体文本位置
line-height：设置文本行高
text-decoration：设置文本装饰线
color：字体颜色

css常用边界属性

border-top：上边界
border-bottom：下边界
border-right：右边界
border-left：左边界

css常用背景属性

background-color：背景颜色
background-image：背景图片
background-repeat：背景图片是否重复
background-position：背景图片定位
background-size：背景图片放缩

display属性值

display：转换为块级元素
inline：转换为行级元素
display：转换为行内块元素
注意：块级元素独占一行，可以设置宽高；行级元素的宽高由内容撑起来的，不独占一行，不能设置宽高；行内块元素融合两者各自优点，不独占一行，却可以像块级元素一样可以设置宽高。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 500px;
				height: 300px;
				border-top: 2px solid red;
				border-right:5px dashed black;
				border-bottom: 10px double violet;
				border-left:3px dotted green;
				color: orange;
				font-size: 20px;
				font-weight: bold;
				font-family: "微软雅黑";
				font-style: italic;
				text-align: center;
				/*行高，使文本垂直居中*/
				line-height: 300px;
				text-decoration: underline;
				background-color: aqua;
				background-image: url(image/1.jpg);
				background-repeat: no-repeat;
			}
			span{
				/*转换为块级元素*/
				display: block;
				width: 100px;
				height: 100px;
				border: 1px solid black;
				background-image: url(image/1.jpg);
				/*背景图片定位*/
				/*background-position:center top;*/
				background-position: :-30px 200px;
				/*背景图片放缩*/
				background-size:cover ;
			}
		</style>
	</head>
	<body>
		<div>
			好好学习，天天向上
		</div>
		<span></span>
	</body>
</html>

运行结果：
在这里插入图片描述

盒子模型

来自菜鸟教程
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距，边框，内边距，实际内容。
例子：
一个盒子里面装了一个蛋糕，然后把盒子放在一个展示柜里，蛋糕就相当于实际内容（content：如图，最内层虚线），蛋糕与盒子之间的距离就相当于内边距（padding：最内层虚线与绿色框内层实线之间的空白部分），而盒子本身有宽度（border：绿色部分），最后盒子与展示柜之间也有空隙，就叫做外边距（margin：绿色框外层实线与最外层虚线间的距离）

来自菜鸟教程

外边距margin

1、只写一边的外边距
margin-left:左外边距
margin-right:右外边距
margin-top:上外边距
margin-bottom:下外边距

2、写四方的外边距
2.1、margin:上，右，下，左;(顺时针一圈)
例子：margin:25px 50px 75px 100px;
上边距为25px
右边距为50px
下边距为75px
左边距为100px
2.2、margin:上下，左右;
例子：margin:25px 50px;
上下边距为25px
左右边距为50px
注意：margin: 0 auto; 可以设置水平居中

border边框

CSS边框属性允许你指定一个元素边框的样式和颜色。
1、border-style：设置边框样式
常用属性值：
dotted: 定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框
double: 定义两个边框。两个边框的宽度和 border-width 的值相同
2、border-width：设置边框宽度
3、border-color：设置边框颜色
4、border-radius：设置边框为圆角
border:2px solid red;
设置边框宽度为2px,样式为实线，颜色为红色（现在基本上都用这种简写）

内边距padding

和margin外边距一样，在这里不一一介绍了

content内容

content基本上可以为任何标签（行内元素不能设置宽高，要先转换为行内块元素）

盒子模型实际宽高

实际高度：（height为内容高度）
(margin-top)+(border-top)+(padding-top)+height
+(padding-bottom)+(border-bottom)+(margin-bottom)
实际宽度：（width为内容宽度）
(margin-left)+(border-left)+(padding-left)+width
+(padding-right)+(border-right)+(margin-right)

css选择器

1、通配符选择器
作用：用来清除网页自带的边距
格式：*{ }

*{
	margin: 0;
	padding: 0;
 }

2、标签选择器
格式：标签{ }

div{
	width: 200px;
	height: 100px;
	border: 3px solid black;
	}

3、id选择器
格式：#{ }

#div1{
	margin-top: 50px;
	width: 400px;
	height: 400px;
	background-color: aliceblue;
	border: 1px solid red;
	}

4、class选择器
格式： .{ }

.div1{
	width: 200px;
	height: 100px;
	border: 3px solid green;
	}

5、复合选择器
作用：设置的每个标签都能应用这个样式
格式：元素，选择器，选择器…{ }
设置a标签，div class选择器，div id选择器的字体颜色为红色

a,.div,#div{
		color: red;
		}

6、父子选择器
作用：用来缩小范围，精确操作元素
格式：父标签>子标签{ }
设置ul标签中的li标签字体大小为16px；

ul>li{
	font-size: 16px;				
	}

7、后代选择器
格式：父标签子标签{ }

ul li{
	color: beige;
	}

父子选择器与后代选择器的区别：
ul>li中只有ul下的li标签才会采用此样式，而ul下的li下的li标签就不能使用此样式，而后代选择器是ul下的所有li标签都能应用此样式，所以后代选择器的范围更广，父子选择器的范围更精确
8、伪类选择器
作用：主要用于添加一些选择器的特殊效果。
格式：标签：{ }
anchor伪类：
让链接的不同状态可以以不同的方式显示
a:link {color:blue;}：设置未访问的链接显示为蓝色
a:visited {color:green;} ：设置已访问的链接显示为绿色
a:hover {color:gray;} ：设置鼠标移动到链接上时显示为灰色
a:active {color:yellow;} ：当鼠标点击链接时显示为黄色（可以长时间按住鼠标不松手检验）

9、优先级与权重值
优先级：
标签自带样式 < 通配符选择器 < 标签选择器 < class选择器 < id选择器 < 行内样式 < ! important
注意：
样式相同时优先级高的会覆盖优先级小的，不同的样式属性都会起效果
说道权重值先来一个示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.ul>li{
				color: green;
			}			
			.li1{
				color: red;
			}
			ul>li{
				color: blue;
			}
		</style>
	</head>
	<body>
		<ul class="ul">
			<li class="li1">演示优先级1</li>
			<li class="li1">演示优先级2</li>
		</ul>
	</body>
</html>

结果大家可能想"演示优先级1"和"演示优先级2"是蓝色的，但结果却是绿色的，为什么呢?
这就涉及到了权重值,在实际问题中，比较复杂，我们不能只用选择器自带的优先级来判断，还要通过权重值
标签选择器<class选择器<id选择器<行内样式<! important
权重： 1 10 100 1000 max
通过这个权重占比来计算优先级，我们再来看一下为什么会是绿色：.ul>li是class选择器加上标签选择器，所以它的优先级为10+1=11，而ul>li是标签选择器加标签选择器，所以，它的优先级为1+1=2，同理，,li1的优先级为10，所以显示为绿色

float浮动

属性值：
left：向左浮动
right：向右浮动
注意：
1、若是float：right，写在最前面的浮动时会靠在最右边
2、若父容器宽度不足时，会自动换行
3、若是设置了浮动，会脱离文档流，显示在更上一个图层，原有文档流中的位置会空出来，所以设置浮动后可以把块级元素放在同一行，因为不在文档流里了
4、清除浮动：clear:both(原因：把原来文档流中的浮动位置空出来)

overflow

属性值：
hidden：超出部分不显示
scroll：通过滚动条查看超出部分

定位

1、static:静态(默认)
2、relative:相对定位：配合(left,top)|(left,bottom)|(right,top)|(right,bottom)
注意：根据父元素或者相邻元素计算偏移量
3、absolute:绝对定位：
注意：
3.1、脱离文档流，单独存在，参照物为left,right等值设置的浏览器顶点位置
3.2、如果父级元素设置了定位【relative|absolute|fixed】，根据父级设置位置
3.3、如果父级设置为static，则寻找父级的父级，如果都没有，就一直找到body，根据body，设置位置
4、fixed:固定定位：
注意：
脱离文档流，参照物为浏览器边框
设置left,right,top,bottom等属性值时，元素会发生位置偏移
z-index属性：
1、z-index 用在绝对定位的容器上。不是绝对定位的容器用这个样式是没有用的。
2、z-index 的值大的容器会叠在z-index 的值小的容器上面。
3、可以设置为null清除z-index效果

裂缝中的豆芽

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS常用属性

创建CSS的三种方式通过style属性引用样式通过style标签引用样式通过link标签引用css文件<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title>  <style type="text/css"> span{ color: green;
复制链接

扫一扫