（三）网页前端开发基础之CSS

最新推荐文章于 2024-08-03 17:33:50 发布

甜豆子豆甜

最新推荐文章于 2024-08-03 17:33:50 发布

阅读量1.5k

点赞数 41

分类专栏： Java Web程序设计文章标签： css 前端服务器 java tomcat eclipse

本文链接：https://blog.csdn.net/m0_66432226/article/details/137624144

版权

Java Web程序设计专栏收录该内容

4 篇文章 0 订阅

订阅专栏

为弥补HTML在显示属性设定上的不足而制定的一套扩展样式标准。重新定义HTML中原来的文字显示样式，增加了新的概念，如类、层等，可以对文字重叠、定为等。

1、CSS规则

CCS中包含3部分内容：选择符、属性、属性值。语法格式为：

选择符{属性：属性值}

内容	描述
选择符	选择器。所有HTML中的标记都是通过不同的CSS选择器进行控制的。
属性	主要包括字体属性、文本属性、背景属性、布局属性、边界属性、列表项目属性、表格属性等内容。（有些属性只有部分浏览器支持）
属性值	为某属性的有效值。属性与属性值之间以 “ : ”号分隔。当有多个属性时，使用 “;”号分隔。

2、CSS选择器

标记选择器

CSS标记器就是声明页面中哪些标记采用哪些CSS样式。

局限性：页面如果声明标记选择器，那么所有该标记内容都会有相应变化。

例如：定义a选择器，在该标记选择器中定义超链接的字体与颜色

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

类别选择器

假如页面中有3个<h2>标记，如果想要每个<h2>的显示效果不同，那么标记选择器就无法实现，这时就得引入类别选择器。

类别选择器的名称由用户自己定义，并以“ . ”号开头，定义的属性与属性值要遵循CSS规范。

要应用类别选择器的HTML标记，只需使用class属性来声明。

例如：使用类别选择器控制页面中字体的样式。

<!-- 以下为定义的CSS样式 -->
<style type="text/css">
	.one{                        /**定义类名为one的类别选择器**/
			font-family:隶书;    /**设置字体 **/
			font-size:16px;       /**设置字体大小**/
			color:red;          /**设置字体颜色**/
	}
	
	.two{
			font-family:隶书;
			font-size:16px;
			color:blue;
	}
	
	.tree{
			font-family:隶书;
			font-size:16px;
			color:green;
	}
</style>
</head>
<body>
	<h2 class="one">应用了类别选择器one</h2><!-- 定义样式后页面会自动加载样式 -->
	<p>正文内容1 </p>
	
	<h2 class="two">应用了类别选择器two</h2>
	<p>正文内容2 </p>
	
	<h2 class="tree">应用了类别选择器tree</h2>
	<p>正文内容3 </p>
</body>

在HTML中可以应用多种类别选择器。

例如：<h2 class="size color">

多钟类别选择器用空格隔开。

ID选择器

通过HTML页面中的ID属性来进行选择增添样式。HTML页面中不能包含有两个相同的ID标记，因此，定义的ID选择器只能被使用一次。

命名ID选择器要以“#”号开始，后加HTML标记中的ID属性值。

例如：使用ID选择器控制页面中字体的样式。

<head>
<meta charset="UTF-8">
<title>Insert title here</title>

	<style type="text/css">
		#first{
				font-size:18px
		}
	
		#second{
				font-size:24px
		}
		
		#third{
				font-size:36px
		}
	</style>
</head>
<body>
	<p id="first">ID选择器1</p>
	<p id="second">ID选择器2</p>
	<p id="third">ID选择器3</p>
</body>

3、在页面中包含CSS

行内样式

直接定义在HTML标记中，通过style属性来实现。但灵活性不强。

例如：通过行内定义样式的形式，实现控制页面文字的颜色和大小。

<body>
	<table width="200" border="1" blign="center">
		<tr>
			<td><p style="color:red;font-size:36px;">行内样式一</p></td>
		</tr>
		
		<tr>
			<td><p style="color:blue;font-size:24px;">行内样式二</p></td>
		</tr>
	
		<tr>
			<td><p style="color:green;font-size:18px;">行内样式三</p></td>
		</tr>
		
		<tr>
			<td><p style="color:#FF6EC7;font-size:14px;">行内样式二</p></td>
		</tr>
	</table>
</body>

内嵌式样式表

在页面中使用<style></style>标记将CSS样式包含在页面内。

上面那个类别选择器的例子就是使用内嵌式样式表的模式。

它能够是页面更加规整，更加便于维护

链接式样式表

一个网站会有多个页面，若要求每个页面中相同的HTML标记都要求相同的样式，就会经常用链接式样式表的模式。

它将CSS样式定义在一个单独的文件中，然后在HTML页面中通过<link>标记引用。

<link rel='stylesheet' href='path' type='text/css'>

内容	描述
rel	定义外部文档和调用文档间的关系
href	CSS文档的绝对路径或相对路径
type	外部文件的MIME类型

例子：通过链接式样式表的形式在页面中引入CSS样式。

1.创建一个文件（命名为css），在该文件夹里创建一个css文件（命名为style1.css）

@charset "UTF-8";
h1,h2,h3{
			
	font-family:隶书;
	color: #FF1CAE ;
	font-size:12px;
}

p{
	
	font-weight:200;
	color: #0000FF;
	font-size:24px;
}

2. 通过<link>标记将CSS引入到页面中。

<head>
<meta charset="UTF-8">
<title>通过链接形式引入CSS样式</title>
<link href="../css/style1.css" rel="stylesheet"/>
</head>
<body>
	<h2>1社会主义核心价值观1</h2>
	<p>2社会主义核心价值观2</p>
	<h3>3社会主义核心价值观3</h3>
</body>