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. HUST 1569(Burnside定理+容斥+数位dp+矩阵快速幂)
			
    传送门:Gift 题意:由n(n<=1e9)个珍珠构成的项链,珍珠包含幸运数字(有且仅由4或7组成),取区间[L,R]内的数字,相邻的数字不能相同,且旋转得到的相同的数列为一种,为最终能构成多少 ...
    
			
    2. 
						
  2. NET之全平台一体化
			
    NET之全平台一体化的体验 一.前言 近来利用空闲时间研究了一下Xamarin的技术,想想既然提供了如此好的支持,就该尝试一切可能,来一个”大小通吃“. 何为全平台:APP包括Android.IOS. ...
    
			
    3. 
						
  3. cmake编译时遇到的问题解决
			
    编译cmake首先须要gcc环境,能够运行 gcc --version命令看看. 假设没有,能够使用yum或从cd中进行安装,此处是在虚拟机中从cd中进行安装.将cd链接到虚拟机都会吧,此处略去,.. ...
    
			
    4. 
						
  4. POJ 1122 FDNY to the Rescue!
			
    给出某些交叉点的距离,-1 表示无法到达. 然后给出火灾发生点  和 附近的消防局位置. 排列消防局 的 时间 与路径. 反向建图,以火灾出发点为起点做一次SPFA. #include<cstd ...
    
			
    5. 
						
  5. redis做RDB时请求超时case
			
        近期在排查redis做rdb时会有部分请求超时的case.初步推断是我们redisserver上开启了THP(Transparent Huge Pages).      1) Linux本身的 ...
    
			
    6. 
						
  6. Java程序猿学习当中各个阶段的建议
			
    回答阿里社招面试如何准备,顺便谈谈对于Java程序猿学习当中各个阶段的建议   引言 其实本来真的没打算写这篇文章,主要是LZ得记忆力不是很好,不像一些记忆力强的人,面试完以后,几乎能把自己和面试官的 ...
    
			
    7. 
						
  7. hdu 5015 233 Matrix(构造矩阵)
			
    http://acm.hdu.edu.cn/showproblem.php?pid=5015 由于是个二维的递推式,当时没有想到能够这样构造矩阵.从列上看,当前这一列都是由前一列递推得到.依据这一点来 ...
    
			
    8. 
						
  8. POJ 1088 滑雪 记忆化优化题解
			
    本题有人写是DP,只是和DP还是有点区别的,应该主要是记忆化 Momoization 算法. 思路就是递归,然后在递归的过程把计算的结果记录起来,以便后面使用. 非常经典的搜索题目,这样的方法非常多题 ...
    
			
    9. 
						
  9. Objective-c 中的算术函数和常数的表示
			
    常数 常数名 说明 M_PI 圆周率(=π) M_PI_2 圆周率的1/2(=π/2) M_PI_4 圆周率的1/4(=π/4) M_1_PI =1/π M_2_PI =2/π M_E =e M_LO ...
    
			
    10. 
						
  10. 解决：Determining IP Information for eth0 一直停留 无法进入系统
			
    问题场景: vm centos6.4网卡之前一直没异常,可今天启动时一直卡在Determining IP Information for eth0,无法进入系统.网上说了非常多办法,大多都是不着边的说 ...
    
			
    11.