CSS简单理解与应用

转载 2015年07月07日 17:28:18

转自:http://blog.csdn.net/xiaoxian8023/article/details/7216807

一、CSS基本概念:
CSS——级联样式表(Cascading Style Sheet)简称“CSS”,通常又称为“风格样式表(Style Sheet)”,它是用来进行网页风格设计的。

CSS能够对 HMTL 中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象盒模型的能力;能够统一地控制HMTL中各标志的显示属性; 能够使人更能有效地控制网页外观以及创建特殊效果的能力,是真正做到网页表现与内容分离的一种样式设计语言。

二、CSS结构与语法
说道CSS将网页表现与内容分离,不得不谈到CSS的语法和结构。

CSS属性和选择器

css的语法结构仅仅有三部分组成:选择器(Selector)、属性(property)、和值(value)。
使用方法:

  1. selector {Property:value;}  

选择器(Selector)指这组样式编码所要针对的对象。可以是一个XHTML标签,如body,h1;也可以是定义了特定的ID或CLASS的标签,如#main选择器表示选择<div id="main">,即一个被指定了main为id的对象。浏览器将对css选择器进行严格的解析,每一组样式均会被浏览器应用到对应的对象上。

属性(Property)是CSS样式控制的核心,对于每一个XHTML中的标签,CSS都提供了丰富的样式属性,如颜色、大小、定位、浮动方式等。

值(value)是指属性的值,形式有两种,一种是指定范围的值,如float属性,只可能应用left,right,none三种值;另一种则是用数值的,如width能够使用0-9999,或其它数学单位来指定。

在实际应用中,我们往往使用以下类似的应用形式:

  1. body {background-color:blue;}  

选择器有3类:ID选择器,类选择器和HTML标签选择器。其中优先级为:ID选择器 > 类选择器 > HTML标签选择器。

ID选择器

ID是网页中用来标识HTML中一个特定元素的,ID选择器在CSS中用#号来定义。

例:

HTML中:

[html] view plaincopy
  1. <span id="special">栏目二</span>  

CSS中:

  1. #special  
  2. {  
  3.     font-size:14px;  
  4. }  

CLASS选择器(类选择器)

class则是网页中用来标识一组特定元素的,类选择器在CSS中用.号来定义。

例:

HTML中

[html] view plaincopy
  1. <span class="menu3">栏目三</span>  

CSS中:

  1. .menu3 span  
  2. {  
  3.     color:#00f;  
  4.     font-size:40px;  
  5. }  

标签选择器 (类型选择器)

类型选择器,是指以网页中已有的标签类型作为名称的选择器。body是网页中的一个标签类型,div也是,span也是。因此以下选择器都是类型选择器,而它们将控制页面中所有的body或div或span:

  1. body{}  
  2. div{}  
  3. span{}  

当然,CSS也提供了便捷的语法:

①.除了对单个XHTML元素进行样式指定,同样可以对一组对象进行相同的样式指派,使用逗号对选择器进行分隔。

  1. h1,h2,h3,p,span{font-size:12pxfont-family:arial;}  

使得页面中所有的h1,h2,h3,p,span都将具有相同的样式定义。这样做的好处是对于页面中需要使用同样式的地方只需要书写一次样式表即可实现,减少代码量,改善css代码的结构。

②.可以对某一个对象的子对象进行样式设定, 对象之间使用空格作为个分隔符。 

例:
HTML中:             

[html] view plaincopy
  1. <h1>这是我们的一段文本  
  2.     <span>这是span内的文本</span>  
  3. </h1>  
  4. <h1>单独的h1</h1>  
  5. <span>单独的span</span>  
  6. <h2>被h2标签套用的文本  
  7.     <span>这是h2下的span</span>  
  8. </h2>   

CSS中: 

  1. h1 span{font-weight:bold;}  

h1标签之下的span标签将被应用font-weight:bold的样式设置。注意,仅仅对有此结构的标签有效,对于单独存在的h1或单独存在的span及其他非h1标签下属的span均不会应用此样式。这样做能够帮助我们避免过多的ID及CLASS的设置,直接对所需设置的过犹不及进行设置。

还有:

  1. h1 .p1 {}     /*表示h1标签下的所有class为p1的标签。*/  
  2. #content h1{} /*表示id为content的标签下的所有h1标签。*/  

当然多级也是支持的,如以下选择器样式同样能够作用:

  1. body h1 span stront{ font-weight=bold;}  

css还提供了一些特殊标签的表示方法:

①.*号来泛指所有的元素

  1. *  
  2. {  
  3.     margin:0PX;  
  4.     padding:0Px;  
  5.     border:0px;  
  6. }  

②.body中设置全文的样式

  1. body  
  2. {  
  3.     font-size:14px;  
  4. }  

③.a:linka:hover,a:visited 可以设置 鼠标未移上、经过、访问过后的超链接样式

  1. a:link,a:visited  
  2. {  
  3. /*鼠标未移上去的超链接的样式*/  
  4. /*访问过后的超链接的样式*/  
  5. color:#000;  
  6. text-decoration:none;  
  7. }  
  8. a:hover  
  9. {  
  10. /*鼠标移上去的超链接的样式*/  
  11. color:#00f;  
  12. text-decoration:underline;  
  13. }  

④.居中对齐方式:

  1. text-align :center/*文本水平对齐*/  
  2. line-height:2px;    /*(数值与行高相同,则自动垂直对齐)*/  
  3. vertical-align:middle;  /*元素垂直对齐*/  
 
三、使用CSS布局的优点
使用CSS布局的网页相对于传统的Table布局的网页有4大优势:
1.表示与内容分离
2.提高页面的载入速度
3.易于维护和改版
4.更符合W3C指定的WEB标准
 
四、CSS使用方式:
CSS有3种方式可以在站点网页上使用:
    ①内联样式:采用style属性将样式内嵌到各个网页元素。
    ②内部样式表:将用style元素创建嵌入的样式表插入到网页中的HEAD元素部分中。
    ③外部样式表:用link元素将外部样式表链接到网页上。

举例说明:
【内联样式】
[html] view plaincopy
  1. <html>  
  2. <head>   
  3.   <title>文档标题</title>            
  4. </head>  
  5. <body>   
  6.   <p style="color:Blue;font-Style:Italic;">我是内联样式</p>  
  7.   <p style="color:Red">我使用的是Style属性</p>  
  8. </body>  
  9. </html>   
 
【内部样式表】
[html] view plaincopy
  1. <html>  
  2. <head>   
  3.     <title>文档标题</title>   
  4.     <style type="text/css">             
  5.     h1  {color:marron;}  
  6.     p   {color:hotpink; font-familiy:Arial;}  
  7.     </style>  
  8. </head>  
  9. <body>   
  10.     <h1>我是内部样式表</h1>  
  11.     <p>我使用的是Style元素</p>  
  12. </body>  
  13. </html>   
【外部样式表】
“Test.htm”文件内容:
[html] view plaincopy
  1. <html>  
  2. <head>   
  3.    <title>文档标题</title>   
  4.    <link href="cssTest.css" rel="stylesheet",type="text/css"/>   
  5. </head>  
  6. <body>   
  7. <h1>我是外部样式表</h1>  
  8. <p>我使用的是Link元素</p>  
  9. </body>  
  10. </html>   
“cssTest.css”文件内容:
  1. h1  {color:marron;}  
  2. p   {color:hotpink; font-familiy:Arial;}  

相关文章推荐

CSS简单理解与应用

一、CSS基本概念: CSS——级联样式表(Cascading Style Sheet)简称“CSS”,通常又称为“风格样式表(Style Sheet)”,它是用来进行网页风格设计的。 ...

简单css应用

  • 2014-04-17 22:16
  • 230KB
  • 下载

简单的CSS应用手册

  • 2009-09-28 22:07
  • 259KB
  • 下载

精通CSS(7.1对数据表格应用样式&7.2简单的表单布局)&R语言课堂笔记(王中贤老师)

一.对表单和数据表格应用样式 1.表格真正的用途:显示表格数据,而非用于页面布局。 2.目标: ①创建有吸引力且可访问的数据表格。 ②创建简单和复杂的表单布局。 ③对各种表单元素应用样式。 ...

Css样式的简单应用分析

  • 2010-12-27 09:48
  • 1.58MB
  • 下载

让网页装进Android手机(将html+css+js打包成Android应用)(简单的)

今晚尝试了一下,将自己简单写的网页(html+css+js)打包成Android应用装进手机。(当然如果网页做得好的话,采用响应式布局,即可在手机上完美展示) 首先创建一个Android项目,在布局...

CSS滤镜简单应用

一、跑马灯 主要是应用Aphla滤镜完成: 跑马灯程序的代码为:{ filter: Alpha(Opacity=100, FinishOpacity=20, Style=2, StartX=0, ...

简单理解css中的垂直居中和水平居中,即vertical-align和text-align属性

如何实现父元素内部元素的垂直居中与水平居中,vertical-align和text-align的简单实用方法

简单理解css中transform的matrix3d()

web前端开发中的CSS属性transform小东西大智慧,其直接涉及数字图像处理的仿射变换,数字图像处理是一门很有深度的课程,并不容易学好。其应用到web前端中,让很多朋友摸不着头脑。此文便简单的解...

css行高line-height的深入理解及应用

一、前言 前两天在腾讯ISD团队博客上看到一篇翻译的文章“深入理解css 行高”(http://isd.tencent.com/?p=1503),是个不错的文章,学到了不少东西,建议您看看。 这里...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)