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. ios block循环引用问题
			
    ios开发中,开了ARC模式,系统自动管理内存,如果程序中用到了block就要注意循环引用带来的内存泄露问题了 这几天遇到一个问题,正常页面dismiss的时候是要调用dealloc方法的,但是我的程 ...
    
			
    2. 
						
  2. Delphi基础Write写入结构体到文件（使用 file of myrecord就行了，真简单）
			
    program WriteStruct; {$APPTYPE CONSOLE} uses SysUtils; //写入结构体 type TCustomer = record ID: ]; Code:  ...
    
			
    3. 
						
  3. object-c编程tips-timer
			
    object-c定时器 object-c定时器会自己主动retain当前的使用者,假设不注意调用invalidate,则非常easy引起循环引用导致内存泄露.以下的思路提供了一套还算可行的解决方式.  ...
    
			
    4. 
						
  4. 《Android系统开发》笔记
			
    <Android系统开发>笔记1:Android系统概述 Android四层架构: 1. Linux Kernel&driver层 a.依赖于Linux 2.6内核,包含安全性.内 ...
    
			
    5. 
						
  5. Java读取本地文件，并显示在JSP文件中
			
        当我们初学IMG标签时,我们知道通过设置img标签的src属性,能够在页面中显示想要展示的图片.其中src的值,可以是磁盘目录上的绝对,也可以是项目下的相对路径,还可以是网络上的图片路径.在存 ...
    
			
    6. 
						
  6. linux使用进阶（一）
			
    本文依据<应该知道的Linux技巧>coolshell上的一篇文章提到的Linux技巧,结合自己掌握的情况进行扩展和总结得来.主要包含下面内容:     一.日常操作     二.数据处理 ...
    
			
    7. 
						
  7. A Game of Thrones(12) - Eddard
			
    The summons(['sʌm(ə)nz]召唤:传票) came in the hour before the dawn, when the world was still and grey. A ...
    
			
    8. 
						
  8. 【ArcGIS 10.2新特性】ArcGIS 10.2 for Server新特性
			
    ArcGIS forServer相关的很多重大消息,如与Portal for ArcGIS进行了集成,提供对实时数据支持.离线地图使用. 1.与Portal for ArcGIS集成 用户能够配置Po ...
    
			
    9. 
						
  9. 搭建php环境时解决jpeg6 make: ./libtool：命令未找到
			
    搭建php环境时解决jpeg6 make: ./libtool:命令未找到 [root@bogon jpeg-6b]# make; make install ./libtool --mode=comp ...
    
			
    10. 
						
  10. sqlserver安全加固
			
      sqlserver2012安装好以后必要的安全加固,不然非常多DBA的信息普通账户登录后都能够读取到.  --use [master] --GO --DENY VIEW SERVER STATE  ...
    
			
    11.