HTML+CSS样式设置——CSS一学就会

最新推荐文章于 2024-04-06 22:43:58 发布

菲力蒲LY

最新推荐文章于 2024-04-06 22:43:58 发布

阅读量1.6k

点赞数 1

分类专栏： CSS+DIV 文章标签： HTML+DIV+CSS CSS样式设置 CSS选择器 CSS引入

本文链接：https://blog.csdn.net/wangqingbo0829/article/details/46418237

版权

CSS+DIV 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML+CSS样式设置

CSS：（Cascading Style Sheets）层叠样式设置表。

网页的展示效果跟其排版有很大的关系。排版则主要依靠CSS来设置、调节。

下面说CSS与HTML的联合使用的过程：

（1）新建CSS文件（一般放在与HTML文件同一路径下的css文件夹中）。

（2）在HTML的<head>标签中，用<link />对CSS进行引用

（3）根据HTML的标签或标识符，在CSS文件中编写样式设置代码。

CSS的基本语法为：选择器（Selector）、属性（Property）和属性值（Value）

代码形式为：selector{property：value} 。

主要的选择器：tag标签（html自身的标签）、class标识符（自定义）和id标识符（自定义）

选择器使用语法为：

（1）tag标签直接使用标签后跟{}，例body{}、table{}、p{}、font{}等。

（2）Class标识符，用“.标识符{ 属性:属性值; }”的形式，例 .xs{ color:blue; } 。

（3）id标识符，用“#标识符{ 属性:属性值; }”的形式，例 #xs{ color:blue; } 。

补充：tag标签选择器在使用时，若多个标签设置相同效果，可联合写。将多个标签用空格隔开用一个{}进行设置即可，不同的效果可单独外加设置。例table tr td{ color:red }。

举例：

HTML代码：

			<html>
				<head>
					<title>网页标题</tiltle>
					<link type=”text/css” rel=”stylesheet” 
				</head>
				<body>
					<div id=”all”>
						<table><!--建立一个表格，1行2列-->
							<tr>
								<td class=”set”>第1行第1列 内容</td>
								<td>第1行第2列 内容</td>
							</tr>
						</table>
					</div>
				</body>
			</html>

CSS代码：

   			        /*id标识符·示例*/
				#all{
					Background-color:#F0F0F0;		/*设置背景颜色为淡灰色*/
					width:600px;				/*设置这个版块的宽度为600像素*/
					height:700px;				/*高度为700像素*/
				}
				.set{						/*针对第1行第1列样式设置*/
					text-align:center;			/*文本居中*/
					font-weight:bold			/*文本加粗*/
				}
				table{						/*对表格整体进行样式设置*/
					width:500px;				/*设置表格的宽度为500像素*/
					height:400px;				/*表格高度400像素*/
				}

样式设置的方式有四种：（可参看CSS特点及加入网页的四种方法）

常用的3种为：

（1）直接写在标签中，如

      <table style=”border-left-width:2px ”></table> /*设置表格左边框宽度为2像素*/

（2）写在<head>中，语法为：

		<style type=”text/css”>
			p{ text-align:center; } /*设置p标签的文本居中*/
		</style>

（3）保存为外部.css文件，通过<link />语句引用。例

      <link rel=”stylesheet” type=”text/css” href=”css/setTable.css” />

样式表setTable.css文件放在css文件夹中。

这里抽出重点，将CSS的大体框架简要介绍，目的在于能轻松入手，或在长时间未用的情况下，瞅上一眼能回忆起。CSS有丰富的处理效果设置，若全贴于本文，那就成了杀手了。因此，再次埋一个望远镜——CSS的详细处理效果，建议简要浏览《[精通DIV.CSS网页样式与布局].何丽.高清扫描版带目录》

菲力蒲LY

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
8
评论
HTML+CSS样式设置——CSS一学就会

HTML+CSS样式设置CSS：（Cascading Style Sheets）层叠样式设置表。网页的展示效果跟其排版有很大的关系。排版则主要依靠CSS来设置、调节。下面说CSS与HTML的联合使用的过程：（1）新建CSS文件（一般放在与HTML文件同一路径下的css文件夹中）（2）在HTML的标签中，用对CSS进行引用 /css文
复制链接

扫一扫