HTML+CSS样式设置——CSS一学就会

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标签选择器在使用时,若多个标签设置相同效果,可联合写。将多个标签用空格隔开用一个{}进行设置即可,不同的效果可单独外加设置。

举例:

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文件夹中。

时间: 2024-10-17 07:48:51

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

博客园自定义CSS样式设置

关于博客园自定义CSS样式设置 关于博客园自定义CSS样式设置 首先,选择一个博客皮肤模板,如下 然后,F12审查元素,可对右侧的元素规则进行自定义更改,然后覆盖原CSS 譬如看看取消掉自定义背景图片是什么样子,同理也可以添加CSS样式代码 如此修改完后,就可在页面定制CSS代码框中填上你所需要修改的代码 下面是我的页面定制CSS代码: 1.html,body{2. color: #807C7C;3. font-family: "Helvetica Neue",Helvetica,Ar

每天一个JavaScript实例-展示设置和获取CSS样式设置

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>每天一个JavaScript实例-展示设置和获取CSS样式设置</title> <style> #date{ width:200px; background-color:l

BootStrap之基础-2 CSS样式(全局CSS样式)

一.全局CSS样式 概述 - HTML5文件类型 - BootStrap使用到的某些HTML元素和CSS属性需要将页面设置为HTML5  - 移动设备优先 - 为了确保适当的绘制和触屏缩放,需要在<head>之中添加viewport元数据元素 CSS全局样式 - 为body元素设置 background-color: #fff; - 使用 @font-family-base.@font-size-base 和 @line-height-base a变量作为排版的基本参数 - 为所有链接设置了基

各种CSS样式设置细线边框

基础知识回顾 : cellspacing:单元格与单元格之间的边距:cellpadding:单元格内的内容与单元格边沿的边距 简单实用的样式,设置所有的单元格为细线效果 <style type="text/css"> #tab1{ border-collapse:collapse;} #tab1 td{ border:1px solid #000000;} </style> <table width = "640px" id = &qu

JavaScript的DOM_获取CSS样式设置元素大小

一.通过 style 内联获取元素的大小 style 获取只能获取到行内 style 属性的 CSS 样式中的宽和高,如果有获取:如果没有则返回空. <script type="text/javascript"> window.onload = function(){ var box = document.getElementById('box'); //获取元素 alert(box.style.width); //200px. 没有设置的话为空 alert(box.sty

从webkit内核简单看css样式和css规则优先级(权重)

目录 webkit中样式相关类及类间关系 样式规则匹配 权重(优先级)计算 webkit中样式相关类及类间关系 资料来源: <webkit技术内幕> 结构相关类: 1.StyleRuleBase类: 单个的样式规则(选择器+规则体) 2.StyleSheetContents类: 样式规则集,其成员-m_childRules是一个StyleRuleBase实例的列表,是1:n的数量关系 3.CSSStyleSheet类: 成员-m_contents是一个StyleSheetContents实例,

CSS样式设置之垂直居中设置

2.垂直居中 我们在实际工作中也会遇到需要设置垂直居中的场景,比如好多报纸的文章标题在左右一侧时,常常会设置为垂直居中,为了用户体验性好. 这里我们又得分两种情况:父元素高度确定的单行文本,以及父元素高度确定的多行文本. 2.1 父元素高度确定的单行文本 第一种父元素高度确定的单行文本, 怎么设置它为垂直居中呢? 父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和line-height高度一致来实现的.(height: 该元素的高度,line-height: 顾名思义,

css样式设置小技巧

元素分为行内元素 还是 块状元素 ,块状元素里面又分为定宽块状元素,以及不定宽块状元素. 水平居中内容如下~ 一.行内元素:如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的. 二.定宽块状元素:满足定宽和块状两个条件的元素是可以通过设置"左右margin"值为"auto"来实现居中的. margin:20px auto;/* margin-left 与 margin-right 设置为 auto */

从零开始学习html(十五)css样式设置小技巧——下

六.垂直居中-父元素高度确定的单行文本 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>垂直居中</title> 6 <style> 7 8 .wrap h2{ 9 margin:0; 10 height:100px; 11 12 background:#ccc; 13 } 14 </style> 1