注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

——挨踢民工 Playkid——

一个搞IT的人!也是一个被IT搞的人!因为迷恋互联网而一网情深、最后落网为虫!

 
 
 

日志

 
 
 
 

CSS_层叠样式表基础教程  

2012-05-30 18:03:48|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
  层叠样式表(Cascading Style Sheets,简写CSS),网页可以使用CSS来决定文件的颜色、字体、排版等显示特性。CSS最主要的目的是将文件的结构和内容(用HTML或其他相关的语言写的)与文件的显示样式(CSS)分隔开来。比如HTML中H2标志这一个二级标题,它在级别上比一级标题H1低,比三级标题H3高,这个就是结构上的信息。
  
  HTML文件中的每一个class或id都可以有自己的显示特征,而且每一个没有id特性的HTML结构也可以有自己的显示特征。这些结构有的是HTML自己需要的,有的是专门为CSS设置的。
  
  使用CSS的优点有:
  1.一个整个网站或其中一部分网页的显示信息被集中在一个地方,要改变它们很方便;
  2.不同的读者可以有不同的样式,比如有的读者需要字体比较大;
  3.HTML文件本身的范围变小了,它的结构简单了,它不需要包含显示的信息。
  
  CSS信息可以来自:
  1.作者样式
  ①作者可以在HTML文档<head>标签中使用<link>标签调用独立的外部样式表(CSS文件)
  ②作者可以将CSS信息内嵌在HTML页面内(元素直接使用style属性)
  ③作者可以在HTML文档<head>标签中定义嵌入式样式表
  ④作者可以直接在HTML页面内定义+调用样式表
  2.读者样式
  ⑤读者可以在其浏览器内设立一个地区性的CSS文件。这个CSS文件可以用在所有的HTML文件上
  3.浏览器的样式
  ⑥假如外部没有特别指定一个样式的话,一般浏览器自己有一个内在的样式。
  
  其优先级为:
  内嵌样式(在HTML元素内部)>
  内部调用样式(在HTML元素周围)>
  内部嵌入样式表(位于<head>标签内部)>
  外部样式表>(<link>调用调用外部样式表)
  区域性CSS文件>
  浏览器缺省设置
  
  一、CSS规则由两个主要的部分构成:选择器,以及一条或多条声明(属性+值),也就是调用+定义。
  
  1.元素选择器,文档的元素就是最基本的选择器。
  ---------
  <H2><font color="red" bgcolor="white"><i>使用CSS</i></font></H2>
  
  上面的例子可以变成这样:H2是选择器,color和background是属性,red和white是值(如果值为多个单词,则要加引号)。
  
  <H2>使用CSS</H2>
  H2 { color: red; background: white; }
  ---------
  2.ID选择器,id选择器以"#"来定义。
  #red {color:red;}
  <p id="red">这个段落是红色。</p>
  --------
  3.类选择器,类选择器以一个点号显示(类名的第一个字符不能使用数字)。
  .center {text-align: center}
  <h1 class="center">
   This heading will be center-aligned
  </h1>
  4.属性选择器,对带有指定属性的HTML元素设置样式。
  下面的例子为带有title属性的所有元素设置样式:
  [title]
  {
  color:red;
  }
  5.DIV+CSS
  div+css是一种常见的网页布局方法。div是用来排版的,而css是用来定义div的样式。div+css通常采用外链的方式来调用层叠样式表文件(style.css),用id和class来标识区分网页中不同结构的特征。
  
  二、行内样式表
  除在HTML内直接「定义+调用」之外(如上1.2.3.4.),也可于HTML内直接使用style属性。
  用style属性设置颜色、字体和尺寸如下:
  <html>
  <body>
  <h1 style = "font-family:verdana">文章标题</h1>
  <p style = "font-family:arial;color:red;font-size:20px;">文字内容</p>
  <div style="color:red; background:yellow; font-weight:bold;">
  这个段落会被显示为黄底红字粗体。
  </div>
  </body>
  </html>
  
  1.网页设计中常用的CSS属性
  文字或元素的颜色:color
  字体:font-family
  文字大小:font-size
  段落首行缩进:text-indent(如「p {text-indent: 5em;}」)
  文本对齐方式:text-align(如「text-align:center」)
  背景颜色:background-color
  背景图像:background-image
  列表样式:list
  鼠标样式:cursor
  边框样式:border
  内补白:padding
  外边距:margin
  
  2.缩写规则
  ①颜色缩写:16进制的色彩值,如果每两位的值相同,可以进行缩写,例如:
  000000可以缩写为#000,#336699可以缩写为#369;
  ②边框缩写
  边框的属性如下:
  border-width: 1px;
  border-style: solid;
  border-color: #000;
  可以缩写为一句:border: 1px solid #000;
  ③背景缩写
  background-color: #F00;
  background-image: url(background.gif);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 0 0;
  可以缩写为一句:background: #F00 url(background.gif) no-repeat fixed 0 0;
  ④合并相同属性的元素
  所有的标题元素都是绿色的,可以这样缩写:
  h1,h2,h3,h4,h5,h6 {
   color: green;
   }
  
  三、使用<head>植入样式表
  还可以使用<style>...</style>标记在HTML文档中定义嵌入式样式表,该标记必须放在<head>与</head>标记之间。
  <html>
  <head>
  <style type="text/css">
   h1 {color:red}
   p {color:blue}
  </style>
  </head>
  
  <body>
  <h1>Header-1</h1>
  <p>This is a paragraph.</p>
  </body>
  </html>
  
  四、使用 <link> 标签链接调用外部样式表
  HTML和CSS将网页文件的结构、内容与显示样式分隔开来,这里正是样式表功能发挥优势的地方。
  <head>
  <link rel="stylesheet" type="text/css" href="mystyle.css" />
  </head>
  
  DIV+CSS
  div+css是一种常见的网页布局方法。div是用来排版的,而css是用来定义div的样式。div+css通常采用外链的方式来调用层叠样式表文件(style.css),用id和class来标识区分网页中不同结构的特征。
  随着HTML5的到来,无处不在的<div id="header">和<div id="footer">传统代码方法,将变成标签<Header>和<footer>。


  评论这张
 
阅读(291)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2016