Javaweb_CSS

最新推荐文章于 2021-03-07 13:29:28 发布
最新推荐文章于 2021-03-07 13:29:28 发布
阅读量143 收藏 1
点赞数
分类专栏： javaweb 文章标签： Jvaweb_CSS选择器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43801116/article/details/102489399
版权

CSS

一、认识CSS

1、CSS简介
（1）CSS全称“层叠样式表（Cascading Style Sheets）”。
（2）作用：它主要是用于定义html内容在浏览器的显示样式，如文字大小，颜色，字体加粗等；
				使用CSS样式的一个好处是通过定义某个样式，可以让不同网页位置的字体有着统一的字体、字号或者颜色等。
2、CSS代码语法
（1）CS样式有选择器和声明组成，而声明又由属性和值组成；
（2）选择器：指明网页中药应用样式规则的元素	
（3）声明：在英文大括号“{}”中的就是声明，属性和值之间用英文冒号":"分隔，。当有多条声明时，中间可以英文分号";"分隔。
	3、CSS注释代码：用/*开始，*/结尾。

CSS代码语法样式

代码块

<head>
	<title>文档</title>
	<style type="text/css">
	p{color:#F00;font-size:36px;}
	</style>
</head>
<body>
	<p>今天天气怎么样</p>
</body>

二、CSS基本知识

1、内联式CSS样式：直接写在现有的html标签中

代码块
		<head>
	<title>文档</title>
	<style type="text/css">
	p{color:#F00;font-size:36px;}
	</style>
</head>
<body>
	<p>今天天气怎么样</p>
		<!-------内联式CSS样式----->
	<p style="font-size:18px;">
	天气晴朗
	</div>
</body>

2、嵌入式CSS样式：写在当前的文件中

	代码块
<head>
	<title>文档</title>
	<!-------嵌入式CSS样式----->
	<style type="text/css">
	p{color:#F00;font-size:36px;}
	</style>
</head>
<body>
	<p>今天天气怎么样</p>
	<p style="font-size:18px;">
	天气晴朗
	</div>
</body>

3、外部式CSS样式：写在单独的一个文件中，使用link引入

CSS样式文件名称以有意义的英文字母命名，如main,css
rel="stylesheet" type="text/css"是固定写法不可修改
<link>
标签位置一般写在<head>标签之内

test1.html:

<head>
<!-------外部式CSS样式--------->
<link href="main.css" rel="stylesheet" type="text/css" />
	<title>文档<:/title>
	<!-------嵌入式CSS样式----->
	<style type="text/css">
	p{color:#F00;font-size:36px;}
	</style>
</head>
<body>
	<p>今天天气怎么样</p>
	<p style="font-size:100px;">
	天气晴朗
	</div>
</body>

main.css

	body{ background-color:#ccc;}

4、优先级

内嵌式>嵌入式>外部式

三、CSS选择器

1、什么是选择器

2、标签选择器

3、类选择器:以点(.)开头

	为标签设置class=“class”名称
	
代码块
	<head>
		<title>类选择器</title>
		<style type="text/css">
		body{text-align:center;}
		.title{color:#F00;font-family:"楷体"；}
		.p1{font-family:"宋体";font-size:24px;}
		.p2{font-family:"黑体"; font-sizr:36px;}
	</head>
	<body>
		< h1 class="title">春晓</hi>
		<p class="p1">春眠不觉晓，处处闻啼鸟。</p>
		<p class="p2">夜来风雨声，花落知多少。</p>
	</body>

4、ID选择器：以#开头

	为标签设置id=“ID”名称 ，而不是class="类名称"
	ID选择符的前面是#。而不是英文圆点（.）

代码块

	<head>
		<title>ID选择器</title>
		<style type="text/css">
		body{text-align:center;}
		#title{color:#F00;font-family:"楷体"；}
		#p1{font-family:"宋体";font-size:24px;}
		#p2{font-family:"黑体"; font-sizr:36px;}
	</head>
	<body>
		< h1 id="title">春晓</hi>
		<p id="p1">春眠不觉晓，处处闻啼鸟。</p>
		<p id="p2">夜来风雨声，花落知多少。</p>
	</body>

5、类和ID选择器的区别

相同点：可以应用于任何元素
不同点：
（1）ID选择器只能在文档中使用一次，与类选择器不同，在一个html文档中，ID选择器只能使用一次，而类选择器	可以使用多次
（2）可以使用类选择器词列表方法为一个元素同时设置多个样式，我们可以为一个元素同时设置多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用ID词列表）
（3）ID选择器的优先级高于类选择器

代码块5.1（2）

	<head>
		<title>ID选择器</title>
		<style type="text/css">
		body{text-align:center;}
		#title{color:#F00;font-family:"楷体"；}
		.dd1{font-size:50px;font-weight:bold;}
		.dd2{color:#F00;}
		#p1{font-family:"宋体";font-size:24px;}
		#p2{font-family:"黑体"; font-sizr:36px;}
	</head>
	<body>
		< h1 id="title">春晓</hi>
		<!----class可以实现多个---->
		<p class="dd1 dd2">春眠不觉晓，处处闻啼鸟。</p>
		<!----id只能实现一个---->
		<p id="p1 p2">夜来风雨声，花落知多少。</p>
	</body>

代码块5.2（3）

	<head>
		<title>ID选择器</title>
		<style type="text/css">
		body{text-align:center;}
		.pp{color:#F00;font-family:"楷体"；}
		#p1{font-family:"宋体";font-size:24px;}
		#p2{font-family:"黑体"; font-sizr:36px;}
	</head>
	<body>
		< h1 id="title">春晓</hi>
		<!------ID选择器的优先级高于类选择器------->
		<p class="pp" id="p1">春眠不觉晓，处处闻啼鸟。</p>
		<p id="p2">夜来风雨声，花落知多少。</p>
	</body>

6、子选择器

大于符号（>）用于选择指定标签元素的第一代子元素、

代码块

	<head>
		<title>子选择器</title>
		<style type="text/css">
		body{text-align:center;}
		div>p{color:F00; font-size:18px;}
	<!-----------ul>li{color:F00; font-size:18px;}---------->	
		</style>
	</head>
	<body>
		<div>
			< p>春晓</p>
			<p>春眠不觉晓，处处闻啼鸟。</p>
			<p>夜来风雨声，花落知多少。</p>
			<div>作者</div>
		</div>
		<div>鹅鹅鹅</div>
			<u1>
				<li>01 html</li>
				<li>02 CSS</li>
				<li>03 javascript</li>
			</u1>
	</body>

7、包含（后代）选择器

加入空格用于选择指定标签元素下的后辈元素

8、通用选择器（了解）

*{background-color:#CCC；}

9、伪类选择符

伪元素选择器
(1)a:link:正常连接的样式
(2)a:hover：鼠标放上去的样式
(3)a:active：选择链接时的样式
(4)a:visited：已经访问过的链接的样式

代码块

<head>
	<title>伪类选择符</title>
	<style type="text/css">
	*<text-align:center;backround-color:#999;>
	/* 让li显示在一行*/
		.nav li{display:inline;}
		
		.nav a.link{text-decoration:none;font-size:4px;}/*正常链接*/
		
		a{font-size:24px;text-decoration:none; color:#00F}
		a:hover{font-size:30px;color:#F00;}/*鼠标放上去的样式*/
		
		a.active{color:#F0F;font-size:30px;}/*选择链接时的样式*/

		a.visited{background-color:#000;color:#FFF;}
	</style>
</head>
<body>
	<ul>
		<li><a href="#">首页</li>
		<li><a href="#">简介</li>
		<li><a href="#">新闻</li>
		<li><a href="#">介绍</li>
		<li><a href="#">联系</li>
</body>

10、分组选择符

	分组设置对应的CSS样式

四、常见属性

1、颜色属性

	color后接不同的颜色格式，如green、rgb、#FFFF80等

2、字体属性(API文档)

	font-size      字体大小
	font-family   字体类型
	font-weight   字体加粗

3、背景属性

	背景颜色	background-color
	背景图片	background-image
	背景重复	background-repeat
		repeat-x   
		repeat-y
	背景位置	background-position
		横向：left/right/center
		纵向：top/botton/center
	简写方式：
	background:背景颜色 url（图像）重复 位置
	background:#f60 url(image/bg.jpg) no-repeat top center

4、文本属性

	1)text-align 横向排列
	2)line-height 文本行高
	3)text-index 首行缩进
	4)letter-spacing 字符间距
			normal默认
			length设置具体的数值（可为负）
			inherit继承

代码块（图片img/bg.png）
CSS文件:main.css

	body{background:url(img/bg.png) repeat-x
	}
	p{
		color:red;
		font-size:24px;
		font-family:"楷体";
		font-weight:bold;
		line-height:150%;
		text-index:80px;
		letter-spacing:10px;
	}
	.title{
				text-align:center;
					line-weight:100px;
	}

html文件

<head>
<title>引入CSS样式</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>

5、边框属性

1)边框风格 border-style
	border-botton-style 下拉边框样式
	border-top-style		上边边框样式
	border-left-style 		左边边框样式
	border-right-styl		右边边框样式
	 边框属性值：
	 				none	无边框
	 				solid		直线边框
	 				dashed 虚线边框
	 				dotted	 点状边框
	 				double  双线边框
	 				groove    凸槽边框
	 				ridge		垄状边框
	 				inset		inset边框
	 				outside	inset边框
	 				inherit继承
	 				border-color属性值 
2)边框颜色 border-color
3)简写方式

代码块5.1

	<head>
		<title></title>
		<style type="text/css"/>
			.dl{
				width:500px;
				height:400px;
				border-style:solid;
				background-color:#9FFBDB;
				border-botton-color:#F00;
			}
			<style>
	</head>

代码块5.2

<head>
<title></title>
<style type="text/css">
	.input{
		border:0;
		border-bottom:#000    solid  1px;
		width:200px;
	}
	</style>
</head>
mango_bobo
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaWeb_InformationManage
03-25
5. **CSS**：在`JavaWeb_InformationManage`项目中，CSS用于定义页面的样式，包括颜色、字体、布局等。通过合理的CSS设计，可以使页面具有良好的视觉效果和用户体验。可能会使用到浮动布局、定位、盒模型、响应式...
paimai.rar_Javaweb系统_javaWeb/mysql_javaweb_javaweb mysql
09-19
- `css`、`js`、`images`：分别存放样式表、JavaScript脚本和图像资源，用于页面美化和交互效果。 总结来说，"paimai.rar"是一个实现拍卖功能的JavaWeb应用，利用MySQL数据库存储数据。它涵盖了JavaWeb开发的各个...
javaWeb项目，修改css或者js文件后前台显示没效果
吟游诗人——吟唱生命的不朽
11-05 6382
今天居然遇到了这个奇葩问题，因为刚开始用idea，我一直以为是idea的部署问题，实际上人家才不会犯这种低级错误。。 最后发现的原因是：浏览器的自动缓存机制导致的。浏览器会自动缓存静态文件以加快访问速度，但是这导致了他不会再从服务器端接收静态文档了，这就导致我在idea里面改的css和js文档，浏览器根本没下载下来。所以解决办法也很简单：ctrl+F5 —— 传说中的完全刷新，会删掉所有本地临时
Java学习心得——jsp中引入css等格式的配置方法
chao2016的博客
02-05 6192
在前文的list.jsp基础上，配置basePath，导入css配置： list.jsp文件配置如下：（注意两个中的配置内容，红色字体直接复制粘贴） <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+reque
java 更改css_CSS样式更改——文本Content
weixin_39654352的博客
03-07 272
上篇文章主要讲述了CSS样式更改中的背景Background，这篇文章我们来谈谈文本Content内容的基础用法1)).首行缩进文本2)).文本对齐方式left 左边right 右边center 中间justify 两端对齐3)).字间距4)).文本间距5)).文本转换none 不转换uppercase 大写lowercase 小写capitalize ...
JavaWeb_CSS 汇总
魏宇轩
09-18 944
汇总
JavaWeb_CSS（17）_背景设置
魏宇轩
03-12 8652
背景设置 背景颜色和图片 示例代码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;www.weiyuxuan.com&lt;/title&gt; &lt;/head&gt; &lt;style
JavaWeb_CSS（18）_表格样式
魏宇轩
03-13 2274
表格样式 示例代码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;www.weiyuxuan.com&lt;/title&gt; &lt;/head&gt; &lt;style ty
JavaWeb_CSS（11）_div 和 span_浮动
魏宇轩
03-12 705
div 浮动 HTML 页面的标准文档流（默认布局）是：从上到下，从左到右，遇块（块级元素）换行。 浮动层：给元素的 float 属性赋值后，就是脱离文档流，进行左右浮动，紧贴着父元素（默认为body文本区域）的左右边框。而此浮动元素在文档流空出的位置，由后续的（非浮动）元素填充上去：块级元素直接填充上去，若跟浮动元素的范围发生重叠，浮动元素覆盖块级元素。 Float 有 4 个值 left...
JavaWeb_CSS（5）_样式优先级
魏宇轩
03-11 560
样式优先级 由上到下，由外到内。优先级由低到高。 示例代码 CSS 文件1 p { text-align: center; color: red; } CSS 文件2 p { text-align: center; color: green; } /*div 表示 p 标签往内一层*/ div p { text-align: center; color: red; } ...
JavaWeb_CSS（10）_div 和 span_边框
魏宇轩
03-11 1292
div 的边框样式 示例代码 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt; www.weiyuxuan.com &amp;lt;/t
JavaWeb_CSS（19）_列表样式
魏宇轩
03-13 506
列表样式 示例代码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;www.weiyuxuan.com&lt;/title&gt; &lt;/head&gt; &lt;style typ
wowo_javaweb_
09-30
《构建JavaWeb团购网站——以“wowo_javaweb_”为例》 在IT行业中，JavaWeb技术因其强大的功能和广泛的应用而备受青睐。本文将深入探讨如何使用JavaWeb技术构建一个类似“窝窝团”的团购网站。我们将从整体架构、...
webapps_javaweb_
10-04
此外，它还可能包含静态资源（如HTML、CSS、JavaScript文件）、图片和其他公共资源。 2. **myapp** - 这可能是一个自定义的应用程序目录，包含了该Java Web项目的所有源代码、资源和配置文件。在这个目录下，我们...
book_javaweb_
10-01
9. CSS和JavaScript：为了提供良好的用户体验，登录页面通常会使用CSS来控制样式，JavaScript进行前端验证，比如检查输入是否为空，密码是否符合复杂度要求等。 总的来说，“book_javaweb_”可能包含上述所有知识点...
JAVAWeb html表格
mango
10-14 4841
JAVAWeb html表格 表格的基本结构 一、标记 1、基本格式 <table 属性1=“属性值1” 属性2=“属性值2”…>表格内容 单元格1 单元格1 2、table标记的属性 （1）、width属性 （2）、height属性 （3）、border属性 表示表格外边框的长度 （4）、align属性：表格显示的位置 a、left居左 b、center居中 c、right...
javaweb_表单设计
mango
10-14 3773
表单设计 一、表单标记 <form>...</form> 1、<form></form>定义表单的开始位置和结束位置，表单提交时的内容就是<form>表单中的内容。 2、基本格式 <form action="服务器端地址（接受表单内容的地址）" name="表单名称" method="post|get" ></form&...
Javaweb 图片标签、链接标签
mango
10-14 1145
** Javaweb 图片标签、链接标签 ** 一、图像标记 1、使用方法 <img src=“路径/文件名.图片格式（本地/网络）” width=“属性值（宽度设置，像素/80%）” length=“属性值（高度设置，像素/50%）” border=“属性值（图片边框）” alt/title=“属性值（提示/鼠标移动）”> ***src作用： （1）、当下·网页的图片被加载完成后，鼠...
JAVAweb+CSS实例
mango
10-26 558
登录界面 代码块 <html> <head> <meta></meta> <title>登录界面</title> <style type="text/css"> *{ margin:0; padding:0; } body{ color:white} .context{ background:...
javaweb项目css样式失效
最新发布
05-30
可能是由于以下几个原因导致CSS样式失效： 1. CSS文件路径错误：请确保你的CSS文件路径正确，否则浏览器无法加载CSS文件。 2. CSS文件命名错误：请确保你的CSS文件名正确，如果文件名不正确，浏览器将无法加载CSS...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值