第3篇：css常用属性（CSS）

最新推荐文章于 2022-01-12 17:18:51 发布

HaanLen

最新推荐文章于 2022-01-12 17:18:51 发布

阅读量175

点赞数

分类专栏： CSS/CSS3

本文链接：https://blog.csdn.net/weixin_40119412/article/details/103589169

版权

CSS/CSS3 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

css常用属性

文本属性

字体属性

背景属性

列表属性

表格属性

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css属性</title>
		<style type="text/css">
			body{
				background-image: url(../img/bg.JPG);
				background-attachment: scroll;
				color: white;
			}
			.one{
				text-indent: 30px;
				line-height: 20px;
				letter-spacing: 5px;
				text-decoration: none;
				text-align: left;
				text-transform: none;
				word-spacing: 3px;
				font-weight: bold;
			}
			.two{
				line-height: 60px;
				letter-spacing: 2px;
				text-decoration: overline;
				text-align: justify;
				text-transform: uppercase;
				word-spacing: 20px;
			}
			.three{
				line-height: 30px;
				letter-spacing: 4px;
				text-decoration: line-through;
				white-space: pre-wrap;
				word-spacing: 10px;
			}
			.four{
				text-indent: 30px;
				text-decoration:underline;
				white-space:pre-line;
			
			}
			.five{
				text-indent: 30px;
				text-decoration:underline;
				white-space:pre-wrap;	
				font-size: large;	
				font-style: oblique;	
			}
		</style>
	</head>
	<body>
		<p class="one">
		Therefore, it is imperative for us, people in all walks, to take drastic measuresto reverse thisdisturbing trend.			
		由于Django是在一个快节奏的新闻编辑室 环境下开发出来的，因此它被设计成让普 通的网站开发工作简单而快 捷。以下简单 介绍了如何用 Django 编写一个数据库驱 动的Web应用程序。 
		</p>
		<p class="two">
		If we do not desire the trend to become a reality in the future, positive steps must be taken to put anend to sth right now.			
		由于Django是在一个快节奏的新闻编辑室 环境下开发出来的，因此它被设计成让普 通的网站开发工作简单而快 捷。以下简单 介绍了如何用 Django 编写一个数据库驱 动的Web应用程序。 
		</p>
		<p class="three">My suggestion, to put an end to the negative situation, are the following steps.
			由于Django是在一个快节奏的新闻编辑室 环境下开发出来的，因此它被设计成让普 通的网站开发工作简单而快 捷。以下简单 介绍了如何用 Django 编写一个数据库驱 动的Web应用程序。 </p>
		<p class="four">the most           important thing, confronted the current situation, is not to say, but instead to do.由于Django是在一个快节奏的新闻编辑室 环境下开发出来的，因此它被设计成让普 通的网站开发工作简单而快 捷。以下简单 介绍了如何用 Django 编写一个数据库驱 动的Web应用程序。 
		</p>
		<p class="five">the most             important thing, confronted the current situation, is not to say, but instead to do.由于Django是在一个快节奏的新闻编辑室 环境下开发出来的，因此它被设计成让普 通的网站开发工作简单而快 捷。以下简单 介绍了如何用 Django 编写一个数据库驱 动的Web应用程序。 
		</p>



	</body>
</html>

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css属性</title>
		<style type="text/css">
			body{
				margin: 30px;
				text-align: center;
			}
			*{margin: 0px ;padding: 0px;}
			.one{
				list-style-type: none;
				border: 1px solid red;	
				background: antiquewhite;			
			}
			.dd{
				display: inline;
				padding:0px 10px;
				border-right: 1px solid firebrick;
				
			}
			.lis{
				border-right: 0px;
			}
			.two{
				list-style-type: none;
				width: 100px;
				border: 1px solid red;
			}
			.kk{
				border-bottom: 1px solid red;
				padding: 8px 0px;
				background: antiquewhite;
				
			}
			.kk>.list{
				border-bottom: 0px;
			}
			table.table1{
				border-collapse: collapse;
			}
			table.table2{
				border-spacing: 10px 8px;
			}
			table,th,td{
				width: 550px;
				border: 1px solid burlywood;
			}
		</style>
	</head>
	<body>
		<ul class="one" >
			<li class="dd">菜单1</li>
			<li class="dd">菜单2</li>
			<li class="dd">菜单3</li>
			<li class="dd">菜单4</li>
			<li class="dd">菜单5</li>
			<li class="dd">菜单6</li>
			<li class="dd lis">菜单7</li>
		</ul>
		<br />
		<ul class="two" >
			<li class="kk">菜单1</li>
			<li class="kk">菜单2</li>
			<li class="kk">菜单3</li>
			<li class="kk">菜单4</li>
			<li class="kk">菜单5</li>
			<li class="kk">菜单6</li>
			<li class="kk list">菜单7</li>
		</ul>
		<br />
		<table class="table1">
			<tr>
			<th>姓名</th>
			<th>学号</th>
			<th>英语</th>
			<th>语文</th>
			<th>数学</th>
			</tr>			
			
			<tr>
				<td>YanHSama</td>
				<td>201</td>
				<td>80</td>
				<td>80</td>
				<td>90</td>
			</tr>
		</table>
		<br />
		<table class="table2">
			<tr>
			<th>姓名</th>
			<th>学号</th>
			<th>英语</th>
			<th>语文</th>
			<th>数学</th>
			</tr>			
			
			<tr>
				<td>YanHSama</td>
				<td>201</td>
				<td>80</td>
				<td>80</td>
				<td>90</td>
			</tr>
		</table>
	</body>
</html>

HaanLen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第3篇：css常用属性（CSS）

css常用属性文本属性字体属性背景属性列表属性表格属性例子<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>css属性</title> <style type="text/css"&gt...
复制链接

扫一扫