JavaWeb--------CSS基础

煜9527

已于 2023-08-15 21:50:31 修改

阅读量7.7k

点赞数

分类专栏：编程文章标签： css 前端

于 2018-03-06 20:02:47 首次发布

本文链接：https://blog.csdn.net/sinat_41655101/article/details/79462955

版权

编程专栏收录该内容

100 篇文章 9 订阅

订阅专栏

一. 概念

CSS 指层叠样式表（Cascading Style Sheets）。使用 CSS 控制整个站点的样式和布局，帮助我们实行表现与结构分离的开发模式。 CSS 是一种用来表现HTML或XML的标记语言，属于浏览器解释型语言，可以直接由浏览器执行，不需要编译。

语法和规则：CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。其中，CSS声明总是以分号(;)结束，声明组以大括号({})括起来: p {color:red;text-align:center;}。CSS 注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。以 "/*" 开始, 以 "*/" 结束。

<div> ，div 是html 的一个普通标签，进行区域划分，用于页面的布局。它属于块级元素，单独显示一行。必须结合CSS使用，否则没有任何意义。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>div效果演示</title>
		<style>
			div{
				border: 1px solid red;
				/*width: 400px;
				height: 200px;*/
			}			
		</style>
	</head>
	<body>
		<div id="">
			<!--传智播客-->
		</div>
		传智播客AAA
	</body>
</html>

运行结果：

<span>，span是html 的一个普通标签，被用来组合文档中的行内元素。它属于内联元素，不单独显示一行。必须结合CSS使用，否则没有任何意义。span标签是span没有固定的格式表现。当对它应用样式时，它会产生视觉上的变化。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>span演示</title>
		<style>
			span{
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<span>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！
		</span>
		
	</body>
</html>

运行结果：

二 . 选择器：

2.1 基本选择器

元素选择器、类选择器、id选择器

class 选择器，用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示。id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>3 种基本选择器（元素选择器、类选择器、id选择器）</title>
		<style>
			div{
				font-size: 10px;
				color: red;
			}
			.div2{
				font-size: 20px;
				color: green;
			}
			#div5{
				font-size: 30px;
				color: blue;
			}
		</style>
	</head>
	<body>
		<div>
			这是元素选择器，范围是所有的项情况下使用。在style中以 div 开头    11 逗比是给小伙伴看的 div 11
		</div>
		<div class="div2">
			这是类选择器，范围是多个,部分项情况下使用。在style中以 .div2 开头 22 成熟是给陌生人看的 class 22
		</div>
		<div>
			33 逗比是给小伙伴看的 div 33
		</div>
		<div class="div2">
			44 成熟是给陌生人看的 class 44
		</div>
		<div id="div5">
			55 这是id选择器，范围是唯一,单个项情况下使用。在style中以 #div5 开头 55 幼稚是给喜欢的人看的 id 55
		</div>
	</body>
</html>

运行结果：

2.2 其它选择器

层次选择器、属性选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>其它选择器（层次选择器和属性选择器）</title>
		<style>	
			div p{
				font-size: 30px;
				color: green;
			}		
			input[type='text']{
				background-color: red;
			}
			
			
			input[type='password']{
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！33
		</div>
		<div>
			<p>
				层次选择器。逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！44
			</p>
		</div>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！55
		</div>
		<p>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！66
		</p>	
		属性选择器一，用户名；<input type="text" name="username"/><br />
		属性选择器二，密码：<input type="password" name="password"/>
	</body>
</html>

三. CSS的创建（引入）

CSS的3 种常用引入方式

内部引用和行引用，代码如下：

<!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 style="font-size: 20px;color: blue;">
			行内引用
		</div>
	</body>
</html>

外部引用，代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>外部引用</title>
		<link rel="stylesheet" href="style.css" type="text/css"/>
	</head>
	<body>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！11
		</div> 
	</body>
</html>

其中外部文件 style.css的代码为：

div{
	font-size: 30px;
	color: pink;
}

四. 浮动Float：

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列，往往是用于图像，但它在布局时一样非常有用。元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。使用clear清除浮动，元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。clear 属性指定元素两侧不能出现浮动元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS浮动</title>
		<style>
			#one{
				border: 1px solid red;
				width: 600px;
				height: 150px;
				float: left;
			}
			#two{
				border: 1px solid black;
				width: 600px;
				height: 190px;
				float:left;
			}
			#three{
				border: 1px solid blue;
				width: 600px;
				height: 150px;
				float: left;
			}
			/*清除浮动*/
		/*	#clear{
				clear: both;
			}*/
		</style>
	</head>
	<body>
		<div id="one">
			
		</div>
		<div id="clear">
			
		</div>
		<div id="two">
			
		</div>
		<div id="three">
			
		</div>
	</body>
</html>

五. 盒子模型：

margin类似于collspacing

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title>
<style>
div.ex
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>
</head>

<body>

<img src="/attachments/cover/cover_cssref.jpeg" width="250" height="250" />

<div class="ex">The picture above is 250px wide.
The total width of this element is also 250px.</div>

</body>
</html>

运行结果：