css学习心得

css

通过内嵌样式表来选择文本字体的大小和颜色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			p{
				font-size:16px;
				color: blue;
			}
		</style>
	</head>
	<body>
		<!-- 
		px 像素单位
		行内样式表-直接写在标签中
		-->
		<p>你好</p>
	</body>
</html>

通过导入外部样式表来选择文本字体的大小和颜色

css代码：

p{
	font-size:16px;
	color: blue;
}

HTML代码


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 导入外部样式表-->
		 <link href="css/new_file.css" rel="stylesheet"/>
	</head>
	<body>
		<p>你好</p>
	</body>
</html>

选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 标签选择器 */
			p{
				color:blue;
				font-size:20px;
			}
            
			/* id选择器 */
			#title{
				color:blue;
				font-size:15px;
			}
            
			/* 类选择器 */
			.p1{
				color:green;
			}
			.p2{
				color:pink;
				}
            
			/* 选择器优先级 
			id>类>标签
			*/
		   
		    /* *：通配选择器，匹配网页中所有的标签 */
		   *{
			   font-family:楷体;
			   }
		  
		  /* 选择器组合：可以为多个选择器定义相同的样式表 */ 
		   #title,.p1,h1{
			   font-family:黑体;
		   }
            
		</style>
	</head>
	<body>
		<h1>真的吗</h1>
		<p id="title" class="p1">你好</p>
		<p class="p1">我也好</p>
		<p class="p2">他也好</p>
	</body>
</html>

文本

text-decoration对文字进行修饰
underline 下划线
line-through 删除线

letter-spacing:字符间距

word-spacing:字母间距

text-indent:首行缩进

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.p1{
				font-weight: 900;
				font-size: 1.25rem;
				text-align: center;
				text-decoration:none;
				/*
				text-decoration对文字进行修饰
					underline 下划线
					line-through 删除线
				 */
				letter-spacing: 10px;
				/* letter-spacing:字符间距 */
				word-spacing: 5px;
				/* word-spacing:字母间距 */
				text-indent: 2rem;
				/* text-indent:首行缩进 */
				font-family: 字魂49号-逍遥行书;
			}
			a{
				text-decoration: none;
				font-size: 6.25rem;
			}
		</style>
	</head>
	<body>
		<p class="p1">张兰直播间再现经典！与汪小菲前任同框，现任女友却被前夫爆料<br />
		在娱乐圈这个充满八卦和话题的世界里，汪小菲一家可谓是自带流量。最近，张兰在直播间与前夫的现任妻子意外同框，这一罕见画面瞬间点燃了网友们的八卦之火。<br 
		/>
		直播中，张兰与汪小菲的前任妻子谈笑风生，两人似乎并没有因为过去的恩怨而尴尬。相反，她们的互动还显得十分自然，这让不少网友纷纷表示：“这气度，真是绝了！”</p>
		<a href="选择器.html">百度</a>
	</body>
</html>

背景

background-image:设置图片背景

background-position:设置背景位置

background-size:设置背景大小

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p{
				color: white;
				text-align: center;
				background-color: chartreuse;
				width: 800px;
				height: 800px;
				font-family: 字魂49号-逍遥行书;
				font-size: 20ex;
				background-image: url("img/1.jpg");
				background-position: center center;
				background-size: 100%;
			}
		</style>
	</head>
	<body>
		<p>你好</p>
	</body>
</html>

css的伪类

hover：当鼠标移入某标签时，会自动切换到此样式表

active：当鼠标点击标签时，会自动切换到此样式表

focus：拥有鼠标焦点的标签

		/* 当鼠标移入某标签时，会自动切换到此样式表 */
			a:hover{
				color: black;
				font-family: 字魂49号-逍遥行书;
			}
		/* 当鼠标点击标签时 ，会自动切换到此样式表*/
		input:active{
			color: aliceblue;
		}
		
		/* 拥有鼠标焦点的标签 */
		.txt:focus{
			background-color: aqua;
		}

标签分类

块级标签：无论内容多少，都会独占一行，一般用来进行网页布局。

可以设置宽高 width-height

行级标签：只占自身大小，不会占一行。设置宽高无效。
行级块标签：

div和span

div：是一个无任何默认格式的块级标签，用于进行网页布局，其不会有默认属性影响分布的情况
span：行级标签，类似于div

盒模型

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

标签=内容区+内边距+边框
内容区（content）
1. width设置内容区宽度
2. height设置内容区高度
**注：**如果没有设置标签的内边距和边框，则内容区默认和盒子大小一样
内边距（padding）：内容区到边框以内的区域
1. padding：上px 右px 下px 左px
2. padding：上下px 左右px
3. padding：上下左右10px
边框（border）：标签可见标的最外部
1. border: ;
2. border-radius: ;
外边框（margin）
1. 外边距可以设置为auto：
  
  左右设置auto时，两边边距相等，标签水平居中
  
  上下设置auto时，上下边距相等，标签水平居中
2. 外边距不能改变标签大小，只能改变标签位置

文档流

浮动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.nav{
				background-color: aqua;
				float: left;
				padding: 10px 40px ;
			}
			.nav:hover{
				background-color: brown;
			}
		</style>
	</head>
	<body>
			<div class="nav">网站首页</div>
			<div class="nav">产品案例</div>
			<div class="nav">公司一览</div>
		<div style="background-color: blue;">in你导航切换</div>
	</body>
</html>

此时浮动后效果如图所示
要使浮动目标内容居中则需使这三个内容在同一块级标签上并使左右居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.nav{
				background-color: aqua;
				float: left;
				padding: 10px 40px ;
			}
			.navbox{
				width: 600px;
				margin: 0px auto;
			}
			.nav:hover{
				background-color: brown;
			}
		</style>
	</head>
	<body>
		<div class="navbox">
			<div class="nav">网站首页</div>
			<div class="nav">产品案例</div>
			<div class="nav">公司一览</div>
		</div>
		<div style="background-color: blue;">in你导航切换</div>
	</body>
</html>

效果如图：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

此时浮动的内容处于顶层图层，要消除这种问题有两种解决方法：

为父级标签设置一个高度，将父级标签撑开

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.nav{
				background-color: aqua;
				float: left;
				padding: 10px 40px ;
			}
			.navbox{
				width: 600px;
				margin: 0px auto;
				height: 40px;
			}
			.nav:hover{
				background-color: brown;
			}
		</style>
	</head>
	<body>
		<div class="navbox">
			<div class="nav">网站首页</div>
			<div class="nav">产品案例</div>
			<div class="nav">公司一览</div>
		</div>
		<div style="background-color: blue;">in你导航切换</div>
	</body>
</html>

2.在浮动的标签后使用清除浮动的属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.nav{
				background-color: aqua;
				float: left;
				padding: 10px 40px ;
			}
			.navbox{
				width: 600px;
				margin: 0px auto;
				height: 40px;
			}
			.nav:hover{
				background-color: brown;
			}
		</style>
	</head>
	<body>
		<div class="navbox">
			<div class="nav">网站首页</div>
			<div class="nav">产品案例</div>
			<div class="nav">公司一览</div>
			<div style="clear: left;"></div> <！--清除浮动的影响，自动撑开父级标签  -->
		</div>
		<div style="background-color: blue;">in你导航切换</div>
	</body>
</html>

结果如下：

  height: 40px;
  	}
  	.nav:hover{
  		background-color: brown;
  	}
  </style>

网站首页产品案例公司一览 <！--清除浮动的影响，自动撑开父级标签 --> in你导航切换 ```

结果如下：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传