CSS

最新推荐文章于 2024-09-22 13:36:41 发布

枫悟

最新推荐文章于 2024-09-22 13:36:41 发布

阅读量193

点赞数 1

分类专栏：前段基础知识文章标签： CSS Python 前段基础引入CSS

本文链接：https://blog.csdn.net/Feng_xiaowu/article/details/100120160

版权

前段基础知识专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS

引入方式

行内样式表
```
<body style="color:red">
```

内联样式表

<style
	div{
		color:red;
		font-size:60px;
		}
</style>

外联样式表

<link rel="stylesheet"  type="text/css"  href=""/>
**href后面接CSS文件名**

CSS基本语法格式

样式以键值对的形式出现,键值对以:分开,结尾一定要加上’;’
CSS文件中不要写style
注释格式为—/* 注释内容 */

常用选择器

元素选择器

选择器	说明
*	通用选择器,会选择所有元素
类型选择器	或者叫标签选择器
id选择器	根据标签的id值进行选择,不能重复(使用格式为`#+id值`)
class选择器	根据标签的class值进行选择,可重复,且可有多个(格式为`.+class值`)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style>
			/* 通用选择器 */
			* {
				color: aqua;
				}
			/*标签选择器(类型选择器)  */
			p {
				font-size: 30px;
				color: red;
			}
			/* id选择器 */
			#sici {
				font-size: 20px;
				color: green;
			}
			/* class选择器 */
			.person {
				color: black;
				font-size: 20px;
			}
		</style>
	</head>
	<body>
		<p>举杯歌一曲,请君为我倾耳听</p>
		<div class="person">安得广厦千万间,大庇天下寒士俱欢颜</div>
		<div id="sici">山有木兮木有枝,心悦君兮君不知</div>
	</body>
</html>

关系选择器

选择器	说明
E F	选择被E元素包含的所有F元素(常用)
E > F	选择所有作为E元素的子元素F(常用)
E +F	选择紧贴在E元素之后的F元素
E ~F	选择E元素后面的所有F的兄弟元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* ol标签里面的所有li标签 */
			/* E F,选择被E元素包含的所有的F元素(常用) */
			ol li{
				color: #000080;
			}
			/* 选择ul标签中的ul标签里面的li标签 */
			/* E > F  选择所有作为E元素的子元素F(常用)*/
			ul > ul >li{
				color: red;
			}
		</style>
	</head>
	<body>
		<ol>
			<li>写Python跟着lucky老师走</li>
			<li>工作轻松找</li>
			<ol>
				<li>轻松拿高薪</li>
			</ol>
		</ol>
		<hr />
		<ul>
			<li>写Python跟着lucky老师走</li>
			<li>工作轻松找</li>
			<ul>
				<li>轻松拿高薪</li>
			</ul>
		</ul>
	</body>
</html>

属性选择器

选择器	说明
E[attr]	选择具有attr属性的元素
E[attr=‘val’]	选择具有attr属性且属性值为val的元素
E[attr^=‘val’]	选择具有attr元素且属性值一val开头的字符串的元素
E[attr$=‘val’]	选择具有attr元素且属性值以val结尾的字符串的元素
E[attr*=‘val’]	选择具有attr元素且属性值中包含val的字符串的元素
E[attr~=‘val’]	选择具有attr属性并且属性值为用空格分开的字词列表，其中一个等于val扥元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* E[attr] 选择具有attr属性的元素*/
			input[name=userpasswd]{
				border: 2px solid #008000;
			}
			/* E[attr='val'] 选择具体的attr属性且属性值为val的元素 */
			input[type=text]{
				background-color: #0000FF;
				border: #000000 2px solid;
			}
			/* E[attr^=val]* 选择E中的attr属性且属性值以val开头的元素*/
			a[href^=http]{
				color: red;
				font-weight: bold;
			 }
			 /* E[attr$=val]* 选择E中的attr属性且属性值以val结尾的元素 */
			a[href$=cn]{
				color: #800080;
				font-weight: bold;
				font-style: italic;
			}
		</style>
	</head>
	<body>
		<h2>属性选择器的使用</h2>
		<form>
			<p>用户名:<input type="text" name="username"  placeholder="用户名"/></p>
			<p>密码:<input type="password" name="userpasswd" placeholder="密码输入..."</p>
			<p><a href="http://www.baidu.com">百度一下</a></p>
			<p><a href="http://www.sohu.com">搜狐</a></p>
			<p><a href="http://www.chinaedu.edu.cn"><h3>中国教育信息网</h3></a></p>
		</form>
	</body>
</html>

伪类选择器

选择值	说明
link	设置访问时的特殊样式
visited	设置访问后的特殊样式
hover	设置鼠标移动到所在位置时的特殊样式
active	设置激活之后的特殊样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 伪类选择器a标签用的较多 */
			/* link,为访问时的颜色 */
			a:link{color: red;}
			/* visited 访问后的颜色 */
			a:visited{color:green}
			/* 鼠标移动到该位置时的状态 */
			a:hover{color:black}
			/* 点击鼠标不放,激活之后的状态 */
			a:active{font-size: 100px;color: navy;font-weight: bold;}
		</style>
	</head>
	<body>
		<a href="http://www.baidu.com"><h3>百度</h3></h3></a>
	</body>
</html>

伪对象选择器

属性	说明
:first-letter	向文本的第一个字母添加特殊样式
:first-line	向文本的首行添加特殊样式
:before	在元素之前添加内容
:after	在元素之后添加内容

p:first-line
  {
  color:#ff0000;
  font-variant:small-caps;
  }
  
p:first-letter
  {
  color:#ff0000;
  font-size:xx-large;
  }
  
h1:before
  {
  content:url(logo.gif);
  }

h1:after
  {
  content:url(logo.gif);
  }

选择器优先级

选择器	权重
通用选择器	0.0.0.0
伪对象选择器	0.0.0.1
标签选择器	0.0.0.1
class选择器	0.0.1.0
属性选择器	0.0.1.0
伪类选择器	0.0.1.0
ID选择器	0.1.0.0

尺寸单位

单位

单位	说明
px	像素,绝对单位
%	百分比,相对单位
em	相对于父元素的倍数
rem	相对于HTML元素的倍数

属性

属性	说明
width	宽度
height	高度
min-width	最小宽度
min-height	最小高度
max-height	最大高度
max-weight	最大宽度

字体设置

属性	说明
font-style	字体样式 normal为正常 italic表示斜体
font-weight	normal正常 blod加粗 100-900
font-size	字体大小,可使用相对单位em,rem,%
font-family	字体族,设置字体系列(使用什么字体)
font	组合写法,要求顺序固定,且font-size和font-family不能省

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.one{
				width: 300px;
				height: 100px;
				background-color: #008000;
				/* font-size设置字体大小 */
				font-size: large;
				/* font-family 设置字体类型,使用什么字体 */
				font-family: "arial black";
				/* font-style 设置字体样式,italic为斜体 */
				font-style: italic;
				/* normal正常 bold加粗 */
				font-weight: bold;
				float: left;
				}
		</style>
	</head>
	<body>
		<div class="div">
			<div class="one">昨夜西风凋碧树,独上高楼,望尽天涯路</div>
			<div class="two">衣带渐宽终不悔,为伊消得人憔悴</div>
		</div>
	</body>
</html>

文本修饰

属性	说明
text-indent	首行缩进
text-align	水平对齐方式
line-height	行高,可实现单行为本的垂直居中对齐,若等于行高则为文本居中
text-decoration	文本的划线处理(下划线)
vertical-align	设置内联元素在行内的垂直对齐方式
overflow	超出背景的时候可选择什么特殊样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div div{
				border: 1px #0000FF solid;
				font-size: 30px;
				/* 设置内联元素在行内的垂直对齐方式 */
				vertical-align: sub;
			}
			span{
				 /* 使用display:block ,把行级转为块级 */
				display: block;
				width: 250px;
				line-height: 20px;
				border:  2px red solid;
				/* text-align 水平对齐方式 */
				text-align: left;
				/* 首行缩进 */
				text-indent: 2em;
				/* 设置文本的下划线 none没有下划线;overline每行都添加下划线*/
				text-decoration:overline;
				/* 设置文本的大小写,capitalize首字母大写 */
				text-transform: capitalize;
				
			}
		</style>
	</head>
	<body>
		
		<div class="div"><h2>人生三重境界</h2>
			<div class="one">昨夜西风凋碧树,独上高楼,望尽天涯路</div>
			<div class="two">衣带渐宽终不悔,为伊消得人憔悴</div>
			<div class="three">梦里寻他千百度,蓦然回首,那人却在灯火阑珊处</div>
		</div>
		<hr />
		<span >a人生三重境界:
			昨夜西风凋碧树,独上高楼,望尽天涯路;
			衣带渐宽终不悔,为伊消得人憔悴;
			梦里寻他千百度,蓦然回首,那人却在灯火阑珊处.
		</span>
	</body>
</html>

背景设置

属性	说明
background-color	背景色
background-image	背景图片
background-repear	背景图片平铺效果
background-size	背景图片的尺寸
background-position	背景图片的位置
background-attachment	背景图片的附着位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				border: 2px red solid;
				width: 800px;
				height: 500px;
				/* 背景颜色 */
				background-color: #008000;
				/* 背景图片填充 */
				background-image: url("../img标签/05.jpg");
				/* 背景图片是否平铺  repeat或者no-repeat*/
				background-repeat: no-repeat;
				/* 背景图片只平铺x轴 */
				/* background-repeat: repeat-x; */
				/* 背景图片只平铺y轴 */
				/* background-repeat: repeat-y; */
				/*背景图片位置(right/left/center/top/bottom)可结合使用 */
				/* 背景定位给一个值的情况 */
				/* background-position: right; */
				/* background-position:left; */
				/* background-position:center; */
				/* 背景定位给两个值的情况 */
				/* background-position:left bottom; */
				background-position:right top;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

列表设置

属性	说明
list-style-type	小图标类型(none disc circle square)
list-style-position	小图标位置
list-style-image	小图标的图片
list-style	组合时使用情况

表格设置

属性	说明
table-layout	设置显示单元、列和行的算法
border-collapse	设置是否把表格边框合并为单一的边框
border-spacing	表格的间隙
empty-cells	是否显示单元格边框

定位设置

position:元素在水平面的定位方式

属性	说明
static	默认的状态,定位的偏移不起作用
relative	相对于自身文档流中的偏移(常用)
absolute	相对于距离自身最近的父元素进行偏移
fixed	相对于窗口定位,不会随窗口内容滚动而滚动

z-index :垂直方向上的偏移(没有单位,给定数值即可)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 300px;
				height: 200px;
				position: relative;
			}
			/* 添加z-index可以使数据流往外移动,这样可以实现想覆盖的效果 */
			.guang{
				background-color: green;
				position: relative;
				top: 30px;
				/* z-index: 1; */
			}
			.yi{
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div class="guang">安得广厦千万间,大庇天下寒士俱欢颜</div>
		<div class="yi">衣带渐宽终不悔,为伊消得人憔悴</div>
	</body>
</html>

布局相关设置

属性	说明
overflow	溢出容器部分的处理(auto,hidden,visible,scroll)
visibility	用来控制元素的显示与隐藏
display	设置元素的显示情况
float	浮动
clear	清除浮动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.first,.second{
				width: 50px;
				height: 50px;
				border: 3px red solid;
				float: left;
			}
			.third{
				width: 300px;
				height: 200px;
				border: 4px #666666 solid;
				/* 清除浮动是清除浮动带来的影响 */
				clear: left;
			}
		</style>
	</head>
	<body>
		<div class="first">one</div>
		<div class="second">two</div>
		<div class="third"></div>
	</body>
</html>

盒子模型

属性	说明
border	边框
padding	内边距
margin	外边距

margin的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			 body,ul,li{
				list-style: none;
				margin: 0;
				padding: 0;	
			}
			li{
				width: 100px;
				height: 100px;
				background-color: red;
			}
			li:nth-child(2){
				background-color: gray;
			}
			li:nth-child(3){
				background-color: #000000;
			}
			li:nth-child(4){
				background-color:yellow
			}
			li:nth-child(5){
				background-color:purple
			}
			li:nth-child(6){
				background-color: #00FFFF;
			}
			/* margin 到外边框四周的距离 */
			li:first-child{
				自动,水平居中,但不会垂直居中
				margin:auto;
			}
			/* 若给定一个值,则到四周的距离都相同 */
			li:nth-child(3){
				margin: 10px;
			}
			/* 若给定两个值,则是上下  左右*/
			li:nth-child(4){
				margin: 10px 30px;
			}
			/* 给定三个值,则为上  左右  下 */
			li:nth-child(5){
				margin: 20px 40px 60px;
			} 
			/* 注意----上下距离会重叠,左右距离不会 */
			div{
				width: 100px;
				height: 100px;
				background-color:yellowgreen;
				float:left;
			}
			.one{
				/* background-color: #000000; */
				margin-right:10px;
			}
			.two{
				margin-left: 10px;
			}
		</style>
	</head>
	<body>
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<hr ><br />
		<div id="one"></div>
		<div id="two"></div>
	</body>
</html>

padding的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#container{
				width: 100px;
				border: 3px red solid;
				/* 使用margin:0px auto 可以使标签水平居中 */
				margin: 0px auto;
				/* 设置内部与内边框的四周的距离 */
				/* 给定一个值则上下左右的距离均为给定的值大小 */
				/* padding: 40px; */
				/* 给定两个值,此时上下为20px 左右为50px */
				/* padding: 20px 50px; */
				/* 三个值的情况,此时上为10px  左右为30px  下为80px */
				/* padding: 10px 30px 80px; */
				/* 给定四个值,则按照上 右 下 左 的顺序来相应赋值 */
				/* padding: 10px 20px 30px 50px; */		
				/* 若想给单边设置距离,则需要指明方向 */
				padding-top: 50px;
				padding-left: 20px;
				padding-bottom: 80px;
				padding-right: 40px; */
			}	
		</style>
	</head>
	<body>
		<div id="container">
			衣带渐宽终不悔,为伊消得人憔悴
		</div>
	</body>
</html>