JavaWeb入门之HTML与CSS——2.CSS入门

最新推荐文章于 2023-07-13 16:37:53 发布

Elylicery

最新推荐文章于 2023-07-13 16:37:53 发布

阅读量251

点赞数

分类专栏： javaweb 文章标签： csss javaweb

本文链接：https://blog.youkuaiyun.com/sinat_38368658/article/details/99974270

版权

javaweb 专栏收录该内容

4 篇文章

订阅专栏

本文深入讲解CSS层叠样式表的基本概念，包括内联、内部和外部样式表的使用，优先级规则，常见选择器如ID、类、属性及后代、子元素、相邻元素选择器，以及伪类和伪元素的应用。同时，详细介绍了如何利用CSS进行两行三列、三行两列的布局设计，探讨了盒子模型的设置方法，包括背景、文本属性、边框、内边距和外边距的调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一章 css介绍

1-1 课程介绍

在这里插入图片描述

1-2 css

层叠样式表，样式通常存储在样式表中

1-3 为什么使用css

css样式定义如何显示HTML元素，是为了解决内容与表现分离的问题

1.什么是内容？
内容主要指HTML中的元素
2.什么是表现?
表现主要指内容在浏览器中呈现的样式

css的主要目的：可以让相同的一个页面在不同的浏览器当中呈现相同的样式

第二章 css声明，内外联样式以及css的优先级别

2-1 css声明

在这里插入图片描述
## css外联样式

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>css声明</title>
	<style>
		body{
			background-color: lightblue;
		}
	</style>
</head>
<body>
	这里是内容
</body>
</html>

定义css的两种方式

内联样式方式
外联样式方式

2-2 css内联样式

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<p style="color: lightcoral;font-weight: bolder;">这是一个段落内容</p>
</body>
</html>

在这里插入图片描述
这种内联方式设置样式只对当前标签有效

2-4 css外联样式方式

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>使用css外联样式</title>
    <style>
    	p {
    		color: lightblue;
    		font: bolder;
    	}
    </style>
</head>
<body>
	<p>这是一个段落内容</p>

</body>
</html>

这里用的是元素选择器。
现在将css样式内容嵌入到html中，并没有有效分离内容和表现。
应该使用其他方式：使用外联样式文件
html文件

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>使用css外联样式文件</title>
	<link rel="stylesheet" type="text/css" href="04.css">
</head>
<body>
	<p>这是一个段落内容.</p>
</body>
</html>

04.css文件

p {
	color: lightcoral;
	font-weight: bolder;
}

2-5 css使用方式的优先级别

内联优先级>外联优先级

第三章 css常见选择器和css中的伪元素

3-1 css四种常见选择器

选择器

ID选择器：id属性的特点是唯一不可重复的
元素选择器：通过元素名称来定位页面元素
类（class）选择器
属性选择器:

示例:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>css选择器</title>
	<style>
		#p {
			color: lightcoral;
		}
		.myclass{
			color: lightblue;
		}
		span{
			color: lightgreen;
		}
		[title]{
			color: lightgray;
		}
	</style>
</head>
<body>
	<p id="p">paragraph1</p>
	<p class="myclass">paragraph2</p>
	<span>paragraph3</span>
	<p title="this is p">paragraph4</p>
</body>
</html>

在这里插入图片描述
那种选择器用的最多？
id少用，常用类选择器和元素选择器

在这里插入图片描述

3-2 css的后代元素选择器

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>后代选择器</title>
	<style>
		span{
			background-color: lightblue;
		}
		div span {
			background-color: lightcoral;
		}
	</style>

</head>
<body>
	<div>
		<span>Span1
			<span>Span2</span>
		</span>
	</div>
	<span>Span3</span>
</body>
</html>

在这里插入图片描述

3-3 子元素选择器

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>子元素选择器</title>
	<style>
		span{
			background-color: lightblue;
		}
		div > span {
			background-color: lightcoral;
		}
	</style>

</head>
<body>
	<div>
		<span>Span1.In the div
			<span>Span2.In the span that's in the div</span>
		</span>
	</div>
	<span>Span3.Not int a div at all</span>
</body>
</html>

在这里插入图片描述

3-4 css的相邻元素选择器

值得是目标元素的下一个兄弟元素

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>相邻兄弟选择器</title>
	<style>
		#one + li {
			color: lightcoral;
		}
	</style>
</head>
<body>
	<ul>
		<li id="one">One</li>
		<li>Two</li>
		<li>Three</li>
	</ul>
</body>
</html>

在这里插入图片描述

3-5 css选择器中的伪类

最重要的一个应用就是改变a元素的几种样式内容
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>伪类</title>
	<style>
		a:link{
			color: lightblue;
		}
		a:hover{
			color: lightcoral;
		}
		a:active{
			color: lightgreen;
		}
		a:visited{
			color: lightgray;
		}
	</style>
</head>
<body>
	<a href="#">百度 baidu.com</a>
</body> 
</html>

在这里插入图片描述

3-6 css伪元素

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>伪元素</title>
	<style>
		q::before{
			content: "<<";
			color: lightgreen;
		}
		q::after{
			content: ">>";
			color: lightgray;
		}
	</style>
</head>
<body>
	<q>一些引用</q>,他说,<q>哈哈哈</q>
</body>
</html>

在这里插入图片描述

3-7 css选择器的优先级别

内联样式的优先级别高于外联样式
外联样式 : id选择器级别最高，其次是类选择器，元素选择器和伪类

第四章 CSS设置样式

4-1 css设置背景样式

4-2 css设置文本属性

在这里插入图片描述

第五章 CSS布局

5-1 css两行三列布局

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>两行三列布局</title>
	<style>
		html,body{
			margin: 0px;
		}
		header{
			background-color: lightblue;
			height: 150px;
		}
		#container{
			background-color: lightgray;
			height: 450px;
		}
		nav {
			background-color: lightgreen;
			height: 100%;
			width: 150px;
			float: left;
		}

		aside {
			background-color: lightcoral;
			height: 100%;
			width: 100px;
			float: right;
		}

		article {
			background-color: lightyellow;
			height: 100%;
		}
	</style>
</head>
<body>
<header></header>
<div id="container">
	<nav></nav>
	<aside></aside>
	<article></article>
</div>
</body>
</html>

5-2 三行两列布局

<!DOCTYPE html>
<html lang="en">
<head>
	<title>三行两列布局</title>
	<style>
		html,body{
			margin: 0;
		}
		header {
			height: 100px;
			background-color: lightblue;
		}
		#container {
			height: 500px;
			background-color: lightgreen;
		}
		footer{
			height: 100px;
			background-color: lightslategray;
		}
		nav{
			width: 150px;
			background-color: lightyellow;
			height: 100%;
			float: left;
		}
		article{
			background-color: lightcoral;
			height: 100%;
			/*margin-left: 150px;*/
			overflow: hidden;
		}
	</style>
</head>
<body>
	<header></header>
	<div id="container">
		<nav></nav>
		<article></article>
	</div>
	<footer></footer>
</body>
</html>

在这里插入图片描述

第六章 css设置盒子模型

6-1 css盒子模型

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>盒子模型</title>
	<style>
		div {
			width: 200px;
			height: 100px;
			background-color: lightgreen;

			border: 10px black solid;
			padding: 10px;
			margin:10px;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

在这里插入图片描述

6-2 设置盒子边框

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>盒子模型的边框</title>
	<style>
		div {
			width: 200px;
			height: 100px;
			background-color: lightgreen;

/*			border-width: 10px;
			border-color: lightcoral;
			border-style: solid;*/

			border: 10px lightcoral solid;
		}
	</style>
</head>
<body>
	<div>
	</div>
</body>
</html>

在这里插入图片描述

6-3 盒子模型内边距

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>盒子模型的边框</title>
	<style>
		#d1 {
			width: 200px;
			height: 100px;
			background-color: lightgreen;

/*			padding-top: 30px;
			padding-right: 20px;
			padding-bottom: 10px;
			padding-left: 5px;*/

			padding: 10px 20px 30px 40px;
		}

		#d2 {
			width: 200px;
			height: 100px;
			background-color: lightcoral;
		}

	</style>
</head>
<body>
	<div id="d1">
		<div id="d2"></div>
	</div>
</body>
</html>

在这里插入图片描述

6-4 盒子模型外边距

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>盒子模型的边框</title>
	<style>
		#d1 {
			width: 200px;
			height: 100px;
			background-color: lightgreen;

			margin: 50px;
		}

		#d2 {
			width: 200px;
			height: 100px;
			background-color: lightcoral;
		}

	</style>
</head>
<body>
	<div id="d1"></div>
	<div id="d2"></div>
</body>
</html>

在这里插入图片描述