开发者社区> 巴黎香榭> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Python全栈 Web(CSS常用样式大全)

简介:
+关注继续查看

常用内联样式:
	func-size
	color
	background-color
内部样式表:
	<style>
		选择器1{
			属性:值;
		}
		选择器2{
			属性:值;
		}
		...
	</style>
外链方式:
	<link rel="stylesheet" type="text/css" href=".css文件名">

样式优先级:
	默认 < 稳文档内嵌/元素选择器 < 行内
	不发生冲突 同步  发生冲突 后来者居上


选择器:
	标签选择器:
		p{
			color: red;
		}
	类选着器:
		.cls{
			样式
		}
		<p class="cls">文本</p>
		<p class="cls1 cls2"> 文本 </p>
	标签类结合:
		p.cls{
			样式
		}
		表示在指定标签中匹配class属性
	id选着器:
		#nav{
			样式
		}
		<div id="nav"></div>
	群组选择器:
		div, p{
			样式
		}
		<div></div>
		<p></p>
	后代选择器:
		#nav #npc/div{
			样式
		}
	子代选择器:
		选择器1>选择器2/标签{
			样式
		}
	伪类选择器:
		超链接伪类选择器:
			:link		访问前
			:visited	访问后
			:active		鼠标点按
			:hover		鼠标滑过
		其他元素伪类选择器:
			:hover		鼠标滑过
			:active		鼠标点按
		伪类选择器只能和其他选择器/元素结合使用
			p:hover{
				鼠标滑过p元素的新样式
			}
	选择器优先级:
		标签选择器:		1
		类/伪类选择器:	10
		id选择器:		100
		行内选择器:		1000


尺寸单位:
	px
	%
	in	英寸 1in 2.54cm
	pt	榜   1pt = 1/72 in
	cm
	m
	deg	角度


颜色单位:
	英文单词(transparent: 透明)
	rgb(r,g,b)	0~255
	rgba(r,g,b,a)透明度
	十六进制:#fff


元素分类:
	块元素
		独占一行 支持宽高
		div h1 p ul ol table form
	行内元素
		可以共行 大小由内容决定
		span i b label u sub sup
	行内块元素
		可以共行 支持宽高
		img input


常用属性:
	img{
		width: 300px;
		height: 300px;
		color: red;
		background-color: #fff;
		font-size: 24px;
		font-weight: normal; 	取消字体加粗
		text-decoration: none;	取消下划线
		vertical-align: top/middle/bottom; 
		左右元素与其的对齐方式(只能在行内块元素中使用)
	}


尺寸:
	img{
		width: 300px/50%;
		height: 300px/50%;
	溢出处理:
		overflow: visible/hidden/scroll/auto;		
		默认可见/溢出部分不显示/始终有滚动条溢出可用/自动产生滚动条
	}	


边框:
	div{
		border: width style color;
		宽度 样式 颜色 缺一不可
		border: 1px solid/dashed/dotted/double;
		实线/虚线/点线/双线
		border: none;	取消边框
	单独设置:
		border-top: 	上
		border-right:	右
		border-bottom:	下
		border-left:	左
		border-width:	宽度
		border-style:	样式
		border-color:	颜色
	三角标:
		width: 0px;
		height: 0px;
		border-top: 100px solid red;
		border-right: 100px solid green;
		border-bottom: 100px solid transparent;
		border-left: 100px solid transparent; 
		
	}
	轮廓线:
		div{
			outline: width style color;
			outline: none;	取消轮廓线
		}
	圆角边框:
		div{
			border-radius: 10px/10%;
			超过50%就是圆形
			border-radius: 10px 20px 30px 40px;  上 右 下 左
			一个值:表示是个角相等
			两个值:表示上下、左右相等
			三个值:左右相等 其他分别设置
			四个值:表示上右下左全不分别设置
		}
	边框阴影:
		div{
			box-shadow: offset-x offset-y blur spread color
			水平偏移 垂直偏移 延伸距离(可以省略) 阴影颜色
			box-shadow: 10px 10px 10px pink;

		}
盒模型:
	外边距:
		div{
			margin: 10px/10%;
			有四个值 最少一个 最多4个
			效果同上(圆角边框)
			margin: 0px; 		清除外边距
			margin: 0px auto;	在父元素内水平居中
			margin: -10px;		位置微调
		单独设置:
			margin-top: 	上
			margin-right:	右
			margin-bottom:	下
			margin-left:	左
			可以是像素也可以是百分比
		默认具有外边距的元素:
			body p h1~h6 ul ol
		}
	内边距:
		div{
			padding: 10px/10%;
			有四个值 最少一个 最多4个
			效果同上(圆角边框)
			padding-top 	上
			padding-right 	右
			padding-bottom 	下
			padding-left 	左
		具有默认内边距的元素:
			ol ul 文本框 密码框 按钮 td
		}
	声明盒模型计算方式:
		div{
			box-sizing: border-box/content-box; 
			内边距+边框+内容的共同尺寸/默认值
		}
	改变元素类型:
		div{
			display: block/inline/inline-block/none;
			转换为块元素(显示元素)/转换为行内元素/行内块元素/隐藏元素
		}
背景相关属性:
	背景颜色:
		background-color:red;
	背景图片:
		div{
			background-image:url("./1.jpg")
		图片平铺:
			background-repeat: repeat/no-repeat/repeat-x/repeat-y;
			水平和垂直平铺/不重复平铺/水平平铺/垂直平铺
		图片尺寸:
			background-size: 10px 10px/10%/cover/contain;
			当前元素宽 高/元素比例/将图片拉伸全部覆盖元素超出部
			分裁剪掉/将图片拉至刚好被容纳 超出部分不管
			拉伸:图片比例不变
		图片的位置:
			background-position: x/x% y/y%;		水平偏移/垂直偏移
			百分比参照尺寸获取
			background-position: 0% 0%;		图片左上角显示
			background-position: 100% 100%;	图片右下角显示
			background-position: 50% 50%;	图片居中显示
			background-position: left/center/right top/center/bottom;
			方位值表示:左/中/右 上/中/下
		}
	简写:
		div{
			background: color/url()/repeat/position; 
		}
文本相关属性:
	字体:
		div{
		字体大小:
			font-size: 24px;	设置字体大小
			font-family: "微软雅黑", "黑体", "KaiTi"; 	设置字体类型
		字体类型:
			font-weight: normal/bold/lighter;
			正常显示/加粗显示/极细文本
		字体加粗:
			font-weight: 400/700/100;
			数字越大越粗   400=normal/700=bold
		字体样式:
			font-style: normal/italic/oblique;
			正常显示/使用倾斜显示/使文本倾斜达到斜体效果
		简写:
			font: style weight size family;
			family 必须写 不写没效果
		}
	文本:
		div{
			color: green;		文本颜色
		文本对齐:
			text-align: left/center/right/justify;
			默认水平左对齐/居中/右对齐/两端对齐
		文本行高:
			line-height: 32px/2;
			设置行高位32像素/设置行高为字体大小的2倍
			文本居中方式:
				将行高设置为和元素一样的高度
				一行文本一定的垂直居中的 上下空隙由浏览器默认分配
		文本装饰线:
			text-decoration: underline/overline/line-through/none;
			下划线/上划线/删除线/取消下划线
		}
表格属性:
	div{
		width:; 
		height:;
		background:;
		color:;
		margin:;
		padding:;
	边框合并:
		border-collapse: separate/collapse;
		默认边框分离/合并边框
		td不支持外边距  只能写在table里
	边框边距:
		border-spacing: h-Value v-Value;
		border-spacing: 10px 10px;
		只能在表格分离的状态下使用
	}
过渡效果:
	div{
	过渡属性:
		transition-property: width/height;
		指定某个属性添加过渡效果 宽度过渡/高度过渡
		transition-property: all;	将所有能过渡的属性都进行过渡
		能够添加过渡的属性:所有颜色相关的、取值为数值的
	过渡时长:
		transition-duration: 1s/100ms;		1秒完成过渡/100毫秒
	时间曲率:
		transition-timing-function: ease/linear/ease-in/ease-out/ease-in-out;
		默认开始结束满中间块/匀速/开始慢结束块/开始块结束慢/慢开始结束中间加速后减速
	过渡延迟:
		transition-delay: 1s/100ms;
		1秒后开始过渡/100毫秒
		过渡时长必须设置其他可以省略 必须写在默认样式中
	简写:
		transition:property duration timing-function delay;
		duration必须写
	}

布局:
	普通流布局:
		默认方式  浏览器默认布局方式
	浮动布局:
		div{
			float: left/right/none;
			元素向左浮动停靠在其他元素便于/向右浮动/默认
		特点:
			元素飘浮会脱流 后面的元素会补位
			所有的元素只要设置浮动都可设置宽高
			行内元素或行内块元素浮动后 水平方向之间没有空隙
		浮动元素特殊效果:
			文字环绕效果 浮动元素会遮挡正常元素 但是不会遮挡内容
		解决不占位影响:
			1.指定父元素的高度
			2.父元素中设置 :overflow: hidden;
			3.清除浮动:
				clear: none/left/right/both;
				默认不处理/清除左浮影响/正常元素左边不允许出现浮动元素/两边都不允许
			4.父元素末尾添加空块元素 设置:clear: both;
		}
	定位布局:
		div{
			position: relative/absolute/fixed/static;
			相对定位/绝对定位/固定定位/默认文档流布局
			只有设置了非默认属性  才算是已经定位的元素
		偏移属性:
			用来配合已定位的属性 进行位置移动
			top: 10px;		以元素的上边界向下为正方向
			right: 10px;	以元素的右边界向左为正方向
			bottom: 100px;	以元素的下边界向上为正方向
			left: 10px;		以元素的左边界向右为正方向
		}
定位方式:
	div{
	相对定位:
		position: relative;
		按照当前位置偏移
	绝对定位:
		position: absolute;
		定位后会脱流  脱流的所有元素都可以设置宽高
		按照离他最近的祖先元素偏移 如果没有按照body位置偏移
		一般采用父元素相对定位 子元素绝对行为方式
		浮动 + 外边距调整元素位置 = 绝对定位 + 偏移属性
	固定定位:
		position: fixed;
		按照浏览器窗口进行定位 配合偏移属性使用 定位后元素都会变成块元素
	层叠次序调整:
		z-index: 0~n;		默认0 数字越大越靠上
		数值相同 后来者居上
		只能用在已经定位的元素上 子元素永远在父元素之上 不受层次影响
	}

显示方式:
	div{
		display: none/block/inline/inline-block;
		隐藏元素并且不占位/转换为块元素/转换为行内元素/转换为行内块元素
	}
显示效果:
	div{
		visibility: visible/hidden;
		默认显示/隐藏元素并占位
		opacity: 0~1;
		设置元素的透明度
		继承效果:
			子元素最终效果 = 父元素opacity * 自身opacity
		vertical-align: top/middle/bottom;
		调整垂直对齐方式 常见于行内块元素
		cursor: default/pointer/text/crosshair;
		默认值/设置为小手形状/输入I形状/ +形状
	}
转换属性:
	div{
		transform: 转换函数1 转换函数2...;
	转换原点设置:
		transform-origin: x y;
		transform-origin: 像素/百分比/方位值;		默认以元素中心为原点
	转换函数:
		平移转换:
			transform: transform(x,y);
			x:水平方向平移距离 y:垂直方向  一个值等于translateX(value)
			transform: translateX(value)	水平方向位移
			transform: translateY(value)	垂直方向位移

		缩放变换:
			transform: scale(value)/scaleX()/scaleY();
				正常缩放/横向缩放/垂直缩放
			value:默认1  大于1会等比放大 0~1会缩小 小于0会翻转
		旋转变换:
			transform: rotate(90deg/-90deg);
			顺时针旋转90度/逆时针旋转90度
			transform: rotate3d(45deg/-45deg);
			transform: rotateX(ndeg);	沿x轴翻转
			transform: rotateY(ndeg);	沿y轴翻转
			transform: rotateZ(ndeg);	沿z轴旋转
	旋转原点会影响旋转效果
	如果涉及旋转操作 会连带坐标轴一起旋转,影响后面的位移
	}






HTML 会跳动的小心心

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		#box{
			width: 200px;
			height: 160px;
			/*background-color: pink;*/
			margin: 100px auto;
			position: relative;
		}
		#box:hover{
			transform: scale(1.2);
		}
		.c1,.c2{
			width: 100px;
			height: 160px;
			position: absolute;
			border-radius: 50px 50px 0 0;
			background-color: red;
		}
		.c1{
			top:0;
			left:0;
			
			transform:rotate(45deg);
			transform-origin: right bottom; 
		}
		.c2{
			top:0;
			right: 0;
			transform:rotate(-45deg);
			transform-origin: left bottom;
		}

	</style>
</head>
<body>
	<div id="box">
		<span class="c1"></span>
		<span class="c2"></span>
	</div>
</body>
</html>


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
手把手教你用Python做web疫苗登记系统
手把手教你用Python做web疫苗登记系统
0 0
Python:使用PyJWT实现JSON Web Tokens加密解密
Python:使用PyJWT实现JSON Web Tokens加密解密
0 0
Python 实现Web隐藏目录扫描
**Web隐藏目录扫描:** 首先你需要自己寻找一个靠谱的字典,放入脚本根目录并命名为`dict.log`每行一个路径名称.
0 0
Python 实现Web容器指纹识别
当今的Web安全行业在进行渗透测试时普遍第一步就是去识别目标网站的指纹,从而进一步根据目标框架进行针对性的安全测试,指纹识别的原理其实很简单,目前主流的识别方式有下面这几种。
0 0
不错啊!用IIS web服务器搭建Python网站环境
不错啊!用IIS web服务器搭建Python网站环境
0 0
Web 应用程序,python判断文件是否存在,不存在则创建,如何将飞桨中的代码在pycharm中运行
Web 应用程序,python判断文件是否存在,不存在则创建,如何将飞桨中的代码在pycharm中运行
0 0
学习python web 需要的掌握技能、框架、必备工具、
学习python web 需要的掌握技能、框架、必备工具、
0 0
windows python web flask获取请求参数数据
windows python web flask获取请求参数数据
0 0
windows python web route 路由
windows python web route 路由
0 0
+关注
巴黎香榭
一个有梦想的咸鱼~~~
文章
问答
文章排行榜
最热
最新
相关电子书
更多
给运维工程师的Python实战课
立即下载
Python 脚本速查手册
立即下载
ACE 区域技术发展峰会:Flink Python Table API入门及实践
立即下载