JSP程序设计实训（四）——CSS基本知识

最新推荐文章于 2022-03-24 12:08:38 发布

please tell me

最新推荐文章于 2022-03-24 12:08:38 发布

阅读量909

点赞数 4

分类专栏： # JSP程序设计实训文章标签： javascript css

本文链接：https://blog.csdn.net/WXY19990803/article/details/104199279

版权

JSP程序设计实训专栏收录该内容

22 篇文章 10 订阅

订阅专栏

上一篇：JSP程序设计实训（三）——HTML基本知识（二）
下一篇：JSP程序设计实训（五）——JSP基本语法（一）

CSS基本知识

任何Web网站的开发通常都包含两方面的内容，即站点的外观设计和站点的功能实现。站点的外观设计包括页面和控件的外观样式、背景色、前景色、字体、网页布局等，如果通过HTML的各种标签及其属性实现要求的外观，编码实在太复杂，太臃肿。级联样式表（CSS）是一种设计网页样式的工具，它是为了弥补HTML在显示属性设定上的不足而制定的一套扩展样式标准，其重新定义了HTML中的文字显示样式，并增加了一些新的概念，如类、层等，可实现文字重叠、定位等。CSS还允许将样式定义单独存储在样式文件中，将显示的内容和显示的样式定义分离，使在保持HTML简单明了的初衷的同时能够对页面的布局施加更多的控制，避免代码的冗余，使网页体积更小，下载更快。

1. CSS样式表定义

在网页制作过程中，定义样式表的方法主要有下面三种。

（1）通过HTML标签定义样式表

CSS样式表的基本语法如下：

引用样式的对象{标签属性：属性值；标签属性：属性值；标签属性：属性值；...}

引用样式的对象	指需要引用该样式的HTML标签，可以是一个或多个标签（各个标签之间用逗号分隔开），需要注意的是，这里使用的是去掉尖括号的标签名
标签属性：属性值	CSS的属性设置与脚本语言中的属性设置有一点不同，即属性名称的写法不同。在CSS中，凡属性名为两个或两个以上的单词构成时，单词之间用“-”隔开

例如，<h1></h1>标签和<h2></h2>标签内的文本居中显示，并采用蓝色字体的样式表为：h1,h2{text-align:center;color:blue}

（2）使用id定义样式表

在HTML页面中id选择符用来对某个单一元素定义单独的样式，定义id选择符要在id名称前加上一个‘#’号。使用id定义样式表的基本语法如下：
#id名称{标签属性：属性值；标签属性：属性值;...}
使用时只需将用该样式的网页内容前加一个id=“id名称”。例如：

# sample{font-family:宋体;font-size-60pt}
<p id = sample>段落文本</p>

<!--这样就可以使<p></p>标签对内的文本以sample样式显示-->

（3）使用class定义样式表

若要为同一元素创建不同的样式或为不同的元素创建相同的样式，可以使用CSS类。CSS类有两种定义格式，定义时，在自定义类的名称前面叫一个点号。
（1）标签名.类名{标签属性：属性值；标签属性：属性值；...}
这种格式的类指明所定义的样式只能用在类名前所指定的标签上，例如：

h1.center{text-align:center}

<!--该center类的样式只能用在<h1>标签上-->

（2）.类名{标签属性：属性值；标签属性：属性值；...}

这种格式的类使所有class属性值为该类名的标签都遵循该类所定义的样式，例如：

.text{font-family:宋体;color:blue;}
<p class = "text">段落文本</p>

<p></p>标签对使用text类使标签中的文本字体为宋体，颜色为蓝色

2. HTML中加入CSS的方法

在HTML中加入CSS的方法主要有三种：嵌入式样式表、内联式样式表、外联式样式表。三种方法各有妙用，主要的区别在于它们规定风格的适用范围不同。

（1）嵌入式样式表

只要在需要应用样式的HTML标签上添加CSS属性就可以了，这种方法主要用于对具体的标签做具体的样式设置，其作用范围只限于本标签。例如：

<p style = "color:red;font-size:10pt">使用嵌入式样式表</p>

这个样式表只是让当前的<p></p>标签对中的文字为红色，字体大小为10pt

（2）内联式样式表

内联式样式表利用<style></style>标签对将样式表定义在HTML文档的<head></head>标签对之间，内联式样式表的作用范围是本HTML文档。

<html>
	<head>
		<title>内联式样式表实例</title>
		<meta http-equiv = "Content-Type" content = "text/html;charset = UTF-8">
		<style type="text/css">
		<!--
		p{font-family:宋体;font-size:9pt;color:blue;text-decoration:underline}
		h2{font-family:宋体;font-size:13pt;color:red}
		-->
		</style>
	</head>
	<body>
		<p>本段文字字体大小为9磅，颜色为蓝色</p>
		<h2>内联式样式表，本标题字体大小为13磅，字体颜色为红色</h2>
	</body>
</html>

在这里插入图片描述

<style></style>用来说明其标签中的代码用于定义样式表。<style>标签的type属性用于指明样式的类别，默认值为text/css，允许不支持CSS的浏览器忽略样式表。注释中的内容可更改来控制样式的变化。

（3）外联式样式表

外联式样式表是将定义好的CSS单独放在一个以css为扩展名的纯文本文件中，在使用<link>标签（在<head></head>标签对之间）链接到网页中。

<!--先创建样式表StyleSheet.css，代码如下-->
p{font-family:宋体;font-size:9pt;color:blue;text-decoration:underline}
h2{font-family:宋体;font-size:13pt;color:red}


<!--在网页上引用样式表-->
<html>
	<head>
		<title>外联式样式表实例</title>
		<meta http-equiv = "Content-Type" content = "text/html;charset = UTF-8">
		<link href = "StyleSheet.css" rel = "stylesheet" type = "text/css"/>
	</head>
	<body>
		<p>本段文字字体大小为9磅，颜色为蓝色</p>
		<h2>内联式样式表，本标题字体大小为13磅，字体颜色为红色</h2>
	</body>
</html>