css层叠样式表_css 列表叠-CSDN博客

本文链接：https://blog.csdn.net/weixin_43908649/article/details/104384035

一.简介

css层叠样式表在主页制作时可有效地对页面的布局、字体、颜色、图片、背景和其它效果实现精确的控制。

二.注释

/**/

三.css属性

背景，字体，文本，列表，以键值对形式设置，中间用分号分割，div{width：20px；height：30px；}

weight:20px;//宽
height:20px;//高
align-content: center;//内容水平居中
text-align: center;//文本水平居中
background: #00FF00 url(img/1.jpg) no-repeat fixed top;//背景底色为红色，并插入图片1.jpg（图片不重复，且固定在顶部，可以将top改为center变为固定在中间）
background-color:yellow;//背景颜色
filter: grayscale(100%);//将图片设置为灰色
background-image: url(img/1.jpg);//背景图片
//下面为设置了背景图片之后使用的属性
background-repeat: repeat-y;//背景图片y方向重复，也可以设置x轴方向重复repeat-x，no-repeat不重复
background-size:80px 60px;//背景图片大小
background-attachment: fixed;//固定背景图像
background-position:center;//背景图片定位为中间或上下左右，有的浏览器需要将attachment加上才有用，使用于=[精灵图定位](https://blog.csdn.net/weixin_43908649/article/details/120839106?spm=1001.2014.3001.5501)
vertical-align:text-top;//图片位于段落中，图片顶部与文字对齐
border:5px solid red;//设置边框为5px,dotted点状 solid实线double双线 dashed虚线，颜色为红色
border-style:dotted solid;//设置上下边框为点状，左右边框为实线
border-color:#ff0000 #0000ff;//分别设置上下，左右边框颜色
border-bottom-style:solid;//设置下边框为实线
border-bottom:thick dotted #ff0000;//单设置上top下bottom左left右right边框
border-bottom-color:#ff0000;//设置下边框颜色
border-radius:2em;//四周添加圆角
border-bottom-left-radius:2em;//向左下角添加圆角
border-bottom-width: 15px;//设置下边框线的粗细
border-collapse:collapse;//合并表格边框，没有规定 !DOCTYPE可能会引起错误
position: relative/absolute//定位，配合上下左右使用
top:距离上边的距离
box-shadow: 10px 10px 5px #888888;//给div盒子设置阴影，依次设置右方，下方阴影长度，阴影浓度，值越大，颜色越淡，阴影颜色
text-shadow: 5px 5px 5px #FF0000;//文本阴影
float:right;//向右浮动，占元素位置，设置多个图片同时向右浮动，第一个图片挨着浏览器，其他图片挨着上一个图片，依次向左排
clear:both;//清除浮动，只对本身元素有效，设置both之后下一个浮动元素两边都没法挨着本浮动元素。元素向左浮动，清除右边浮动，就可以在同一行了
cursor:default;//鼠标指针为三角空心小箭头
cursor:auto;cursor:text;//都是一个大写的I
cursor:wait;//加载转圈
cursor:help;//小箭头下加一个小问号
cursor:pointer;//小手
cursor:move;//移动，四个指向上下左右的空白箭头
cursor:crosshair;//十字架
display: inline（行级元素）/block（块级元素）/inline-block/none
font-style//字体样式
font-family//字体
font-weight//粗细
font-size//大小
line-height:90%;//行高
font-variant: small-caps;//字母设置为小型大写字母字体，normal为标准字体
list-style: square inside url('/i/eg_arrow.gif');//设置列表标记为一个小图片
list-style-image:
list-style-position:outside;//inside为向后缩进,项目标记放置在文本以内。outside标记位于文本的左侧。
list-style-type:circle/square/upper-roman/lower-alpha/upper-alpha设置标记类型为空心圆，实心方框，罗马数字，小写abc
margin:2cm 4cm 3cm 4cm;//外边距，文本距离边框的距离，上右下左
margin-bottom
padding:2cm 4cm;//内边距，表格与表格之间的距离，上下2，左右4
padding-bottom
overflow: scroll;//内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
overflow: scroll;//默认，内容不会被修剪，会呈现在元素框之外。
overflow:hidden;//内容会被修剪，并且其余内容是不可见的。
overflow:auto;//如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
overflow-x:同上;//对左右属性裁剪
overflow-y:同上;//对上下属性裁剪
text-decoration: underline;//文本下划线
text-decoration: line-through;//文本删除线
z-index:-1;//图片置于下层
visibility:visible;//可见
visibility:hidden;//不可见

四.css样式引入的方法

1.行内引入(优先级高，开发时经常使用，不利于重用和扩展,是html和css的混排编写,不利于页面维护)

<h1 style="color: red; font-size: 20px;font-family: '楷体';">我是用行内样式</h1>

2.内嵌式：页面内样式<在head标签里面加上style标签>(使html和css分离开,但是不能实现应用于多个页面)

<head>
	<style>
		span{
			color: blueviolet;
			font-size:20px;
		}
	</style>
</head>
<body>
	<span>我是一个小花猫</span>
</body>

3.链入式：外部样式表<先单独定义一个css文件,在head中用link引入该css文件>注意,引入时不能放在style里面

link标签的作用：1. 定义文档与外部资源的关系；2. 是链接样式表
rel属性用于设置对象和链接对象的关系，就是连接进来的是什么对象。

//rel="stylesheet"，rel是关联的意思，一般不需改动.
<link href="./外部样式.css" rel="stylesheet" type="text/css">

在这里插入图片描述

4.同时设置内嵌式和链入式css，内嵌式的优先级要高于链入式

五.选择器

优先级：!important >行内样式>id选择器>类选择器>元素选择器>通配符选择器 > 继承选择器 > 浏览器默认属性
注意：定义id选择器时，id不能重复

1.元素选择器（标记选择器）,html每个标签都可以作为一个元素选择器
标签名{属性；}

<head>
	<style>
		span{
			color: blueviolet;
			font-size:20px;
		}
	</style>
</head>
<body>
	<span>我是页面内引入内联元素1</span>
	<span>我是页面内引入内联元素2</span>
</body>

2.id选择器(每个元素都可以加id属性，id必须唯一)
#id{}

3.类选择器(每个元素都可以加class属性，class可以不唯一)
.divClass{}

4.属性选择器(比较常用的是对表单进行设置)
input[type="text"]
元素[attribute] [type] 选择带有 type 属性所有元素
元素[attribute=value] [type=“text”] 选择 type=“text” 的所有元素
元素[attribute~=value] [type~=“ex”] 选择type属性包含单词 “ex” 的所有元素
元素[attribute¦=value] [lang¦=“te”] 选择type属性值以 “te” 开头的所有元素。
元素[attribute^="value"] [type^=“tex”] 选择text属性值以 “tex” 开头的所有元素
元素[attribute$="value"] [type$=“ext”] 选择type属性值以"ext"结尾的所有元素
元素[attribute*="value"] [type*=”ex”] 选择type属性值中包含子串"ex"的所有元素

<style>
	input[type="text"]{
		background-color: paleturquoise;//设置表单的背景颜色
	}
</style>
username:<input type="text" name="username">

5.后代元素选择器(父级下所有后代元素都会被选中)
父级子级{属性；}

h1 strong{color: red;}
<h1>
	English is<strong> very </strong><strong> very </strong> important!
</h1>

6.子元素选择器(只有第一层级的子元素才会被选中)
父级>子级{属性;}

h1>strong{color: red;}
<h1>
	English is<strong> very </strong><strong> very </strong> important!
</h1>

7.并列选择器
选择器,选择器{属性;}
选择器之间带逗号,选择器可以使用任何选择器[id选择器,类选择器等]

8.相邻兄弟选择器
选择器1+选择器2
选择与选择器1同级且紧接在其后的第一个选择器2

9.通配符选择器
*
选择所有元素

10.伪类选择器

注：选择顺序为link、visited、active、hove

11.伪类元素选择器

六.浮动

1.float浮动:
float: left;
left(向左浮动):浮动元素浮动在了上面,接下来的元素会上移
right:某元素是浮动的,它前一个元素也是浮动的,则后一个元素会跟在前一个元素的后面(即前一个元素的左侧)
none(默认,不浮动)
inherit(从父元素继承float属性)

2.clear清除浮动(打破横向排列):
clear:right
left(左侧不允许浮动元素),right,both(两侧都不允许浮动元素),none,inherit
只能控制清除元素自己本身,不能影响其他元素,若想让它右边没有元素,只能对自己设置clear:right

3.注意:
div是块级元素,自上而下排列,独占一行
浮动是让某个div脱离标准流,漂浮在标准流上面,和标准流不在一个层次
div1浮动,但div2,div3,div4任然在标准流中,使用div2会向上移动占据div1的位置,形成一个新的流

七.div盒子模型

1.边框border
①:简写:border:width style color;例如：border: 1px solid yellow;
style可以取:none(无边框),solid(实线),dotted(点状线),dashed(虚线),double(双线)
②:单边定义:border-left:width style color;
③:单边单独属性:border-left-width:;

2.外边距margin(盒子与盒子之间的距离)
①:margin:value;(相对浏览器左上角)
①:简写:margin:top right bottom left;(上右下左不能颠倒,上左优先)
②:单边设置:margin-top:value;value可以取值为auto
margin:auto;(由浏览器自动设置,水平居中)
(设置上下会靠左,设置左右会靠上)
margin-right为默认static,设置了也不会变化,只有在absolute时才会变化

3.内边距padding(盒子与元素之间的距离)
①:padding:value;(上和左优先)
①:简写:padding:top right bottom left;(上右下左不能颠倒)
②:单边设置:padding-top:value;(设置上下会靠左,设置左右会靠上)

八.定位

一.静态定位(没有参照物)position:static

二.相对定位(相对于自己原来的位置)position:relative
position: relative;
top: 100px;
left: 100px;
注意:
1.使用相对定位,span元素还是span元素,设置宽高无效;div还是div
2.只有配合上下左右才有效(只需要两个竖直和水平)
3.设置left与top与原来设置的margin与padding不冲突，是在margin和padding的基础上在操作top和left

三.绝对定位(相对于已经定位的祖先元素或者浏览器窗口)position:absolute
注意:
1.祖先元素绝对定位了,就相对于祖先元素,祖先元素没有,就相对于浏览器
2.被相对定位的元素,脱离文档流,不占空间(下面元素会上移)
3.要配合上下左右
4.span会变成一个块级元素,设置宽高会改变大小
div在不设置宽高的前提下,会变成一个内联元素,大小会随文字变化而变化

#div7{
	width: 100px;
	height: 100px;
	background-color: green;
	border: 2px double red;
	position: absolute;
	top: 100px;
	right: 100px;
}
#span1{
	background-color: yellowgreen;
	border: 1px solid crimson;
}
<div id="div7">xnsjzhsdkjaszcbfhzjbc sjcb dzsgfsbzcsjzdfcv</div>
<span id="span1">sasnjdnahcbfdj</span>

四.固定定位(相对于浏览器窗口)position:fixed
注意:1.脱离文档流,不占空间
2.页面滚动时,元素始终在浏览器的固定位置,不随滚动条滚动而改变位置
3.是绝对定位的一种,span会变成div,div会变成span

五.定位元素的层叠顺序
Z-index:auto(默认)/number(可正可负)
Z-index大的叠在小的上面(auto叠在-1的上面,0的下面)

六、区分float和position的绝对定位和相对定位
float(浮动定位)
脱离文档流，z-index在0这一层，定位方式为left right，直到碰到它的包围框或其他浮动元素为止
display：inline-block
absolute绝对定位
脱离了文档流，没有保留占位信息，但是也大于z-index，普通元素不认为它存在
以附近祖先元素或者父级元素为基准定位，如果无，则相对于浏览器
display：inline-block
realtive相对定位
元素浮了起来，z-index大于0（应该是1），不论怎么移动总是覆盖普通文档流元素，相对元素是保留了自己的占位信息，但普通文档流中的元素不会认为它不存在
以自身为基准定位，移动方式为：left right bottom top
display：inline-block,inline,block
display：block，将元素显示为块级元素,每一个块级元素都是从新的一行开始
display ：inline，将元素显示为行内元素，高度，行高以及底边距不可改变，高度就是内容文字或者图片的宽度，多个相邻的行内元素排在同一行里，知道页面一行排列不下，才会换新的一行。
display：inline-block，将元素显示为行内块状元素，既有block的宽度高度特性，又有inline的同行特性，使行内块级元素会排列在同一行。在同一行内有不同高度内容的元素时，通常要设置对齐方式如vertical-align: top;来使元素顶部对齐。

九.练习


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>div表单校验</title>
		<style type="text/css">
			#div1{
				border: 1px solid blue;
				background-color: lightpink;
				width: 100%;
				height: 600px;
				margin: auto;
			}
			#div2{
				border: 3px solid gray;
				background-color: white;
				width: 800px;
				height: 400px;
				margin: auto;
				position: absolute;
				top: 100px;
				left: 360px;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<div id="div2">
				<table border="0" cellpadding="10px" cellspacing="0">
					<form action="http://www.baidu.com">
						<tr>
							<td width="100px">用户名</td>
							<td><input type="text"/></td>
						</tr>
						<tr>
							<td width="100px">密码</td>
							<td><input type="password"/></td>
						</tr>
						<tr>
							<td width="100px">确认密码</td>
							<td><input type="password"/></td>
						</tr>
						<tr>
							<td width="100px">性别</td>
							<td>
								<input type="radio" name="sex"/>男
								<input type="radio" name="sex"/>女
							</td>
						</tr>
						<tr>
							<td>籍贯</td>
							<td>
								<select>
									<option value="bj">北京</option>
									<option value="sh">上海</option>
									<option value="hn">河南</option>
								</select>
								<select>
									<option value="zy">信阳</option>
									<option value="sq">商丘</option>
									<option value="zz">郑州</option>
								</select>
							</td>
						</tr>
						<tr>
							<td width="100px">爱好</td>
							<td>
								<input type="checkbox" name="hobby"/>篮球
								<input type="checkbox" name="hobby"/>足球
								<input type="checkbox" name="hobby"/>排球
								<input type="checkbox" name="hobby"/>羽毛球
							</td>
						</tr>
						<tr>
							<td width="100px">邮箱</td>
							<td>
								<input type="text"/>
							</td>
						</tr>
						<tr>
							<td colspan="2">
								<input type="submit" value="注册"/>
							</td>
						</tr>
					</form>
				</table>
			</div>
		</div>
	</body>
</html>