WEB02_CSS

最新推荐文章于 2021-06-23 00:32:20 发布

秋予暮

最新推荐文章于 2021-06-23 00:32:20 发布

阅读量100

点赞数

分类专栏： Web Java

本文链接：https://blog.csdn.net/qq_41439534/article/details/99706500

版权

Java 同时被 2 个专栏收录

44 篇文章 0 订阅

订阅专栏

Web

26 篇文章 0 订阅

订阅专栏

一.CSS概述

1.什么是CSS
CSS是英文Cascading Style Sheet的缩写又称为层叠样式表。主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（高宽、边框样式、边距等）以及版面的布局等外观显示样式。
2.创建CSS文件
不需要使用复杂的工具来创建CSS文件，可以使用文本编辑器或者Web开发工具来创建。无论采用哪种方式，都是要创建一个以.css为扩展名的文件
3.CSS样式规则
CSS的语法由3部分构成：选择器、属性和属性值
格式如下：

选择符{
	属性:值
	}

选择器用来指定CSS样式作业的HTML对象，花括号内是对该对象设置的具体样式，属性和属性值以键值对的方式出现，使用英文冒号":“分隔。多个属性之间可以使用英文分号”;"分隔。例如

p{
	text-align:center;
	color:red;
	}

4.CSS引入方式
CSS 的引入方式分为三种
第一种：行内引入

<div style="color:red;font-size: 100px;">  
	HelloWorld
</div>

第二种：内部引入方式

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

第三种方式：外部引入
将样式代码写在一个以.css为后缀的CSS文件里，然后在每个需要用到这样样式的网页里引入这个CSS文件。通过HTML的link元素将外部的样式文件链接到网页里。例如：

<head>
		<meta charset="UTF-8">
		<title>外部引入</title>
		<!--外部引入css文件
			link用于外部引入
			href文件路径
		-->
		<link rel="stylesheet" href="style.css" type="text/css" />
	</head>

rel和type属性表明这是一个样式文件，href指定外部样式文件的路径。

优先级问题: 谁离需要修饰的元素近，谁的样式生效，其它的被覆盖掉。(就近原则)
5.选择器

元素选择器
元素名{
属性名 1:属性值 1;
属性名 2:属性值 2;
属性名 3:属性值 3;
}
任意的HTML标记都可以作为选择符，如果多个相同的元素设置相同的样式，使用此种方式最为合适。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				font-size: 30px;
				color: pink;
				
			}
		</style>
	</head>
	<body>
		<div>
			难舍之物亦难留
		</div>
			<div>
			难舍之物亦难留
		</div>
			<div>
			难舍之物亦难留
		</div>
			<div>
			难舍之物亦难留
		</div>
	</body>
</html>

类选择器
.类名{
属性名 1:属性值 1;
属性名 2:属性值 2;
属性名 3:属性值 3;
}
对HTML标记的class属性使用，对多个元素设置相同的样式，此时使用类选择器比较合适。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--对类的选择用.+classs名-->
		<style type="text/css">
			.div2{
				color: red;
			}
		</style>
	</head>
	<!--类选择器可以控制多个-->
	<body>
		<div>
			难舍之物亦难留
		</div>
		<div class="div2">
			难舍之物亦难留
		</div>
		<div class="div2">
			难舍之物亦难留
		</div>
		<div>
			难舍之物亦难留
		</div>
	</body>
</html>

ID 选择器
#id 属性名{
属性名 1:属性值 1;
属性名 2:属性值 2;
属性名 3:属性值 3;
}
Id 保证唯一。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--对id的选择用#+id-->
		<style type="text/css">
			#div4{
				font-size: 30px;
				color: pink;
			}
			
		</style>
	</head>
	<!--单一的选择可以用id选择器尽量保证id的唯一-->
	<body>
			<div>
			难舍之物亦难留
		</div>
		<div class="div2">
			难舍之物亦难留
		</div>
		<div class="div2">
			难舍之物亦难留
		</div>
		<div id="div4">
			难舍之物亦难留
		</div>
	</body>
</html>

6.CSS常见样式

border：设置边框的样式
格式：宽度样式颜色
例如：border: 1px solid red;
solid实线，none无边，double双线等
width、height：用于设置标签的宽度、高度。
margin：设置位置 auto居中
float：设置浮动 left左浮动 right右浮动 none不浮动
clear：清除浮动 left不允许左测有浮动 right不允许右侧有浮动 both同时清除两侧浮动的影响
字体：color、font-size
背景色：background-color

二.常见的DIV+CSS布局

1.DIV
DIV是一个放置内容的容器，用于大面积、大区域的块状排版，样式需要编写CSS来实现。格式如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>div效果演示</title>
		<style>
			div{
				border: 1px solid red;
			}
		</style>
	</head>
	<!--div是一个快级元素
		只要用来页面布局
	div必须与css相配合单独出现没有意义-->
	<body>
		<div id="">
			你好
		</div>
		你好((>ω< ))
	</body>
</html>

2.span
span是一个内联元素(显示一行),单独使用没有意义,必须结合css使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>span演示</title>
		<style type="text/css">
			span{
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<span>
			span是一个内联元素(显示一行),单独使用没有意义,必须结合css使用
		</span>
		主要用于对括起来的内容进行修饰
	</body>
</html>