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. Mybatis+Struts2的结合:实现用户插入和查找
			
    总结一下今天一个成功的小实验:Mybatis+Struts2的结合:实现用户插入和查找.删除和修改如果以后写了,会继续更新. 一 准备工作. 1.新建一个java web项目. 2.在webConte ...
    
			
    2. 
						
  2. 【图像处理】Bilinear Image Scaling
			
    Bilinear image scaling is about the same as nearest neighbor image scaling except with interpolation ...
    
			
    3. 
						
  3. 编程算法 - 萨鲁曼的军队(Saruman&#39;s Army) 代码(C)
			
    萨鲁曼的军队(Saruman's Army) 代码(C) 本文地址: http://blog.csdn.net/caroline_wendy 题目: 直线上有N个点, 每个点, 其距离为R以内的区域里 ...
    
			
    4. 
						
  4. 算法起步之动态规划LCS
			
    原文:算法起步之动态规划LCS 前一篇文章我们了解了什么是动态规划问题,这里我们再来看动态规划另一个经典问题,最长公共子序列问题(LCS),什么是子序列,我们定义:一个给定序列将其中的0个或者多个元素 ...
    
			
    5. 
						
  5. memwatch的使用
			
    博主的新Blog地址:http://www.brantchen.com 欢迎訪问:) linux下的測试工具真是少之又少,还不好用,近期试用了memwatch,感觉网上的介绍不太好,所以放在这里跟大家 ...
    
			
    6. 
						
  6. TestApe - Unit testing for embedded software
			
    TestApe - Unit testing for embedded software About this site Welcome - This site is TestApe.com. Mos ...
    
			
    7. 
						
  7. Burp Suite抓包、截包和改包
			
    Burp Suite..呵呵.. 听说Burp Suite是能够监測.截取.改动我们訪问web应用的数据包,这么牛X? 条件:本地网络使用代理.由Burp Suite来代理.也就是说,每一个流出外网的 ...
    
			
    8. 
						
  8. .net设计模式 - 单例模式
			
    DoNet设计模式实例之单例模式( Singleton Pattern) 一 : 单例模式的简介:(Brief Introduction) 单例模式(Singleton Pattern),保证一个类只 ...
    
			
    9. 
						
  9. Drools学习笔记-01-在eclipse indgo集成Drools5.5
			
    1.1.条件 Drools它是一个基于Java开源规则引擎.因此,使用Drools以及前需要安装在开发机器JDK周边环境,Drools5.5需要JDK版本号的1.5或者更多. 1.2.开发环境搭建 大 ...
    
			
    10. 
						
  10. BGP拓扑错误模拟配置
			
    R1配置 --------------------------------------------- version 5.20, ESS 2207P45# sysname RT1# super pas ...
    
			
    11.