【Java学习20170418】CSS

于 2017-04-18 19:42:44 发布
阅读量496 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： Java学习 文章标签： css java java web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/linsila8121/article/details/70231902
本文详细介绍并演示了CSS样式的各种应用技巧，包括选择器、字体设置、边框样式、浮动布局等多种常用特性。

JavaWeb

第二章CSS


<!DOCTYPE html>
<html>
<head>
<title>Demo06.html</title>
<style>
a {
	color: red;
	font-size: 50px;
}
</style>

</head>
<body>
	<table width="409" height="523" border="1" align="center">
		<tr>
			<td width="199" height="208"><img src="images/ASP.NET.jpg" /></td>
			<td width="194"><img alt="错误啦" src="images/C#.jpg" /></td>
		</tr>
		<tr>
			<td height="35" align="center" valign="middle"><a
				href="message.html">查看详情</a></td>
			<td align="center" valign="middle"><a href="message.html">查看详情</a></td>
		</tr>
		<tr>
			<td height="227"><img src="images/Java.jpg" /></td>
			<td><img src="images/VB.jpg" /></td>
		</tr>
		<tr>
			<td height="35" align="center" valign="middle"><a
				href="message.html">查看详情</a></td>
			<td align="center" valign="middle"><a href="message.html">查看详情</a></td>
		</tr>
	</table>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<p>编程词典系列软件由XX科技公司数十位一线软件编程专家，历经
数年研发的软件产品。
编程词典的特点是容量大、每月都有新的升级内容。编程词典的问世，将改变广大学生的
学习方式。XX科技的每一位员工将竭诚为你服务。</p>
</body>
</html>


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

<head>
<!--以下为定义的CSS样式-->
<style>
#first {                      <!--定义id选择器-- > 
	font-size: 18px;
	color: red;
}

#second {
	font-family: 宋体;
	font-size: 16px;
	color: blue;
}

#three {
	font-family: 宋体;
	font-size: 12px;
	color: red;
}
</style>
</head>
<body>
	<h2 id="first">应用了选择器one</h2>
	<!--定义样式后页面会自动加载样式-->
	<p id="first">正文内容1</p>
	<h2 id="second">应用了选择器two</h2>
	<p id="second">正文内容2</p>
	<h2 id="three">应用了选择器three</h2>
	<p id="second">正文内容3</p>
</body>

<!DOCTYPE html>
<html>
<head>
<title>Demo11.html</title>
<style type="text/css">
/* 1、标记选择器 */
p {
	font-size: 20px;
	color: #F93;
}

a {
	font-size: 50px;
}
/* 2、 标记选择器分组:同时给多个元素加上同一个样式 */
h1, h2 {
	color: red;
}
/*通配符: 所有的元素都取消内外边距*/
* {
	margin: 0px;
	padding: 0px;
}

/* 3、类选择器*/
.div1 {
	color: blue;
}
/* 类选择器结合元素选择器*/
a.div1 {
	color: orange;
}
/* 多类选择器*/
.p1 {
	color: blue;
}

.p2 {
	font-size: 30px;
}

.p1.p2 {
	font-size: 60px;
}
</style>
</head>
<body>
	<!-- 1、元素选择器 -->
	<p>Hello</p>
	<!-- 2、选择器分组 -->
	<h1>1</h1>
	<h2>2</h2>
	<!-- 3、多类选择器 -->
	<div class="div1">一段文本</div>
	<a class="div1">百度</a>
	<p class="p1">p1</p>
	<p class="p2">p2</p>
	<p class="p1 p2">p3</p>
</body>
</html>


<table width="200" border="1" align="center">
	<!--在页面中定义表格-->
	<tr>
		<td><p style="color:#F00; font-size:36px;">行内样式一</p></td><%--在页面文字中定义CSS样式--%>
	</tr>
	<tr>
		<td><p style="color:#F00; font-size:24px;">行内样式二</p></td>
	</tr>
	<tr>
		<td><p style="color:#F00; font-size:18px;">行内样式三</p></td>
	</tr>
	<tr>
		<td><p style="color:#F00; font-size:14px;">行内样式四</p></td>
	</tr>
</table>


<!DOCTYPE html>
<html>
<head>
<title>Demo01.html</title>

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

</head>

<body>
	<p id="p1">p1标签</p>
	<p id="p2">p2标签</p>
	<p id="p3">p3标签</p>
</body>
</html>


@CHARSET "UTF-8";

body {
	/*url('URL')	指向图像的路径*/
	background-image: url("bg2.jpg");
	
	/*repeat	默认。背景图像将在垂直方向和水平方向重复。
      repeat-x	背景图像将在水平方向重复。
      repeat-y	背景图像将在垂直方向重复。
      no-repeat	背景图像将仅显示一次。
    */
	background-repeat: no-repeat;
	/*scroll	默认值。背景图像会随着页面其余部分的滚动而移动。
      fixed	           当页面的其余部分滚动时，背景图像不会移动。
      */
	background-attachment: fixed;
}

#p1 {
	/*设置元素宽度*/
	width: 150px;
	/*内边距属性*/
	padding: 10px;
	/*color_name	规定颜色值为颜色名称的背景颜色（比如 red）。
      hex_number	规定颜色值为十六进制值的背景颜色（比如 #ff0000）。
      rgb_number	规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0)）。
      transparent	默认。背景颜色为透明。
      */
	background-color: red;
}

#p2 {
	width: 600px;
	/*设置元素高度*/
	height: 400px;
	padding: 10px;
	background-image: url("bg1.jpg");
}

#p3 {
	padding: 10px;
	width: 960px;
	height: 500px;
	background-repeat: no-repeat;
	/*数值定位:background-position:100px 100px*/
	/*百分比定位:background-position:10% 10%*/
	/*默认参数定位:从视图开始显示，从图片中间开始显示*/
	background-position: center center;
	background-image: url("bg1.jpg");
}

<!DOCTYPE html>
<html>
<head>
<title>Demo02.html</title>


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

</head>
<h1>标题1</h1>
<p>查看颜色1111111111111111111111111111111111111111111111111111111111111111111111</p>
<p>一段文本abcd abcd</p>
<h2>标题2</h2>
<body>

</body>
</html>


body {
	color: orange;
}

p {
	color: red;
	/*left	把文本排列到左边。默认值：由浏览器决定。
      right	把文本排列到右边。
      center	把文本排列到中间。
      */
	text-align: center;
	/*none	默认。定义带有小写字母和大写字母的标准的文本。
      capitalize	文本中的每个单词以大写字母开头。
      uppercase	定义仅有大写字母。
      lowercase	定义无大写字母，仅有小写字母。
      */
	text-transform: uppercase;
}

h2 {
	/*首行缩进2个字符*/
	/*按百分数缩进:text-indent:*%*/
	text-indent: 2em;
}
<!DOCTYPE html>
<html>
<head>
<title>Demo06.html</title>


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

</head>
<p>元素突出效果</p>

<body>
</html>


@CHARSET "UTF-8";

p {
	/*thin	规定细轮廓。
      medium	默认。规定中等的轮廓。
      thick	规定粗的轮廓。
      length	允许您规定轮廓粗细的值。
      */
	outline-width: 20px;
	/*color_name	规定颜色值为颜色名称的轮廓颜色（比如 red）。
      hex_number	规定颜色值为十六进制值的轮廓颜色（比如 #ff0000）。
      rgb_number	规定颜色值为 rgb 代码的轮廓颜色（比如 rgb(255,0,0)）。
      invert	默认。执行颜色反转（逆向的颜色）。可使轮廓在不同的背景颜色中都是可见。
      */
	outline-color: blue;
	/*none	默认。定义无轮廓。
      dotted	定义点状的轮廓。
      dashed	定义虚线轮廓。
      solid	定义实线轮廓。
      double	定义双线轮廓。双线的宽度等同于 outline-width 的值。
      groove	定义 3D 凹槽轮廓。此效果取决于 outline-color 值。
      ridge	定义 3D 凸槽轮廓。此效果取决于 outline-color 值。
      inset	定义 3D 凹边轮廓。此效果取决于 outline-color 值。
      outset	定义 3D 凸边轮廓。此效果取决于 outline-color 值。
      */
	outline-style: double;
}



<!DOCTYPE html>
<html>
<head>
<title>Demo03.html</title>


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

</head>

<p>设置字体</p>

<body>
</html>


@CHARSET "UTF-8";

p {
	font-size: 40px;
	/*normal	默认值。浏览器显示一个标准的字体样式。
italic	浏览器会显示一个斜体的字体样式。
oblique	浏览器会显示一个倾斜的字体样式。*/
	font-style: oblique;
	/*normal	默认值。定义标准的字符。
bold	定义粗体字符。
bolder	定义更粗的字符。
lighter	定义更细的字符。
100
200
300
400
500
600
700
800
900
定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
inherit	规定应该从父元素继承字体的粗细。*/
	font-weight: bold;
	/*font-family 规定元素的字体系列。
font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。也就是说，font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。
有两种类型的字体系列名称：
指定的系列名称：具体字体的名称，比如："times"、"courier"、"arial"。
通常字体系列名称：比如："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"
提示：使用逗号分割每个值，并始终提供一个类族名称作为最后的选择。
注意：使用某种特定的字体系列（Geneva）完全取决于用户机器上该字体系列是否可用；这个属性没有指示任何字体下载。因此，强烈推荐使用一个通用字体系列名作为后路。
	*/
	font-family: songti, Verdana, Sans-serif;
}

<!DOCTYPE html>
<html>
<head>
<title>Demo04.html</title>


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

</head>

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

<body>
</html>


@CHARSET "UTF-8";

a:LINK {
	color: red;
	text-decoration: none;
}

a:VISITED {
	color: green;
}

a:HOVER {
	color: blue;
}

a:ACTIVE {
	color: orange;
}

<!DOCTYPE html>
<html>
<head>
<title>Demo11html</title>


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

</head>

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
</ul>

<body>
</html>


ul li {
	list-style: none /* 去除圆点 */
}

<!DOCTYPE html>
<html>
<head>
<title>Demo06.html</title>


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

</head>
<table id="tb1">
	<tr>
		<th>性别</th>
		<th>年龄</th>
		<th>性别</th>
	</tr>
	<tr>
		<td>a</td>
		<td>11</td>
		<td>男</td>
	</tr>
	<tr>
		<td>b</td>
		<td>22</td>
		<td>女</td>
	</tr>
	<tr>
		<td>c</td>
		<td>33</td>
		<td>男</td>
	</tr>
</table>

<body>
</html>


@CHARSET "UTF-8";

#tb1,th,tr,td {
	/*border:border-width border-style border-color*/
	/*border-width 边框宽度*/
	/*border-style 边框样式*/
	/*border-color 边框颜色*/
	border: 5px solid orange;
}

#tb1 {
	width: 400px;
	height: 400px;
	text-align: center;
	/*separate	默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
collapse	如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。*/
	/*合并边框*/
	border-collapse: collapse;
}

<!DOCTYPE html>
<html>
<head>
<title>PositionDemo01.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

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

</head>

<body>
	<div id="position1"></div>
	<div id="position2"></div>
	<p>aa1</p>
	<p>aa2</p>
	<p>aa3</p>
</body>
</html>


@CHARSET "UTF-8";

#position1 {
	width: 100px;
	height: 100px;
	background-color: blue;
	position: relative;
	left: 20px;
	top: 20px;
	z-index: 2;
}

#position2 {
	width: 100px;
	height: 100px;
	background-color: green;
	position: relative;
	left: 10px;
	top: 10px;
	z-index: 1;
}

<!DOCTYPE html>
<html>
<head>
<title>浮动</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

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

</head>

<body>
	<div id="container">
		<div id="fd"></div>
		<div id="sd"></div>
		<div id="td"></div>
		<div id="text">HelloWorld</div>
	</div>
</body>
</html>


@CHARSET "UTF-8";

#fd {
	width: 100px;
	height: 150px;
	background-color: red;
	float: left;
}

#sd {
	width: 150px;
	height: 100px;
	background-color: blue;
	float: left;
}

#td {
	width: 100px;
	height: 100px;
	background-color: green;
	float: left;
}

#container {
	width: 300px;
	height: 500px;
	background-color: orange;
}

#text {
	clear: left;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head lang="en">
<title>瀑布流布局效果</title>
<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>
	<div id="div1">
		<ul>
			<li><img src="img/1.jpg">
			</li>
			<li><img src="img/2.jpg">
			</li>
			<li><img src="img/3.jpg">
			</li>
		</ul>
		<ul>
			<li><img src="img/4.jpg">
			</li>
			<li><img src="img/5.jpg">
			</li>
			<li><img src="img/6.jpg">
			</li>
		</ul>
		<ul>
			<li><img src="img/7.jpg">
			</li>
			<li><img src="img/8.jpg">
			</li>
			<li><img src="img/9.jpg">
			</li>
		</ul>
	</div>
</body>
</html>


@CHARSET "UTF-8";

* {
	margin: 0px;
	padding: 0px;
}

li {
	list-style: none;
}

#div1 {
	width: 950px;
	height: auto;
	margin: 20px auto;
}

ul {
	width: 250px;
	float: left;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>CSS实现的图文混排</title>
    <style type="text/css">
    	#main{
    		background-color:#ffc;
    		width:220px;
    		height:150px;
    		font-size:12px;
    	}
    	.picture{
    		float: left;/*在文本的左边*/
    		border: 1px solid #000000;/*图片边框的颜色*/
    		margin-top: 10px;/*上方与其他元素保持10px*/
    		margin-bottom: 10px;/*下方与其他元素保持10px*/
    		margin-left: 10px;/*左侧与其他元素保持10px*/
    		margin-right: 10px;/*右侧侧与其他元素保持10px*/
    	}
    </style>
  </head>
  <body>
    <div id="main">
    	<img src="head.png" class="picture"/>
    	CSS实现的图文混排的效果可以更加美观地展现页面的结构布局效果，
    	CSS实现的图文混排的效果可以更加美观地展现页面的结构布局效果，
    	CSS实现的图文混排的效果可以更加美观地展现页面的结构布局效果。
    </div>
  </body>
</html>


<html>
<head>
<title>只有外边框的表格</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
.tableBorder {
	border: #407D2A 1px solid
}
</style>
<link href="Css/style.css" rel="stylesheet">
</head>
<body>
	<table width="694" height="341" border="0" align="center"
		cellpadding="-2" cellspacing="-2">
		<tr>
			<td valign="top">
				<table width="100%" height="492" border="0" cellpadding="0"
					cellspacing="0" class="tableBorder">
					<tr>
						<td height="32" background="Images/board_left.gif"><img
							src="Images/01.gif" width="694" height="168">
						</td>
					</tr>
					<tr valign="top">
						<td height="322"><table width="100%" border="0"
								cellspacing="0" cellpadding="0">
								<tr>
									<td width="35" height="322" valign="top"><img
										src="Images/02.gif" width="35" height="89">
									</td>
									<td valign="top">
										<table width="100%" height="292" border="0" cellpadding="-2"
											cellspacing="-2" class="tableBorder_Top">
											<tr>
												<td height="5"></td>
											</tr>
											<tr>
												<td width="170" height="281" valign="top"
													class="tableBorder_r"><table width="96%" border="0"
														cellspacing="-2" cellpadding="-2">
														<tr>
															<td width="55%" height="82" align="center"
																class="word_grey"> <img src="Images/reg.gif"
																width="84" height="54">
															</td>
															<td width="45%" align="left" class="word_grey"><b>注册帮助</b>
															</td>
														</tr>
														<tr>
															<td height="112" colspan="2" valign="top"
																class="word_grey"><ul>
																	<li>用户名：<span class="tablebody1">用户名由3-10位的字母、数字或下划线组成</span>。<br>
																		<br></li>
																	<li>密码：<span class="tablebody1">密码由6-20位的字母、数字、下划线、点“.”组成</span>并且首字符为字母。<br>
																	</li>
																</ul></td>
														</tr>
														<tr align="center">
															<td colspan="2" valign="middle" class="word_grey"></td>
														</tr>
													</table>
												</td>
												<td width="1"></td>
												<td width="400" valign="top">
													<table width="90%" border="0" align="center"
														cellpadding="-2" cellspacing="-2">
														<tr>
															<td><form action="" method="post" name="form1">
																	<table width="100%" border="0" cellspacing="-2"
																		cellpadding="-2">
																		<tr>
																			<td height="10" colspan="2" align="center"></td>
																		</tr>
																		<tr>
																			<td width="18%" height="29" align="center">用 户
																				名：</td>
																			<td width="82%"><input name="username"
																				type="text" id="UserName4" maxlength="20"> <span
																				class="word_grey"> *</span>
																			</td>
																		</tr>
																		<tr>
																			<td height="28" align="center">密    码：</td>
																			<td height="28"><input name="PWD"
																				type="password" id="PWD14" size="20" maxlength="20">
																				<span class="word_grey"> *</span>
																			</td>
																		</tr>
																		<tr>
																			<td height="28" align="center">确认密码：</td>
																			<td height="28"><input name="PWD1"
																				type="password" id="PWD25" size="20" maxlength="20">
																				<span class="word_grey">*</span>
																			</td>
																		</tr>
																		<tr>
																			<td height="28" align="center">性    别：</td>
																			<td><input name="sex" type="radio"
																				class="noborder" value="男" checked> 男 
																				<input name="sex" type="radio" class="noborder"
																				value="女"> 女</td>
																		</tr>
																		<tr>
																			<td height="28" align="center">真实姓名：</td>
																			<td class="word_grey"><input name="realname"
																				type="text" id="realname" maxlength="20">
																			</td>
																		</tr>
																		<tr>
																			<td height="28" align="center">生    日：</td>
																			<td class="word_grey"><input name="birthday"
																				type="text" id="Tel"> （日期格式为：yyyy-mm-dd ）</td>
																		</tr>
																		<tr>
																			<td height="28" align="center">OICQ号码：</td>
																			<td><input name="qq" type="text" id="qq">
																			</td>
																		</tr>

																		<tr>
																			<td height="28" align="center"
																				style="padding-left:10px">Email：</td>
																			<td class="word_grey"><input name="Email"
																				type="text" id="PWD224" size="50"></td>
																		</tr>
																		<tr>
																			<td height="34"> </td>
																			<td class="word_grey"><input name="Button"
																				type="button" class="btn_grey" value="确定保存">
																				<input name="Submit2" type="reset" class="btn_grey"
																				value="重新填写">
																			</td>
																		</tr>
																	</table>

																</form>
															</td>
														</tr>
													</table>
												</td>
											</tr>
											<tr>
												<td height="5"></td>
											</tr>
										</table></td>
									<td width="44" valign="top"><img src="Images/04.gif"
										width="44" height="89">
									</td>
								</tr>
							</table>
						</td>
					</tr>
				</table></td>
		</tr>
	</table>
</body>
</html>


<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<!--
body {
	FONT-SIZE: 9pt;
	margin-left:0px;
	margin-top:0px;	
}
td {
	font-size: 9pt;	line-height:150%;
}
.btn_grey {
	font-family: "ו";	font-size: 9pt;color: #333333;	
	background-color: #eeeeee;cursor: hand;padding:1px;height:19px;
	border-top: 1px solid #FFFFFF;border-right:1px solid #666666;
	border-bottom: 1px solid #666666;border-left: 1px solid #FFFFFF;
}
input {
	font-family: "ו";
	font-size: 9pt;
	color: #333333;
	border: 1px solid #999999;
}
.tableBorder_r{
	border:1px solid #407D2A ;
	border-left-style:none; 
	border-bottom-style:none;
	border-Top-style:none; 
}
-->


评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值