HTML+CSS样式设置

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

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

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

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

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

<link rel=”stylesheet” type=”text/css” href=”文件地址/css文件名称.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网页样式与布局].何丽.高清扫描版

 带文件夹》




版权声明：本文博主原创文章。博客，未经同意不得转载。


												


											
HTML+CSS样式设置——CSS一学就会的更多相关文章
	

    
								
  1. 全局css , 样式设置, css 初始化. css ,style ,全局样式, 初始化样式
		
    全局CSS设置总结 1.清除所有标记的内外边距 html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldse ...
    
		
    2. 
						
  2. CSS样式设置语法全解，样式优先级、值和单位、字体、文本、块级元素，行内元素，替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景
		
    全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...
    
		
    3. 
						
  3. 每天一个JavaScript实例-展示设置和获取CSS样式设置
		
    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
    
		
    4. 
						
  4. TERSUS无代码开发(笔记04)-CSS样式设置
		
    CSS样式设置 1.常用显示样式 大小尺寸 说明  间距边距 说明  各类颜色 说明  width 宽 margin 外边距         color  颜色        height 高 pad ...
    
		
    5. 
						
  5. 各种CSS样式设置细线边框
		
    基础知识回顾 : cellspacing:单元格与单元格之间的边距:cellpadding:单元格内的内容与单元格边沿的边距 简单实用的样式,设置所有的单元格为细线效果 <style type= ...
    
		
    6. 
						
  6. CSS样式设置小技巧
		
    1.水平居中设置 行内元素居中设置:如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的.代码示例如下: HTML代码 <body&g ...
    
		
    7. 
						
  7. 从webkit内核简单看css样式和css规则优先级(权重)
		
    目录 webkit中样式相关类及类间关系 样式规则匹配 权重(优先级)计算 权重相同时的覆盖原则 webkit中样式相关类及类间关系 资料来源: <webkit技术内幕> 结构相关类: 1 ...
    
		
    8. 
						
  8. （day44）css样式、css布局
		
    目录 一.css样式 (一)文字样式 (1)文字字体font-family (2)字体大小font-size (3)字体粗细font-weight (4)字体颜色color (二)文本样式 (1)文字 ...
    
		
    9. 
						
  9. 用JS改变的元素CSS样式，css里display :none 隐藏 block 显示
		
    CSS样式的引用有3种方式:style引用.class引用.id引用,所以js改变元素的样式我们也分3种来说. 1.js改变由style方式引用的样式:方法一:document.divs.style. ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. codeforces 604A Uncowed Forces
			
    题目链接:http://codeforces.com/problemset/problem/604/A 题意:求cf比赛每次能够增加的排名,运算规则会告诉你 题目分类:数学 题目分析:用题目给的公式直 ...
    
			
    2. 
						
  2. 北京哪儿有卖tods豆豆鞋的？在线等答案、、、、（类似动物园、西单等地）_百度知道
			
    北京哪儿有卖tods豆豆鞋的?在线等答案....(类似动物园.西单等地)_百度知道 北京哪儿有卖tods豆豆鞋的?在线等答案....(类似动物园.西单等地)
    
			
    3. 
						
  3. stm32 ARM中的RO、RW和ZI DATA
			
    一直以来对于ARM体系中所描述的RO,RW和ZI数据存在似是而非的理解,这段时间对其仔细了解了一番,发现了一些规律,理解了一些以前书本上有的但是不理解的东西,我想应该有不少人也有和我同样的困惑,因此将 ...
    
			
    4. 
						
  4. groovy : 正則表達式
			
    groovy 正則表達式 企图模仿Perl 的语法,结果是我试用后.发现没法提取匹配的字符串. 还是直接引用 java.util.regex  负责对字符序列进行正則表達式匹配 先转载水木清华上的样例 ...
    
			
    5. 
						
  5. Pyocr 0.2 发布，Python 的 OCR 库 - 开源中国社区
			
    Pyocr 0.2 发布,Python 的 OCR 库 - 开源中国社区 Pyocr 0.2 发布,Python 的 OCR 库
    
			
    6. 
						
  6. hdu4521（线段树+dp）
			
    传送门:小明系列问题——小明序列 题意:有n个数,求间距大于d的最长上升序列. 分析:dp[i]表示在i点以a[i]结束距离大于d的最长上升序列,然后每更新到第i点时,取i-d之前小于a[i]的数为结 ...
    
			
    7. 
						
  7. android 屏幕适配 课程笔记
			
    1 横竖屏切换:   文件名同样.  目录不同.   layout-port/ 代表竖屏   layout-land/ 代表横屏   layout/ 代表不论什么没有修饰符的layout目录.   终 ...
    
			
    8. 
						
  8. mysql增量ID
启动值更改方法
			
    在mysql很多朋友感到场AUTO_INCREMENT增量型ID值它不能被改变,其实这种认识是错误的,这里mysql增量ID开始值更改和设置. 设置自动递增字段的通常的方法: 格时加入: create ...
    
			
    9. 
						
  9. oracle undo 复杂度--oracle核心技术读书笔记四
			
    一. 概述 undo 保存的是旧数据.比方,你改动了一条记录将A列abc改动为def,那么undo里面保存的就是abc.目的有两个:1. 假设你的事务没有提交,可是已经将A列改动,那么别人读取这条数据 ...
    
			
    10. 
						
  10. Android中怎样在应用A中启动或安装应用B
			
    看到别人做的游戏攻略,想着自己的游戏攻略也加入新的功能,即Android中怎样在应用A中启动或安装应用B.就查了一些资料整理下来. 启动或安装对应的应用的方法: Step1:推断是否安装目标应用.仅仅 ...
    
			
    11.