CSS学习内容

最新推荐文章于 2022-10-25 18:00:51 发布

~哦~豁~

最新推荐文章于 2022-10-25 18:00:51 发布

阅读量221

点赞数

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

本文链接：https://blog.csdn.net/ziao890122/article/details/109122002

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CSS基础

1-CSS简介

CSS 指层叠样式表 (Cascading Style Sheets)
通过样式定义如何显示 html 元素
通过选择器封装样式表，可使样式和标签分离，提高工作效率

2-CSS选择器

id选择器

以#开头，匹配 id 值相同的标签，标签的 id 不是唯一，运行两个不同的标签使用相同的 id

<!DOCTYPE html>
<html>			
	<head>
		<style>
			#a{
				width:50px;
				height:100px;
				background:red;
			}
		</style>
	</head>
	<body>
		<div id = "a">样式</div>
	</body>
</html>

类（class）选择器

以 . 开头，匹配class 值相同的标签，一个标签可以有多个class 值，使用空格分离，如果样式冲突，后写的覆盖先写的

<!DOCTYPE html>
<html>			
	<head>
		<style>
			.a{
				width:50px;
				height:100px;
				background:red;
			}
		</style>
	</head>
	<body>
		<div class = "a">样式</div>
	</body>
</html>

元素选择器

直接以标签名来进行命名的，匹配标签名相同的标签

<!DOCTYPE html>
<html>			
	<head>
		<style>
			div{
				width:50px;
				height:100px;
				background:red;
			}
		</style>
	</head>
	<body>
		<div >样式</div>
	</body>
</html>

通配选择器

以 * 开头，通常用来清除 margin 和 padding 的默认值

<!DOCTYPE html>
<html>			
	<head>
		<style>
			*{
				margin:0;
				padding:0;
				background:#000000;
			}
		</style>
	</head>
	<body>
		<div >样式</div>
	</body>
</html>

样式优先级

原则：范围越大，优先级越低

内联样式 > id选择器 > 类选择器 > 元素选择器 >通配选择器

3-样式的属性

标签的样式必须成对出现： 样式名：样式值；样式名：样式值...

样式属性	描述	用法
`width`	定义标签的宽度	`width:10px;`
`heigth`	定义标签的高度	`heigth:10px;`
`background`	定义标签的背景色	`background:red;`
`display`	设置标签的元素类型	`display:block;`
`display:block;`	将标签转换为块元素
`display:inline;`	将标签转换为行元素
`display:inline-block`	将标签转换为行内块
`display:none`	隐藏元素并脱离文档流
`visibility`	隐藏元素但不脱离文档流	`visibility:hidden;`
`margin`	外边距	`margin:10px;`
`margin:10px;`	设置元素上下左右的外边距都为10px
`margin:10px 20px;`	设置元素上下外边距10px,左右外边距20px	如果左右外边距为auto，则元素水平居中
`margin:10px 20px 30px 40px;`	设置元素的上右下左边距，从上开始顺时针设置
`margin-left`	左外边距	`margin-left:20px;`
`margin-rigth`	右外边距	`margin-rigth:20px;`
`margin-top`	上外边距	`margin-top:20px;`
`margin-bottom`	下外边距	`margin-bottom:2px;`
`padding`	内边距	`padding:20px;`
`padding:10px;`	设置元素上下左右的内边距都为10px
`padding:10px 20px;`	设置元素上下内边距10px,左右外边距20px	如果左右外边距为auto，则元素水平居中
`padding:10px 20px 30px 40px;`	设置元素的上右下左边距，从上开始顺时针设置
`padding-left`	左内边距	`padding-left:20px;`
`padding-rigth`	右内边距	`padding-rigth:20px;`
`padding-top`	上内边距	`padding-top:20px;`
`padding-bottom`	下内边距	`padding-bottom:2px;`
`border`	边框线，包括：大小、颜色、样式 3个值	`border: solid;`
`border: solid;`	设置边框为实线
`border:dashed;`	设置边框为虚线
`border:dotted;`	设置边框为圆点
`border:outset;`	设置边框为凸起感
`border:inset;`	设置边框为凹陷感
`border-left`	设置左边框	`border-left:solid;`
`border-rigth`	设置右边框	`border-rigth:solid;`
`border-top`	设置上边框	`border-top:solid;`
`border-bottom`	设置下边框	`border-bottom:solid;`
`box-sizing`	设置边框线和内边距是否在元素内部	`box-sizing:conten-box;`
`box-sizing:conten-box;`	设置内边距和边框线都在元素本身以内绘制
`float`	将元素浮动起来，一旦浮动起来，元素会自动变成行内块,并脱离文档流	`float:left;`
`float:left;`	将元素靠左浮动
`float:rigth`	将元素靠右浮动
`clear`	清除浮动必须设置在和浮动同级的元素中，不是不浮动，只是让浮动的元素回到文档流中	`clear:left;`
`clear:left;`	清除左浮动
`clear:rigth;`	清除右浮动
`clear:both;`	左右浮动都清除
`position`	对元素进行定位，如果为非static定位，position还需要搭配 left/rigth/top/bottom使用，用了left不用rigth,用例top不用bottom	`position:relative;`
`position:relative;`	相对定位，不会脱离文档流，其实位置在该元素的static位置，即该元素原本位置
`position:absolute;`	绝对定位，脱离文档流，起始位置先找父元素，如果父元素非static定位，则参照父元素的左上角定位，否则一直往上找
`position:static;`	静态定位，可以看做没有定位，默认就是静态定位,static 定位中，left/rigth/top/bottom设置无效
`position:fixed;`	屏幕定位，脱离文档流，只参照屏幕位置
	定位元素覆盖的规则，非static覆盖static定位，后写的覆盖先写的，z-index 值大的覆盖值小的
`z-index`	设置定位z-index值，可以对元素覆盖的顺序起作用，大的覆盖小的	`z-index:3;`
`px`	像素 (长度单位)
`%`	参照父元素的百分比
`em`	参照父元素的 font-size,1em为父元素的1倍
`rem`	参照html元素的font-size
`vh`	参照屏幕的高度
`vw`	参照屏幕的宽度
`calc(数值 - 数值)`	属性计算，往往用于百分比和固定像素混搭的时候，注意：运算符左右两边必须有空格，否则会报错

~哦~豁~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习内容

CSS基础1-CSS简介CSS 指层叠样式表 (Cascading Style Sheets)通过样式定义如何显示 html 元素通过选择器封装样式表，可使样式和标签分离，提高工作效率2-CSS选择器id选择器以#开头，匹配 id 值相同的标签，标签的 id 不是唯一，运行两个不同的标签使用相同的 id<!DOCTYPE html><html> <head> <style> #a{ width:50
复制链接

扫一扫