Web前端 - CSS

最新推荐文章于 2023-04-23 13:58:44 发布
最新推荐文章于 2023-04-23 13:58:44 发布
阅读量312 收藏
点赞数
分类专栏： Java Web 文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/W1324926684/article/details/108089305
版权

Web前端 - CSS

1、什么是CSS，有什么作用？

CSS(Cascading Style Sheet):层叠样式表 语言。
CSS的作用是：
	修饰HTML页面，设置HTML页面中的某些元素的样式，让HTML页面更好看。
	CSS好比是HTML的化妆品一样。
HTML还是主体，CSS依赖HTML。CSS的存在就是修饰HTML，所以新建的文件还是xx.html文件。

2、CSS我们要求掌握到什么程度？

* 常见的CSS样式要求会写。
* 别人写的CSS样式要能看懂。

3、在HTML页面中嵌套使用CSS的 3 种方式

第一种方式————内联定义：在标签内部使用style属性来设置元素的CSS样式
	语法格式：
		<标签 style="样式名:样式值;样式名:样式值;样式名:样式值;..."></标签>
	
第二种方式————样式块：在head标签中使用style块
	语法格式：
		<head>
			<style type="text/css">
				/*
					这是CSS的注释。
				*/

				选择器 {
					样式名 : 样式值;
					样式名 : 样式值;
					.....
				}
				选择器 {
					样式名 : 样式值;
					样式名 : 样式值;
					.....
				}
			</style>
		</head>
	
	注意，这里将style对象的type属性设置为"text/css"，是允许不支持这类型的浏览器忽略样式表单。 
	
	3种选择器：
		id选择器
		标签选择器
		class选择器

第三种方式————链入外部样式表文件（最常用）
	将样式写到一个独立的xxx.css文件当中，在需要的网页上直接引入css文件，样式就引入了

	语法格式：
		<link type="text/css" rel="stylesheet" href="css文件的路径" />
	
	这种方式易维护，维护成本较低。
		xxx.css文件
			1.html中引入了
			2.html中引入了
			3.html中引入了
			4.html中引入了

【001-HTML中引入CSS样式的第一种方式.html】

<!doctype html>
<html>
	<head>
		<title>HTML中引入CSS样式的第一种方式：内联定义方式</title>
	</head>
	<body>
		
		<!--
			width 宽度样式
			height 高度样式
			background-color 背景色样式
			display 布局样式（none表示隐藏，block表示显示）
			
			border 边框
				border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset 
					none  :　 默认值。无边框。不受任何指定的 border-width 值影响 
					hidden  :　 隐藏边框。IE不支持 
					dotted  :　 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线 
					dashed  :　 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线 
					solid  :　 实线边框 
					double  :　 双线边框。两条单线与其间隔的和等于指定的 border-width 值 
					groove  :　 根据 border-color 的值画3D凹槽 
					ridge  :　 根据 border-color 的值画3D凸槽 
					inset  :　 根据 border-color 的值画3D凹边 
					outset  :　 根据 border-color 的值画3D凸边 

		-->
		<div style="width : 300px; height : 300px; background-color : #CCFFFF; display : block;
		border-width : 5px; border-style : solid;  border-color : red; "></div>

		<br><br>

		<!--
			边框样式还能这样写：
				border : 5px solid black;
				          宽度 样式 颜色
		-->
		<div style="width : 300px; height : 300px; background-color : #CCFFFF; display : block;
		border : 5px solid black; "></div>

	</body>
</html>

在这里插入图片描述
【002-HTML中引入CSS样式的第二种方式.html】

<!doctype html>
<html>
	<head>
		<title>HTML中引入CSS样式的第二种方式：样式块</title>

		<style type="text/css">
			
			/*
				这是CSS的注释。
			*/

			/*
				1、id选择器，
				语法格式：
					#id{
						样式名 : 样式值;
						样式名 : 样式值;
						样式名 : 样式值;
						....
					}
			*/
			#usernameErrorMsg {
				color : red;
				font-size : 12px;
			}

			/*
				2、标签选择器
				语法格式：
					标签名 {
						样式名 : 样式值;
						样式名 : 样式值;
						样式名 : 样式值;
						....
					}
				标签选择器作用的范围比id选择器广。
			*/
			div {
				background-color : black;
				border : 1px solid red;
				width : 100px;
				height : 100px;
			}

			/*
				3、类选择器
				语法格式：
					.类名{
						样式名 : 样式值;
						样式名 : 样式值;
						样式名 : 样式值;
						....
					}
			*/
			.student {
				border : 1px solid red;
				width : 400px;
				height : 30px;
			}

		</style>
	</head>
	<body>
		
		<!--
			设置样式字体大小12px，颜色为红色！（在上方样式块设置）
		-->
		<span id="usernameErrorMsg">对不起，用户名不能为空！</span>

		<div></div>
		<div></div>
		<div></div>

		<!--class相同的标签可以认为是同一类标签。-->
		<br><br><br>
		<input type="text" class="student"/>

		<br><br><br>

		<select class="student">
			<option>专科</option>
			<option>本科</option>
		</select>

	</body>
</html>

在这里插入图片描述

【003-HTML中引入CSS样式的第三种方式.html】
   1.css文件：

/*
这是一个标签选择器： 让所有a超链接标签的下划线去掉

设置对象中的文本的装饰。text-decoration : none || underline || blink || overline || line-through 
	none  :　 默认值。无装饰 
	blink  :　 闪烁 
	underline  :　 下划线 
	line-through  :　 贯穿线 
	overline  :　 上划线 
*/
a {
	text-decoration: none;
}

/*  这是一个id选择器: 希望有下划线、鼠标停上去有小手
	cursor : 鼠标样式，pointer是小手，hand也是，但是hand有浏览器兼容问题。建议使用pointer
*/
#baiduSpan {
	text-decoration: underline;
	cursor: pointer;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>在HTML中使用CSS样式的第三种方式：引入外部独立的css文件</title>
		
		<!--引入css-->
		<link rel="stylesheet" type="text/css" href="css/1.css" />
		
	</head>
	<body>
		
		<a href="http://www.baidu.com">百度</a>
		
		<span id="baiduSpan">点击我链接到百度哦！</span>
		
	</body>
</html>

在这里插入图片描述

4、边框

（1）写法一
	div{
		border-width : 1px;
		border-style : solid;
		border-color : red;
	}
（2）写法二
	div{
		border : 1px solid red;
	}

5、隐藏

div{
	display : none;
}

6、字体

div{
	font-size : 12px;
	color : red;
}

7、文本装饰

a{
	text-decoration : none;     /* 设置没有下划线*/
}

a{
	text-decoration : underline;   /* 设置下划线*/
}

8、鼠标小手

div{
	cursor : pointer;
}

9、列表

ul{
	list-style-type : none;   /*不使用项目符号*/
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表样式</title>
		
		<style type="text/css">
			ul{
				/*list-style-type: none;*/
				/*list-style-type: circle ;*/
				/*
					none  :　 CSS1  不使用项目符号 
					disc  :　 CSS1  实心圆 【 默认值。】
					circle  :　 CSS1  空心圆 
					square  :　 CSS1  实心方块 
					decimal  :　 CSS1  阿拉伯数字 
					lower-roman  :　 CSS1  小写罗马数字 
					upper-roman  :　 CSS1  大写罗马数字 
					lower-alpha  :　 CSS1  小写英文字母 
					upper-alpha  :　 CSS1  大写英文字母 
				*/
				list-style-type: square ;
			}
		</style>
		
	</head>
	<body>
		
		<ul>
			<li>中国
				<ul>
					<li>北京</li>
					<li>上海</li>
					<li>重庆</li>
				</ul>
			</li>
			<li>美国</li>
			<li>俄国</li>
		</ul>
		
	</body>
</html>

在这里插入图片描述

10、定位

div{
	position : absolute;   /*绝对定位，定的是div块的左上角顶点*/
	left : 100px;
	top : 100px;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS样式的绝对定位</title>
		<style type="text/css">
			#div1{
				background-color: red;
				border: 5px black solid;
				width: 300px;
				height: 300px;
				
				position : absolute; /*绝对定位，定的是div块的左上角顶点*/
				left: 100px;
				top: 100px;
			}
		</style>
	</head>
	<body>
		
		<div id="div1"></div>
		
	</body>
</html>

在这里插入图片描述

11、设置鼠标悬停效果

选择器:hover{
	样式名 : 样式值;
	样式名 : 样式值;
	.....
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
	
    <style>
		/* 设置未悬停时的样式*/
		a { 
			font-size: 10pt; 
			text-decoration: none; 
			color: blue; 
		}
		
		 /*设置鼠标悬停效果：
					:hover  */
		a:hover { 
			font-size: 14pt; 
			text-decoration: none; 
			color: red; 
		}
    </style>
	
</head>
<body>

	<a href="http://www.baidu.com">百度</a>

</body>
</html>

在这里插入图片描述
在这里插入图片描述

【总结——思维导图】

在这里插入图片描述

传送门

上一章：Web前端 - HTML
下一章：Web前端 - JavaScript

佬涛
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
10款Web程序员必备的CSS工具
html基础教程
02-26 1302
对于web开发来说，CSS是最有效的美化页面、设置页面布局的技术。但问题是，CSS是一种标记性语言，语法结构非常的松散、不严谨。WEB程序员会经常发现自己的或别人的CSS文件里有大量的冗余代码或错误或能够大量优化的地方。如果你经常使用静态编程语言(比如，Java，C语言)等，你会发现实用的IDE工具会给编程带来巨大的效率，像Eclipse这样的能够实时自动分析代码问题的集成开发环境就是一个典型的例...
web前端-CSS盒子模型
qq_53584660的博客
06-08 1973
1.盒子的概念页面中的每一个标签，都可以看做是一个盒子，通过盒子的视角更方便的进行布局浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为盒子2.盒子模型CSS中规定每个盒子分别由 内容区域（content）、 内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是 盒子模型3.记忆：可以联想现实中的包装盒（电脑包装做类比，电脑+填充泡沫+外包装盒） 如果是两个内容： 想让两个内容之间有间距，代码应该加margin：外边距
css样式规则
coolshyman的博客
12-23 1431
css的样式规则： 使用HTML时，需要遵从一定的的规范。CSS亦是如此，要想熟练地使用CSS对网页进行修饰，首先你需要了解CSS样式规则，具体格式如下： 在上面的样式规则中： 1.选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。 2.属性和属性值以“键值对”的形式出现。 3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。 4.属性和属性值之间用英文“：”连接。 5.多个“键值对”之间用英文“；”进行区分。 ...
网页的布局分布
weixin_45510392的博客
08-11 4177
网页布局 网页布局有很多种方式，一般分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域。 这呢就是展示图。下面我就一步一步的给大家介绍。 头部区域 头部区域位于整个网页的顶部，一般用于设置网页的标题或者网页的 logo： 菜单导航区域 菜单导航条包含了一些链接，可以引导用户浏览其他页面： 内容区域 内容区域一般有三种形式: 1 列：一般用于移动端 2 列：一般用于平板设备 3 列：一...
web前端-css边框（border）
苏凉.py的博客
05-27 6324
🐚作者简介：苏凉（专注于网络爬虫，数据分析） 🐳博客主页：苏凉.py的博客 🌐系列专栏：web前端基础教程 👑名言警句：海阔凭鱼跃，天高任鸟飞。 📰要是觉得博主文章写的不错的话，还望大家三连支持一下呀！！！ 👉关注✨点赞👍收藏📂 文章目录css边框属性css边框样式边框宽度圆角边框css所有边框属性 css边框属性 css的border属性允许您指定元素边框的样式、宽度和颜色。 css边框样式 border-style 属性指定要显示的边框类型。可以同时设置一到四个值（顺序为上边框、右边框、下边框和左..
Web前端-CSS基础与应用
一个小小的码农
06-06 4784
Web前端-CSS基础Web前端-CSSCSS历史CSS特点简介丰富的样式定义易于使用和修改多页面应用层叠页面压缩CSS工作原理CSS版本区别CSS的基本语法CSS为HTML网页添加样式的三种方法CSS选择器元素/标签选择器id选择器class选择器群组选择器包含选择器通配选择器伪类选择器伪对象选择器选择器的权重CSS属性文本属性扩展列表属性CSS边框CSS背景CSS浮动清除浮动浮动高度塌陷修复CSS盒子模型 Web前端-CSS CSS历史 1.1990年，Tim Berners-Lee和Robert Ca
web前端－CSS 列表样式（ul）－008
helloMr_wo的博客
10-08 4121
CSS列表属性作用如下： 设置不同的列表项标记为有序列表 设置不同的列表项标记为无序列表 设置列表项标记为图像 列表在HTML中，有两种类型的列表： 无序列表 - 列表项标记用特殊图形（如小黑点、小方框等） 有序列表 - 列表项的标记有数字或字母 使用CSS，可以列出进一步的样式，并可用图像作列表项标记。不同的列表项标记list-style-type属性指定列表项标记的类型是：<!DOCTYPE h
web前端-CSS-display属性
jinchenpeng的博客
05-30 863
web前端 --- CSS（1）-- 选择器
weixin_62443409的博客
04-23 8758
【代码】web前端 --- CSS（1）
web前端－CSS 图像透明/不透明 －027
helloMr_wo的博客
10-11 3095
使用CSS很容易创建透明的图像。 注意：CSS Opacity属性是W3C的CSS3建议的一部分。实例1 - 创建一个透明图像CSS3中属性的透明度是 opacity.img { opacity:0.4; filter:alpha(opacity=40); /* For IE8 and earlier */ }IE9，Firefox，Chrome，Opera，和Safari浏览器使用透明度属性可以
web前端技术--css.pptx
01-11
Web 前端技术- CSS 基础知识点 CSS（Cascading Style Sheets）是用于描述网页样式的标记语言，主要用于控制网页的布局、颜色、字体、图像等样式。CSS 基础知识点包括 CSS 概述、CSS 语法规则、CSS 引入方式、选择器...
web前端-css布局
08-26
1、固定宽度布局 2、流式布局（自适应式布局） 3、弹性布局 4、栅格化布局 4、可变固定宽度布局 5、混合布局 布局方式的比较。
前端-web前端-模板-各行各业二十个模板4
最新发布
07-07
本资源包“前端-web前端-模板-各行各业二十个模板4”提供了丰富的前端设计资源，旨在帮助开发者快速构建适用于不同行业的网站或应用界面。这些模板涵盖了广泛的业务领域，包括但不限于电子商务、新闻门户、企业展示...
Web后端 - 第3章 - Servlet
佬涛的博客
09-05 959
Web后端 - Servlet一、Servlet二、Servlet接口实现类三、Servlet接口实现类开发步骤四、Servlet生命周期【热部署：同步更新设置】五、HttpServletResponse接口六、HttpServletRequest 接口七、请求对象和响应对象的生命周期【实例】在线考试管理系统八、欢迎资源文件九、Http状态码【关于新建一个Servlet】十、多个Servlet之间调用规则十一、重定向十二、请求转发【总结：转发和重定向】十三、多个Servlet之间实现数据共享十四、Servl
Web后端 - 第5章 - EL表达式
佬涛的博客
09-12 811
Web后端 - 第5章 - EL表达式1、EL工具包介绍2、JSP文件作用3、JSP文件中主要开发步骤4、EL表达式5、EL表达式——作用域对象别名6、EL表达式——还可将引用对象的属性写入到响应体7、[ ] 与 . 运算符8、简化版 EL表达式9、EL表达式——支持运算表达式10、EL表达式——内置对象11、EL表达式——常见异常12、EL表达式——【禁用】【IDEA中复制一个Module】【在线考试管理系统-EL版】传送门 1、EL工具包介绍 由Java技术开发一个jar包 作用是降低JSP文件开发时
Web前端 - JavaScript
佬涛的博客
08-22 794
Web前端 - JavaScript1、JavaScript概述2、写代码3、HTML中嵌入JavaScript代码的 3 种方式4、标识符和关键字5、变量、函数6、JS中的数据类型7、null、NaN、undefined三个值的区别8、JS中的事件9、JS运算符之void10、JS之控制语句11、JavaScript包括三块：ECMAScript、DOM、BOM12、DOM编程案例12.1、获取文本框的value12.2、innerHTML和innerText操作div和span12.3、正则表达式12.
Web后端 - 第4章 - JSP
佬涛的博客
09-10 759
Web后端 - 第4章 - JSP一、JSP二、响应对象存在的弊端三、JSP文件优势四、HTML文件与JSP文件区别五、JSP文件中Java命令书写规则六、JSP 指令七、JSP 文件内置对象八、Servlet与JSP联合调用九、JSP文件运行原理十、HttpJspBase十一、_jspService方法十二、如何将Servlet中doGet/doPost方法执行结果交给JSP文件输出（同上面的“八、Servlet与JSP联合调用”）十三、继续完善之前学servlet时的实例【在线考试管理系统】————试题
Web前端 - HTML
佬涛的博客
08-17 759
Web前端 - HTML1、系统结构2、软件环境准备3、什么是HTML？怎么开发HTML？怎么运行HTML？4、HTML是谁制定的？5、开始写代码6、第一个HTML7、基本标签8、实体符号9、表格（重点）10、背景颜色和背景图片11、图片12、超链接（重点）13、列表14、表单（重点）15、HTML中元素的id属性16、HTML中的div和span【HTML 三大重点】：表格、超链接、表单传送门 1、系统结构 （1）B/S架构： Browser / Server （浏览器/服务器的交互形式。）
Web后端 - 第2章 - Web服务器之Http网络协议与Tomcat服务器
佬涛的博客
08-25 566
Web后端 - 第2章 - Web服务器之Http网络协议与Tomcat服务器一、Http网络协议1.1 网络协议包1.2 常见网络协议1.3 Http网络协议包1.4 Http请求协议包与Http响应协议包介绍1.5 Http请求协议包内部空间1.6 Http响应协议包内部结构二、Tomcat服务器2.1 服务器2.2 Http服务器2.3 Http服务器分类2.4 Tomcat的安装与配置2.5 Tomcat目录结构2.6 模拟一次互联网通信2.7 IDEA配置管理Tomcat2.8 IDEA创建网站
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值