国际艺术界  
国际艺术界首页
 
    国际美术网 国际书法网
国际音乐网                    
国际影视网
 
国际设计网
  国际摄影网   国际广告网    
书画装裱|配框 国际文学网
国际艺术市场       LOGO标志设计  
 
艺术原创区
 
   
   
 艺术家库 | 人体艺术 | 会员中心 | 资源下载 | LOGO设计 | 艺术展厅 | 艺术家排行榜 | 艺术设计 | 作品欣赏库 | 在线投稿
  您的位置:国际艺术界-->国际设计网-->网页多媒体  
国际设计网   
每期榜上星闻   
热点推荐    
  标志设计欣赏    
  平面设计欣赏    
  设计精品    
  设计师加盟    
  包装设计欣赏    
视觉识别    
  标志设计    
  平面设计    
  包装设计    
  服装设计    
  名片设计    
工业设计    
  交通工具    
  电子产品    
  日常用品    
  其他用品    
  设计作品欣赏    
网页多媒体    
  网页设计    
  多媒体作品    
  酷站收录    
  网页理念    
  作品欣赏    
CG 动画    
  CG 插画    
  手绘插画    
  动漫Flash    
  素材与教程    
  作品欣赏    
建筑与环境    
  城市景观    
  园林园艺    
  室内艺术    
  建筑艺术    
  作品欣赏    
学艺沙龙    
  高考辅导    
  设计教程    
  学习院校    
  推荐图书    
  设计对话    
设计服务商    
  设计资讯    
  人才中心    
  设计公司    
  个人与团体    
  设计书籍    
  广告作品欣赏图库   
  媒体广告欣赏   
  室内外广告欣赏   
  展览展示欣赏   
  广告礼品欣赏   
  优秀广告欣赏   
  广告设计   
  公益广告   
  化妆品品牌   
  设计作品欣赏图库   
  LOGO-标志设计欣赏   
  平面设计欣赏   
  包装设计欣赏   
  服装设计欣赏   
  交通工具欣赏   
  电子产品欣赏   
  日常用品欣赏   
  其他用品欣赏   
  网页设计欣赏   
  多媒体作品欣赏   
  CG插画欣赏   
  手绘插画欣赏   
  动漫Flash欣赏   
  城市景观欣赏   
  园林园艺欣赏   
  室内设计 室内装修   
  建筑艺术欣赏   
  精品海报欣赏   
  QQ头像   
  QQ网名   
  名片设计欣赏   
  字体设计   
  画册封面|画册设计   
  商标设计商标转让查询   
  书法作品欣赏图库   
  毛笔(软笔)书法欣赏   
  硬笔书法欣赏   
  篆刻艺术欣赏   
  美术作品欣赏图库   
  国画欣赏   
  油画欣赏   
  工艺美术欣赏   
  雕塑浮雕欣赏   
  装饰画图片素材   
  素描头像素描静物   
  景泰蓝工艺画   
  摄影作品欣赏图库   
  老照片欣赏   
  新闻摄影欣赏   
  人体艺术|人体摄影   
  广告摄影欣赏   
  人物摄影欣赏   
  体育摄影欣赏   
  风光摄影欣赏   
  婚纱照片欣赏   
  影视曲艺作品图库   
  影视精彩片段欣赏   
  戏剧艺术片段欣赏   
  曲艺艺术片段欣赏   
  戏曲艺术片段欣赏   
  音乐作品欣赏图库   
  声乐欣赏   
  器乐欣赏   
  FlashMV欣赏   
  音乐作品(MV)欣赏   
  非主流图片   
  非主流图片素材   
  非主流图片设计   
  非主流签名   
  非主流闪图   
  非主流头像   
  非主流动画   
  非主流歌曲   
  桌面壁纸欣赏图库   
  WINDOWS主题壁纸   
  苹果主题壁纸   
  动物植物风光   
  经典设计壁纸   
  人物主题壁纸   
  高分辨率壁纸   
  游戏卡通壁纸   
  其他类别壁纸   
  个性图标头像   
 
网页制作样式入门级教程 CSS的基本语法规则
2006/5/9 10:13:06   
 

  1. CSS的语法:

  CSS的定义是由三个部分构成:

  选择符(selector),属性(properties)和属性的取值(value)。

  语法: selector {property: value} (选择符 {属性:值})

  说明:

  ·选择符是可以是多种形式,一般是你要定义样式的HTML标记,例如BODY、P、TABLE……,你可以通过此方法定义它的属性和值,属性和值要用冒号隔开:

  例子:body {color: black},此例的效果是使页面中的文字为黑色。

  ·如果属性的值是多个单词组成,必须在值上加引号,比如字体的名称经常是几个单词的组合:

  例子:p {font-family: "sans serif"} (定义段落字体为sans serif)

  · 如果需要对一个选择符指定多个属性时,我们使用分号将所有的属性和值分开:

  例子:p {text-align: center; color: red} (段落居中排列;并且段落中的文字为红色)

  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参数:

  这个段落向右对齐的

  这个段落是居中排列的

  类选择符还有一种用法,在选择符中省略HTML标记名,这样可以把几个不同的元素定义成相同的样式:

  .center {text-align: center} (定义.center的类选择符为文字居中排列)

  这样的类可以被应用到任何元素上。下面我们使h1元素(标题1)和p元素(段落)都归为“center”类,这使两个元素的样式都跟随“.center”这个类选择符:

  <h1 class="center">这个标题是居中排列的</h1>
  <p class="center">这个段落也是居中排列的</p>

  注意:这种省略HTML标记的类选择符是我们经后最常用的CSS方法,使用这种方法,我们可以很方便的在任意元素上套用预先定义好的类样式。

  4. ID选择符

  在HTML页面中ID参数指定了某个单一元素,ID选择符是用来对这个单一元素定义单独的样式。

  ID选择符的应用和类选择符类似,只要把CLASS换成ID即可。将上例中类用ID替代:

  这个段落向右对齐

  定义ID选择符要在ID名称前加上一个“#”号。和类选择符相同,定义ID选择符的属性也有两种方法。下面这个例子,ID属性将匹配所有id="intro"的元素:

  #intro

  {

  font-size:110%;

  font-weight:bold;

  color:#0000ff;

  background-color:transparent

  } (字体尺寸为默认尺寸的110%;粗体;蓝色;背景颜色透明)

  下面这个例子,ID属性只匹配id="intro"的段落元素:

  p#intro

  {

  font-size:110%;

  font-weight:bold;

  color:#0000ff;

  background-color:transparent

  }

  注意:ID选择符局限性很大,只能单独定义某个元素的样式,一般只在特殊情况下使用。

  5. 包含选择符

  可以单独对某种元素包含关系定义的样式表,元素1里包含元素2,这种方式只对在元素1里的元素2定义,对单独的元素1或元素2无定义,例如:

  table a

  {

  font-size: 12px

  }

  在表格内的链接改变了样式,文字大小为12象素,而表格外的链接的文字仍为默认大小。

  6. 样式表的层叠性

  层叠性就是继承性,样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包含的其他元素。事实上,所有在元素中嵌套的元素都会继承外层元素指定的属性值,有时会把很多层嵌套的样式叠加在一起,除非另外更改。例如在DIV标记中嵌套P标记:

  div { color: red; font-size:9pt}

  ……

  这个段落的文字为红色9号字

  (P元素里的内容会继承DIV定义的属性)

  注意:有些情况下内部选择符不继承周围选择符的值,但理论上这些都是特殊的。例如,上边界属性值是不会继承的,直觉上,一个段落不会同文档BODY一样的上边界值。

  另外,当样式表继承遇到冲突时,总是以最后定义的样式为准。如果上例中定义了P的颜色:

  div { color: red; font-size:9pt}

  p {color: blue}

  ……

  这个段落的文字为蓝色9号字

  我们可以看到段落里的文字大小为9号字是继承div属性的,而color属性则依照最后定义的。

  不同的选择符定义相同的元素时,要考虑到不同的选择符之间的优先级。ID选择符,类选择符和HTML标记选择符,因为ID选择符是最后加上元素上的,所以优先级最高,其次是类选择符。如果想超越这三者之间的关系,可以用!important提升样式表的优先权,例如:

  p { color: #FF0000!important }

  .blue { color: #0000FF}

  #id1 { color: #FFFF00}

  我们同时对页面中的一个段落加上这三种样式,它最后会依照被!important申明的HTML标记选择符样式为红色文字。如果去掉!important,则依照优先权最高的ID选择符为黄色文字。

  7. 注释:/* ... */

  你可以在CSS中插入注释来说明你代码的意思,注释有利于你或别人以后编辑和更改代码时理解代码的含义。在浏览器中,注释是不显示的。CSS注释以"/*" 开头,以"*/" 结尾,如下:

  /* 定义段落样式表 */

  p

  {

  text-align: center; /* 文本居中排列 */

  color: black; /* 文字为黑色 */

  font-family: arial /* 字体为arial */

  }

 
编辑:国际艺术界  
设计大师帮扶:标志logo设计 包装设计 画册设计 广告设计 平面设计等VI系统设计 在线QQ:104601249
上一篇】   【下一篇】    【字体: 】【打印


      
   
《国际艺术界名家大典》征稿  弘扬中国梦传递“真正美”免费送名人书法题字QQ:306646416  
本站文章、作品、留言只代表作者和留言者本人,不代表国际艺术界网观点……
 
 
精品标志设计
点击 696486 次
 
六安瓜片茶包装
点击 243421 次
 
法国巴黎铁塔夜景
点击 122621 次
 
国外书籍装帧封面设计[15]
点击 114753 次
 
电影海报-欧美创意篇
点击 113259 次
 
丹麦--陶瓷灯具品欣赏[7]
点击 92304 次
 


图片素材 平面设计欣赏 标志设计欣赏 包装设计欣赏 书法欣赏 名片设计 人体艺术 油画欣赏 国画欣赏

 推荐文章
 文章标题 点击次数 发布日期
==>  如何下载 设计 制作极简网站 24718 2010/3/23 13:52:10
==>  国外摄影网站网页设计欣赏 23607 2011/6/3 15:20:57
==>  国外优秀的室内设计网站 21217 2010/9/28 13:40:40
==>  黑白经典网页设计欣赏 21035 2010/12/10 10:22:05
==>  时尚服装电子商务网站设计 17661 2011/4/20 13:01:59
 相关文章
 资讯标题 点击次数 发布日期
==>  如何下载 设计 制作极简网站 24718 2010/3/23 13:52:10
==>  国外摄影网站网页设计欣赏 23607 2011/6/3 15:20:57
==>  国外优秀的室内设计网站 21217 2010/9/28 13:40:40
==>  黑白经典网页设计欣赏 21035 2010/12/10 10:22:05
==>  时尚服装电子商务网站设计 17661 2011/4/20 13:01:59
 
   
关于我们 | 诚邀合作 | 免责声明 | 意见反馈 | 招贤纳士 | 法律顾问 | 在线投稿 | 友情链接 | 联系站长
  CEL:131-2105-8796 QQ: 306646416 
  版权:中国.国际艺术界网 美国-国际艺术界联合会G.J.Art (USA) Association