CSS简介

最新推荐文章于 2024-04-15 16:37:06 发布

alex-zhou96

最新推荐文章于 2024-04-15 16:37:06 发布

阅读量128

点赞数

分类专栏： HTML与CSS

本文链接：https://blog.csdn.net/ZHOUJIAN_TANK/article/details/88530325

版权

HTML与CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS简介

为了让网页元素的样式更加的丰富, 也为了让网页的内容和样式能拆分开, CSS由此而诞生.

CSS是 Cascading Style Sheets 的首写字母缩写,意思是层叠样式表.

有了CSS, html 中大部分表现样式的标签就废弃不用了, html只负责文档的结构和内容,

表现形式完全交给CSS, 这样使得html文档变得更加简洁.

CSS
CSS全称是 Cascading Style Sheet的缩写，重叠样式表，是对HTML进行样式修饰语言。
多个不同样式修饰同一个HTML时，样式冲突的部分会使用优先级高的样式，不冲突的部分共同修饰

CSS的作用

可以让HTML变得更加炫酷
便于后期维护，html的内容与样式相分离
提高代码的复用性，同一个样式可以应用于多个HTML中

CSS的引入方式

1、内嵌样式，不建议使用
把css的代码嵌入到HTML标签中

<div style="color:red;font-size:100px;">你是百年难遇的编程奇才</div>

2、内部样式，内容多的情况下不建议使用

<style type="text/css">
	div{
			color:red;
			font-size:100px;
				}
</style>

使用Style标签进行CSS的引入，在Style标签中编写CSS

3、连入外部样式，建议使用
将CSS样式在一个单独CSS文件编写，可以被HTML引用，下面代码引入名为style.class的文件

<link   rel="stylesheet"   type="text/css"    href="style.css"/>

将HTML和CSS分离，可以提高CSS的复用，利于后期维护

CSS选择器

CSS的作用就是修饰 HTML,每个HTML标签都可以被CSS修饰，这时就需要使用选择器让CSS和被修饰的HTML
标签产生关系，CSS中有4种选择器，分别是： 基本选择器，属性选择器，尾元素选择器，层级选择器。
具体可参考其手册。

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选择器</title>
</head>
<body>

	<!-- Css的作用就是修饰html,每个html标签都可以被css修饰
		这时就需要使用选择器让CSS和被修饰的html标签产生关系，
		CSS中有4种选择器，分别是:基本选择器，属性选择器，尾元素选择器，层级选择器。
	 -->
	
	
	
	
	<span>元素选择器</span> <br/>
	
	<p id="id1">id1选择器</p>
	<p id="id2">id2选择器</p>
	<p id="id1">id1选择器</p>
	<p id="id2">id2选择器</p>

	<div class="class1">class1选择器</div>
	<div class="class1">class1选择器</div>
	<div class="class2">class2选择器</div>
	<div class="class2">class2选择器</div>

	<form action="">
		<table>
		
			<tr>
				<td>用户名：</td>
				<td><input type="text"/></td>
			</tr>
			
			<tr>
				<td>密码：</td>
				<td><input type="password"/></td>
			</tr>
		
		</table>
	
	</form>

</body>


	<style type="text/css">
	
	/*选择器的优先级： id>class>元素  */
	/* 元素选择器  */
		span{
			color:green;
			fontsize:80px;
			background-color: red;
		}
		

	/*id选择器  */
	   #id1{
	   		color:pink;
	   }
	   
	   
	   #id2{
	   	
	   	color:yellow;
	   	font-size: 60px;
	   }
		


	/* class选择器  */
	.class1{
		color:blue;
		font-size:70px;
	}
	
	.class2{
		color:orange;
		font-size:80px;
	}	
	
	
	/* 选择所有元素  */
	*{
		color:blue;
		background-color: purple;
	}
		
	
	/*属性选择器  */	
	[type="text"]{
	
		background-color: yellow;
	}
	
	[type="password"]{
		background-color: red;
	}

	</style>

</html>

css常用属性

CSS里面有很多可以修饰html的属性，这里介绍一些常用的
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS常用属性</title>
</head>
<body>
	
	<div>
		Hello CSS!
	
	</div>
	
	
	<ul>
		<li>小猴子1024</li>
		<li>小猴子1024</li>
		<li>小猴子1024</li>
		<li>小猴子1024</li>
	</ul>





</body>
	<style type="text/css">
		div{
			/*  CSS文字属性   */
			font-size: 100px;
			font-family: 黑体;
			
			/*  CSS文本属性 */
			color:red;
			text-decoration: underline;
			text-align: center;
			text-transform: uppercase;
			text-shadow: 0 0 3px;
			 
			/* CSS背景属性  */
			background-color:yellow;
			background-image: url("D:\\java\\html\\css\\image\\image.jpg"); 
			background-size: 80px 60px;
			
			/*尺寸属性  */
			height = 300px;
			width = 400px;
			
		}
		
		
		
		ul{
			/* CSS列表属性  */
			list-style-type: decimal-leading-zero;
			
			
		}
		
	
	</style>


</html>

盒子模型

HTML中有些标签是可以无限嵌套的，比如div，可以将这些标签看做是一个盒子，盒子中装有一个东西。
盒子是可以有厚度的，这个厚度在CSS中使用 border 表示。
盒子的内壁和里面装的东西之间是有距离的，这个距离在CSS中使用padding表示。
盒子外壁和外部的东西也是有距离的，这个距离在CSS中使用margin表示。
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
</head>
<body>
	<!-- 盒子模型：HTML中有些标签是可以嵌套的，比如div，可以将这些标签看做是一个盒子，盒子中装有一个东西。盒子是可以有厚度的 -->
	<!-- 可以使用盒子模型进行排版布局 -->
	
	<div id="box">
		<div id="thing">
			This is a thing.
		</div>
	</div>
</body>
	
	
<style type="text/css">

		
		#box{
			
			/*   设置边框    */
			border-bottom:15px red solid;
			border-left: 10px blue solid;
			border-right:8px  yellow solid;
			border-top:7px pink solid;
			
			/*   设置内边距   */
			padding:10px 50px 80px 20px;
			
			/*  设置外边距   */
			margin:2cm 2cm 2cm 2cm;
		
		}
		
		
	
		#thing{
			  
			  width:100px;
			  height:100px;
			  background-color: green;
		}

</style>

</html>

小结：CSS对网页内容进行修饰，关键从：选择器，常用属性进行把握（不必强行记忆，随用随查，原理要清楚。）

alex-zhou96

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS简介

CSS简介CSSCSS全称是 Cascading Style Sheet的缩写，重叠样式表，是对HTML进行样式修饰语言。多个不同样式修饰同一个HTML时，样式冲突的部分会使用优先级高的样式，不冲突的部分共同修饰CSS的作用可以让HTML变得更加炫酷便于后期维护，html的内容与样式相分离提高代码的复用性，同一个样式可以应用于多个HTML中CSS的引入方式1、内嵌样式，...
复制链接

扫一扫

专栏目录