JAVA WEB开发技术随堂笔记什么是CSS？

张时贰

已于 2022-05-20 23:51:47 修改

阅读量553

点赞数

分类专栏： JAVA WEB开发技术文章标签：前端 html javascript web

于 2022-03-16 21:28:46 首次发布

本文链接：https://blog.csdn.net/qq_49488584/article/details/123536867

版权

JAVA WEB开发技术专栏收录该内容

19 篇文章 4 订阅

订阅专栏

本文介绍了HTML表单元素的使用，包括input、textarea、select等，同时深入讲解了CSS的选择器和基本样式规则，如标签选择器、类选择器和ID选择器。通过实例展示了如何编写和应用CSS样式，提升网页美观度。

摘要由CSDN通过智能技术生成

🌴 2022.3.8 早八

文章目录

🎬本文章是 【JAVA WEB开发技术】 专栏的文章，主要是上课的随堂笔记与练习
🔗JAVA WEB开发技术专栏传送门
💻提示：目录顺序以当堂内容(教材)为准，所以并非“1、2、3”
📽本节主要内容：对上一篇标签的完善。CSS样式书写与使用规则

2.1.5 HTML表单标记

表单（ <form> ）是一个包含表单元素的区域

表单元素是允许用户在表单中输入内容,比如：文本域、下拉列表、单选框、复选框等。表单是用户和网页交互信息的重要手段

🚀 form标签

用于创建供用户输入的 HTML 表单

<form> 元素包含一个或多个如下的表单元素：

<input> <textarea> <button> <select> <option> <optgroup> <fieldset> <label>

🚁 form属性

属性	值	描述
accept-charset	character_set	规定服务器可处理的表单数据字符集
action	URL	规定当提交表单时向何处发送表单数据
autocomplete *	on off	规定是否启用表单的自动完成功能。
enctype	application/x-www-form-urlencoded multipart/form-data text/plain	规定在向服务器发送表单数据之前如何对其进行编码。（适用于 method=“post” 的情况）
method	get post	规定用于发送表单数据的 HTTP 方法
name	text	规定表单的名称。
novalidate	novalidate	如果使用该属性，则提交表单时不进行验证
target	_blank _self _parent _top	规定在何处打开 action URL

🚁 botton属性

属性	值	描述
autofocus	autofocus	规定当页面加载时按钮应当自动地获得焦点。
disabled	disabled	规定应该禁用该按钮。
form	form_id	规定按钮属于一个或多个表单。
formaction	URL	规定当提交表单时向何处发送表单数据。覆盖 form 元素的 action 属性。该属性与 type=“submit” 配合使用。
formenctype	application/x-www-form-urlencoded multipart/form-data text/plain	规定在向服务器发送表单数据之前如何对其进行编码。覆盖 form 元素的 enctype 属性。该属性与 type=“submit” 配合使用。
formmethod	get post	规定用于发送表单数据的 HTTP 方法。覆盖 form 元素的 method 属性。该属性与 type=“submit” 配合使用。
formnovalidate	formnovalidate	如果使用该属性，则提交表单时不进行验证。覆盖 form 元素的 novalidate 属性。该属性与 type=“submit” 配合使用。
formtarget	_blank _self _parent _top framename	规定在何处打开 action URL。覆盖 form 元素的 target 属性。该属性与 type=“submit” 配合使用。
name	name	规定按钮的名称。
type	button reset submit	规定按钮的类型。
value	text	规定按钮的初始值。可由脚本进行修改。

🚁 select下拉菜单标记

属性	值	描述
Autofocus	autofocus	规定在页面加载时下拉列表自动获得焦点。
disabled	disabled	当该属性为 true 时，会禁用下拉列表。
form	form_id	定义 select 字段所属的一个或多个表单。
multiple	multiple	当该属性为 true 时，可选择多个选项。
name	name	定义下拉列表的名称。
required	required	规定用户在提交表单前必须选择一个下拉列表中的选项。
size	number	规定下拉列表中可见选项的数目。

🚁 textarea多行文本标记

属性	值	描述
autofocus *	autofocus	规定当页面加载时，文本区域自动获得焦点。
cols	number	规定文本区域内可见的列数。
disabled	disabled	规定禁用文本区域。
form *	form_id	定义文本区域所属的一个或多个表单。
maxlength *	number	规定文本区域允许的最大字符数。
name	text	规定文本区域的名称。
Placeholder *	text	规定一个简短的提示，描述文本区域期望的输入值。
readonly	readonly	规定文本区域为只读。
Required *	required	规定文本区域是必需的/必填的。
rows	number	规定文本区域内可见的行数。
Wrap *	hard soft	规定当提交表单时，文本区域中的文本应该怎样换行。

🚁 练习

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
		form>div{margin: 1rem;}
		form>div>label{display: inline-block;width: 5rem;text-align: right;}
		</style>
	</head>
	<body>
		<form>
			<div>
				<label>简介：</label>
				<textarea name="introduction" cols="15" rows=""></textarea>
			</div>
			<div>
				<label>专业：</label>
				<select  name="profession">
					<option value="00">请选择</option>
					<option value="01">计算机科学与技术</option>
					<option value="02">软件工程</option>
					<option value="03">数字媒体</option>
					<option value="04">网络工程</option>
				</select>
			</div>
			<div>
				<label>用户名：</label>
				<input type="text" name="userName" />
			</div>
			<div>
				<label>密码：</label>
				<input type="password" name="password" />
			</div>
			<div>
				<label>确认密码：</label>
				<input type="password" />
			</div>
			<div>
				<label>性别：</label>
				<input type="radio" name="sex" value="男" />男
				<input type="radio" name="sex" value="女" />女
			</div>
			<div>
				<label>爱好：</label>
				<label>
					<input type="checkbox" name="like" value="sport" />体育
				</label>
				<label>
					<input type="checkbox" name="like" value="travel" />旅游
				</label>
				<label>
					<input type="checkbox" name="like" value="music" />听音乐
				</label>
				<label>
					<input type="checkbox" name="like" value="book" />读书
				</label>
			</div>
			<div>
				<label>email：</label>
				<input type="text" name="email" />
			</div>
			<div>
				<input type="submit" value="确定" />
				<input type="reset" value="取消" />
			</div>
		</form>
	</body>
</html>

2.1.6 超链接与图片标记

🚀 超链接标记 a

HTML使用标签 <a>来设置超文本链接。超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手

在标签<a> 中使用了href属性来描述链接的地址

默认情况下

一个未访问过的链接显示为蓝色字体并带有下划线

访问过的链接显示为紫色并带有下划线

点击链接时，链接显示为红色并带有下划线

🚀 图像标记 img

在 HTML 中，图像由<img> 标签定义。<img> 是空标签，它只包含属性，并且没有闭合标签。要在页面上显示图像，需要使用源属性（src）。源属性的值是图像的 URL 地址

属性	值	描述
alt	text	规定图像的替代文本。
height	pixels	规定图像的高度。
src	URL	规定显示图像的 URL。
usemap	#mapname	将图像定义为客户器端图像映射。
width	pixels	规定图像的宽度。

2.2 CSS

🚀 什么是CSS？

CSS 指层叠样式表 (Cascading Style Sheets)，定义如何显示 HTML 元素

通过将样式通常存储在样式表中，是为了解决内容与表现分离的问题，外部样式表可以极大提高工作效率，通常存储在 CSS 文件中，多个样式定义可层叠为一

简而言之，人靠衣装佛靠金装，HTML靠CSS装，例如文字大小颜色，页面布局....使页面更加好看

2.2.1 CSS 规则

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明，声明一般由属性及其对应值组成

选择器：选择需要改变样式的 HTML 元素
声明：由一个属性和一个值组成
属性（property）是希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开

2.2.2 CSS选择器

🚀 标签选择器

HTML页面是由很多标记组成，例如图片标记<img>、超链接标记<a>、表格标记<table>等。而CSS标记选择器就是声明页面中哪些标签采用哪些CSS样式。例如p选择器，就是用于声明页面中所有<p>标记的样式风格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		p{font-size: 30px;color: #0000FF;font-family: 黑体;}/* 标签选择器 */
		</style>
	</head>
	<body>
		<p>CSS选择器类型</p>
	</body>
</html>

🚀 类选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点“.”号显示。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		.p2{color: #FFC0CB;}/* CSS类选择器 */
		</style>
	</head>
	<body>
		<p class="p2">CSS类选择器类型</p>
	</body>
</html>

🚀 ID选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		#p1{color: #FF0000;}/* CSS ID选择器 */
		</style>
	</head>
	<body>
		<p id="p1">CSS ID选择器类型</p>
	</body>
</html>

后代选择器：标签标签标签

div span{color: #008000;}  /*对div下所有的span标签都作用*/

子代选择器：标签>标签>标签

div>p>span{color: #008000;}	/*对div下的p下的span作用*/

前三个是必用，后代选择器与子代选择器也经常用，其它选择器不怎么用，可以看看这篇HTML各类选择器，

2.2.3 CSS书写位置

外部样式表(CSS文件内)
内部样式表(body标签内)：可以将CSS样式写到元素的style属性中
内联样式(head标签内)：写在head标记里面，通过style标记包含

🚀 外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表

<head> 
    <link rel="stylesheet" type="text/css" href="mystyle.css"> 
</head>

rel：定义外部文档和调用文档的关系
href：CSS文档的路径
type：外部文件的类型

🚀 内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。可以使用 <style> 标签在文档头部定义内部样式表

<head> 
    <style> 
        p {margin-left:20px;} 
        body {background-image:url("images/back40.gif");} 
    </style> 
</head>

🚀 内联样式

内联样式，在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。慎用这种方法，例如当样式仅需要在一个元素上应用一次时

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

🚀 多重样式优先级

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。
一般情况下，优先级如下：内联样式、内部样式表、外部样式表、浏览器默认样式

📕 小结

本章为大家介绍的是网页设计中不可缺少的内容HTML标记与CSS样式，HTML是构成网页的灵魂，对于制作一般的网页，尤其是静态网页来说，HTML完全可以胜任，但如果要制作漂亮的网页，CSS是不可缺少的