CSS学习内容

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不用bottomposition: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(数值 - 数值)属性计算,往往用于百分比和固定像素混搭的时候,注意:运算符左右两边必须有空格,否则会报错
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页