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. phprpc 使用实例（同时有Java、Android和Delphi客户端的例子）
			
    PHPRPC 是一个轻型的.安全的.跨网际的.跨语言的.跨平台的.跨环境的.跨域的.支持复杂对象传输的.支持引用参数传递的.支持内容输出重定向的.支持分级错误处理的.支持会话的.面向服务的高性能远程过 ...
    
			
    2. 
						
  2. 安卓MP3播放器开发实例（1）之音乐列表界面
			
    学习安卓开发有一年了,想想这一年的努力,确实也收获了不少.也找到了比較如意的工作. 今天准备分享一个以前在初学阶段练习的一个项目.通过这个项目我真正的找到了开发安卓软件的感觉,从此逐渐步入安卓开发的正 ...
    
			
    3. 
						
  3. VMware中linux与window目录共享
			
    在虚拟机下来实如今windows下共享一个目录: (前提已安装完毕vmtools:http://blog.csdn.net/pipisorry/article/details/21318931) 打开 ...
    
			
    4. 
						
  4. 2014-5-22 java.lang.OutOfMemoryError: Java heap space的一次诊断
			
    收到消息某系统一个节点因为内存溢出而宕机.系统的中间件是weblogic.数据库的oracle. 1. 先用IBM  HeapAnalyzer分析内存溢出时的dump文件,找到占用内存最多的请求,然后 ...
    
			
    5. 
						
  5. poj 2166 构造
			
    一个看了解题报告才能想明白的题目,第一点比较容易想明白,就是每次把1交换到堆顶之后如果能够换到最后面的位置那么一定是最优的,但是怎么实现这个没有想明白. 题解的那种构建方法,及从2开始插入,是可以保证 ...
    
			
    6. 
						
  6. [华为机试练习题]50.求M的N次方的最后三位
			
    题目 描写叙述: 正整数M 的N次方有可能是一个很大的数字,我们仅仅求该数字的最后三位 例1: 比方输入5和3 ,5的3次方为125.则输出为125 例2: 比方输入2和10 2的10次方为1024  ...
    
			
    7. 
						
  7. 在C#或者SWT上跨进程访问SWT控件的问题
			
    可能为了进程安全,无论是C#的Form还是Eclipse的SWT,都不允许跨进程访问控件. 通俗一点说就是: A进程创建了控件Widget,若想在B进程中访问控件Widget就会报错,必须在创建Wid ...
    
			
    8. 
						
  8. hdu4341（分组背包）
			
    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4341 题意:一个人在原点(0,0)抓金子,每块金子有一个获得需要的时间t和价值v.而且有的金子可能在一 ...
    
			
    9. 
						
  9. 祖国版SoloWheel：Airwheel爱尔威火星车 拆箱&上手经验_运动户外_晒物广场_什么值得买
			
    http://m.baidu.com/from=844b/bd_page_type=1/ssid=0/uid=3151E6C0905477A13653132D762BB6FB/pu=sz%401320 ...
    
			
    10. 
						
  10. POJ 1018 【枚举+剪枝】.cpp
			
    题意: 给出n个工厂的产品参数带宽b和价格p,在这n个工厂里分别选1件产品共n件,使B/P最小,其中B表示n件产品中最小的b值,P表示n件产品p值的和. 输入 iCase n 表示iCase个样例n个 ...
    
			
    11.