CSS入门教程之CSS的语法

2016-01-29 12:04 7 1 收藏

CSS入门教程之CSS的语法,CSS入门教程之CSS的语法

【 tulaoshi.com - Html 】

1.基本语法
  
  CSS的定义是由三个部分构成:选择符(selector),属性(properties)和属性的取值(value)。
  基本格式如下:
  selector { property: value}
  (选择符 { 属性:值})
  选择符是可以是多种形式,一般是你要定义样式的HTML标记,例如BODY、P、TABLE……,你可以通过此方法定义它的属性和值,属性和值要用冒号隔开:
  body { color: black}
  选择符body是指页面主体部分,color是控制文字颜色的属性,black是颜色的值,此例的效果是使页面中的文字为黑色。
  
  如果属性的值是多个单词组成,必须在值上加引号,比如字体的名称经常是几个单词的组合:
  p { font-family: "sans serif"}
  (定义段落字体为sans serif)
  
  如果需要对一个选择符指定多个属性时,我们使用分号将所有的属性和值分开:
  p { text-align: center; color: red}
  (段落居中排列;并且段落中的文字为红色)
  
  为了使你定义的样式表方便阅读,你可以采用分行的书写格式:
  p
  {
  text-align: center;
  color: black;
  font-family: arial
  }
  (段落排列居中,段落中文字为黑色,字体是arial)
  
2.选择符组
  
  你可以把相同属性和值的选择符组合起来书写,用逗号将选择符分开,这样可以减少样式重复定义:
  h1, h2, h3, h4, h5, h6 { color: green }
  (这个组里包括所有的标题元素,每个标题元素的文字都为绿色)
  p, table{ font-size: 9pt }
  (段落和表格里的文字尺寸为9号字)
  效果完全等效于:
  p { font-size: 9pt }
  table { font-size: 9pt }
  
3.类选择符
  
  用类选择符你能够把相同的元素分类定义不同的样式,定义类选择符时,在自定类的名称前面加一个点号。假如你想要两个不同的段落,一个段落向右对齐,一个段落居中,你可以先定义两个类:
  p.right { text-align: right}
  p.center { text-align: center}
  然后用不在不同的段落里,只要在HTML标记里加入你定义的class参数:
  <p class="right"
  这个段落向右对齐的
  </p
  <p class="center"
  这个段落是居中排列的
  </p
  注意:类的名称可以是任意英文单词或以英文开头与数字的组合,一般以其功能和效果简要命名。
  
  类选择符还有一种用法,在选择符中省略HTML标记名,这样可以把几个不同的元素定义成相同的样式:
  .center { text-align: center}
  (定义.center的类选择符为文字居中排列)
  这样的类可以被应用到任何元素上。下面我们使h1元素(标题1)和p元素(段落)都归为“center”类,这使两个元素的样式都跟随“.center”这个类选择符:
  <h1 class="center"
  这个标题是居中排列的
  </h1
  <p class="center"
  这个段落也是居中排列的
  </p
  注意:这种省略HTML标记的类选择符是我们经后最常用的CSS方法,使用这种方法,我们可以很方便的在任意元素上套用预先定义好的类样式。

本新闻共2页,当前在第1页  1  2  

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/html/)

来源:https://www.tulaoshi.com/n/20160129/1484480.html

延伸阅读
标签: Web开发
定位     CSS的定位功能是很强大的,利用它你可以做出各种各样的网页布局。本节就介绍一些CSS常用的定位语句。 1. 相对定位(relative) 相对定位是指相对它本来应该处的位置所做的移动。 style type="text/css" .dingwei{ position:relative; left:50px;} /style p我是一段正常的文本/p p class="dingwei...
标签: Web开发
原文:http://jorux.com/archives/layout-1-if-you-love-css/ 从本篇开始讲述如何用css实现网页的布局,即如何用css控制网页内各个元素的显示位置。如果你是一个初学者,很可能觉得做一个网页的第一步就是布局。其实不然,css网页的设计过程可以参考分为以下几步: 平面设计页面切割布局细节控制 平面设计是一个网页的精髓所在,读者直...
标签: Web开发
出处:当我们布局一个网页的时候,经常会遇到这样的一种情况,那就是最终网页成型的宽度或是高度会超出我们预先的计算,其实就就是所谓的CSS的盒模型造成的。 #test{margin:10px;padding:10px;width:100px;height:100px;} 如上一段的代码,很多时候我们会把它所占的位置计算成width:120px,height:120px,因为在正常的理解下,padding是...
标签: Web开发
前面一篇介绍了网页制作的CSS的作用 宣告CSS样式的语法如下: 選擇器{ 选择器{ 屬性:設定值; 属性:设定值; ... } 在一個選擇器(Selector) 中,可以設定的屬性數目沒有限制。在一个选择器(Selector)中,可以设定的属性数目没有限制。 選擇器主要有三種:型類(Type) 選擇器、Class 選擇器、和ID 選擇器。选择器主要有三种:型类...
标签: Web开发
div和span是什么意思?        相对与其他XHTML标签,div和span对于它们包含的元素是没有意义的。例如当你看到h1/h1标签,你知道里面是标题,当你看到p/p标签的时候你知道里面是一个新的自然段。可是div和span标签并没有这样意义。div只是一个分块的标签,他可以将网页分成几个区块。div里面可能包含一个标题,一...

经验教程

980

收藏

50
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部