网页开发基础：CSS

最新推荐文章于 2022-07-12 19:38:17 发布

slow is fast.

最新推荐文章于 2022-07-12 19:38:17 发布

阅读量302

点赞数

分类专栏： Java Web 文章标签： css html html5

本文链接：https://blog.csdn.net/wwj17647590781/article/details/120235402

版权

Java Web 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

asdsCSS 是W3C 协会为弥补HTML 在显示属性设定上的不足而制定的一套扩展样式标准，它的全称是Cascading Style Sheet。CSS 标准中重新定义了HTML 中原来的文字显示样式，增加了一些新概念，如类、层等，可以对文字重叠、定位等。在 CSS 还没有引入到页面设计之前，传统的HTML 语言要实现页面美化在设计上是十分麻烦的，例如要设计页面中文字的样式，如果使用传统的HTML 语句来设计页面就不得不在每个需要设计的文字上都定义样式。CSS 的出现改变了这一传统模式。

asdsadadsdsdssdasdasdsadasdasdasdsadassdasdsadasdasdsadasdsadassadasdas————《JavaWeb从入门到精通》

CSS 技术介绍

ssdssCSS 是「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

CSS 规则

ssdss在CSS 样式表中包括3 部分内容：选择符、属性和属性值。语法格式如下：{属性:属性值;}

ss2dss①、选择符：又称选择器，是 CSS 中很重要的概念，所有 HTML 语言中的标记都是通过不同的 CSS 选择器进行控制的。
ssd3ss②、属性：主要包括字体属性、文本属性、背景属性、布局属性、边界属性、列表项目属性、表格属性等内容。其中一些属性只有部分浏览器支持，因此使CSS 属性的使用变得更加复杂。

s4sdss③、属性值：为某属性的有效值。属性与属性值之间以 " : " 号分隔。当有多个属性时，使用 " ；" 分隔。

s4sdsseg: p{ color:red; font-size:30px;}

s4sdss注：一般每行只描述一个属性，CSS 注释：/* 注释内容*/

CSS 和HTML 的结合方式

ssdss在页面中包含CSS 样式的几种方式，其中包括行内样式、内嵌式和链接式。

ssddsss行内样式：比较直接的一种样式，直接定义在HTML 标记之内，通过style 属性来实现。

ssddsss内嵌式：是在页面中使用标记将CSS 样式包含在页面中。

ssddsss链接式：最常用的一种引用样式表的方式，将CSS 样式定义在一个单独的文件中，然后在HTML 页面中通过标记引用，是一种最为有效的使用CSS 样式的方式。

第一种：

ssdss在标签的 style 属性上设置 " key:value value; "，修改标签样式。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>
	<!--需求1：分别定义两个div、span 标签，分别修改每个div 标签的样式为：边框1 个像素，实线，红色。-->
	<div style="border: 1px solid red;">div 标签1</div>
	<div style="border: 1px solid red;">div 标签2</div>
	<span style="border: 1px solid red;">span 标签1</span>
	<span style="border: 1px solid red;">span 标签2</span>
</body>
</html>

在这里插入图片描述
ssdss缺点：①、如果标签多了。样式多了。代码量非常庞大。 ②、可读性非常差。 ③、Css 代码没什么复用性可方言。

第二种：

ssdss在 head 标签 中，使用style 标签来定义各种自己需要的css 样式。格式如下：xxx { Key : value value ; }

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<!--style 标签专门用来定义css 样式代码-->
	<style type="text/css">
		/* 需求1：分别定义两个div、span 标签，分别修改每个div 标签的样式为：边框1 个像素，实线，红色。*/
		div{
		border: 1px solid red;
		}
		span{
		border: 1px solid red;
		}
	</style>
</head>
<body>
	<div>div 标签1</div>
	<div>div 标签2</div>
	<span>span 标签1</span>
	<span>span 标签2</span>
</body>
</html>

ssdss缺点：①、只能在同一页面内复用代码，不能在多个页面中复用css 代码。②、维护起来不方便，实际的项目中会有成千上万的页面，要到每个页面中去修改。工作量太大了。

第三种：

ssdss把 CSS 样式写成一个单独的 CSS 文件，再通过 link 标签引入即可复用。

ssdss使用 html 的 < link rel=“stylesheet” type=“text/css” href="./styles.css" /> 标签导入 CSS 样式文件。

ssdssCSS文件内容：

div{
	border: 1px solid yellow;
}
span{
	border: 1px solid red;
}

ssdsshtml 文件代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<!--link 标签专门用来引入css 样式代码-->
	<link rel="stylesheet" type="text/css" href="1.css"/>
</head>
<body>
	<div>div 标签1</div>
	<div>div 标签2</div>
	<span>span 标签1</span>
	<span>span 标签2</span>
</body>
</html>

CSS 选择器

标签名选择器

ssdss标签名选择器的格式是：标签名{ 属性：值;}。标签名选择器，可以决定哪些标签被动的使用这个样式。

s4ssseg: 在所有div 标签上修改字体颜色为蓝色，字体大小30 个像素。边框为1 像素黄色实线。并且修改所有span 标签的字体颜色为黄色，字体大小20 个像素。边框为5 像素蓝色虚线。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 选择器</title>
<style type="text/css">
	div{
		border: 1px solid yellow;
		color: blue;
		font-size: 30px;
	}
	span{
		border: 5px dashed blue;
		color: yellow;
		font-size: 20px;
	}
</style>
</head>
<body>
<!--
需求1：在所有div 标签上修改字体颜色为蓝色，字体大小30 个像素。边框为1 像素黄色实线。
并且修改所有span 标签的字体颜色为黄色，字体大小20 个像素。边框为5 像素蓝色虚线。
-->
	<div>div 标签1</div>
	<div>div 标签2</div>
	<span>span 标签1</span>
	<span>span 标签2</span>
</body>
</html>

id 选择器

ssdssid 选择器的格式是：#id 属性值{ 属性：值; } 。id 选择器，可以让我们通过id 属性选择性的去使用这个样式。

s4ssseg: 分别定义两个div 标签：
s432sss第一个div 标签定义id 为id001 ，然后根据id 属性定义css 样式修改字体颜色为蓝色，字体大小30 个像素。边框为1 像素黄色实线。
s432sss第二个div 标签定义id 为id002 ，然后根据id 属性定义css 样式修改的字体颜色为红色，字体大小20 个像素。边框为5 像素蓝色点线。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>ID 选择器</title>
	<style type="text/css">
	#id001{
		color: blue;
		font-size: 30px;
		border: 1px yellow solid;
	}
	#id002{
		color: red;
		font-size: 20px;
		border: 5px blue dotted ;
	}
	</style>
</head>
<body>
	<!--
	需求1：分别定义两个div 标签，
	第一个div 标签定义id 为id001 ，然后根据id 属性定义css 样式修改字体颜色为蓝色，
	字体大小30 个像素。边框为1 像素黄色实线。
	第二个div 标签定义id 为id002 ，然后根据id 属性定义css 样式修改的字体颜色为红色，字体大小20 个像素。
	边框为5 像素蓝色点线。
	-->
	<div id="id002">div 标签1</div>
	<div id="id001">div 标签2</div>
</body>
</html>

class 选择器（类选择器）

ssdssclass 类型选择器的格式是：.class 属性值 { 属性：值;}。class 类型选择器，可以通过 class 属性有效的选择性地去使用这个样式。
s4ssseg:
需求1：修改class 属性值为class01 的span 或div 标签，字体颜色为蓝色，字体大小30 个像素。边框为1 像素黄色实线。
需求2：修改class 属性值为class02 的div 标签，字体颜色为灰色，字体大小26 个像素。边框为1 像素红色实线。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>class 类型选择器</title>
	<style type="text/css">
		.class01{
			color: blue;
			font-size: 30px;
			border: 1px solid yellow;
		}
		.class02{
			color: grey;
			font-size: 26px;
			border: 1px solid red;
		}
	</style>
</head>
<body>
<!--
需求1：修改class 属性值为class01 的span 或div 标签，字体颜色为蓝色，字体大小30 个像素。边框为1 像素黄色实线。
需求2：修改class 属性值为class02 的div 标签，字体颜色为灰色，字体大小26 个像素。边框为1 像素红色实线。
-->
	<div class="class02">div 标签class01</div>
	<div class="class02">div 标签</div>
	<span class="class02">span 标签class01</span>
	<span>span 标签2</span>
</body>
</html>

组合选择器

ssdss组合选择器的格式是： 选择器1，选择器2，选择器 n {属性：值;} 。组合选择器可以让多个选择器共用同一个CSS 样式代码。
s4ssseg: 修改 class=“class01” 的div 标签和 id=“id01” 所有的 span 标签，字体颜色为蓝色，字体大小20 个像素。边框为1 像素黄色实线。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>class 类型选择器</title>
	<style type="text/css"> .class01 , #id01{
		color: blue;
		font-size: 20px;
		border: 1px yellow solid;
	}
	</style>
</head>
<body>
<!--
需求1：修改class="class01" 的div 标签和id="id01" 所有的span 标签，
字体颜色为蓝色，字体大小20 个像素。边框为1 像素黄色实线。
-->
	<div id="id01">div 标签class01</div> <br />
	<span >span 标签</span> <br />
	<div>div 标签</div> <br />
	<div>div 标签id01</div> <br />
</body>
</html>

常用样式：

ssdss字体颜色：color：red；颜色也可以写 rgb 值和十六进制表示值：如 rgb(255,0,0)，#00F6DE，如果写十六进制值必须加#。
ssdss宽度：width:19px; 宽度可以写像素值：19px；也可以写百分比值：20%；

ssdss高度 height:20px; 高度可以写像素值：19px；也可以写百分比值：20%；

ssdss背景颜色 background-color : #0F2D4C

ssdss字体样式：color：#FF0000；字体颜色红色 font-size：20px; 字体大小

ssdss红色 1 像素实线边框 border：1px solid red;

ssdssDIV 居中 margin-left: auto; margin-right: auto;

ssdss超链接去下划线：text-decoration: none;

ssdss表格细线：

s32sdsstable {ssdssborder: 1px solid black; /设置边框/ssdssborder-collapse: collapse; /将边框合并/ }

ssds32std,th {ssdssborder: 1px solid black; /设置边框/ }

ssdss列表去除修饰：ul { list-style: none; }

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>06-css 常用样式.html</title>
		<style type="text/css">
		div{
			color: red;
			border: 1px yellow solid;
			width: 300px;
			height: 300px;
			background-color: green;
			font-size: 30px;
			margin-left: auto;
			margin-right: auto;
			text-align: center;
		}
		table{
			border: 1px red solid;
			border-collapse: collapse;
		}
		td{
			border: 1px red solid;
		}
		a{
			text-decoration: none;
		}
		ul{
			list-style: none;
		}
		</style>
	</head>
	<body>
		<ul>
			<li>11111111111</li>
			<li>11111111111</li>
			<li>11111111111</li>
			<li>11111111111</li>
			<li>11111111111</li>
		</ul>
		<table>
			<tr>
			<td>1.1</td>
			<td>1.2</td>
			</tr>
		</table>
		<a href="http://www.baidu.com">百度</a>
		<div>我是div 标签</div>
	</body>
</html>

在这里插入图片描述

slow is fast.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页开发基础：CSS

asdsCSS 是W3C 协会为弥补HTML 在显示属性设定上的不足而制定的一套扩展样式标准，它的全称是Cascading Style Sheet。CSS 标准中重新定义了HTML 中原来的文字显示样式，增加了一些新概念，如类、层等，可以对文字重叠、定位等。在 CSS 还没有引入到页面设计之前，传统的HTML 语言要实现页面美化在设计上是十分麻烦的，例如要设计页面中文字的样式，如果使用传统的HTML 语句来设计页面就不得不在每个需要设计的文字上都定义样式。CSS 的出现改变了这一传统模式。 asdsad.
复制链接

扫一扫