码迷,mamicode.com
首页 > Web开发 > 详细

css样式表

时间:2016-09-03 19:42:02      阅读:218      评论:0      收藏:0      [点我收藏+]

标签:

CSS发展史

•1996年12月  css第一版诞生。
•1998年5月  css2正式发布
•2004年    css2.1发布
•Css3的发布……。不是一个时间而是一个时间段
 
 
技术分享
 
 
CSS的基本概念
–CSS是层叠样式表(Cascading Style Sheet)
 
CSS的作用
用于控制网页的外观,修饰和美化html标签的,实现了结构和形式的分离。

  使用CSS+DIV的优点

  采用CSS+DIV进行网页重构相对与传统的TABLE网页布局而具有以下3个显著优

1:表现和内容相分离
2:提高页面浏览速度
3:易于维护和改版
 
–样式的定义方式

选择器{样式1:样式值1;样式2:样式值2;……}

 

样式表的分类

1、行内样式表

  在html标记内,使用style属性定义css样式。

  如:<p     style=”color:#00ffdc;”></p>

技术分享

 

、内嵌样式就是将css添加到<head>与</head>之间,并用<style></style>标记声明的一种样式。

  语法如下:

<style>

  /*这里写css内容*/

</style>

3、在外部定义css样式表,通过<link/>链接标记链接到页面中的一种样式。

语法:

<link href="style.css"  rel="stylesheet" type="text/css" />

4、在外部定义css样式表,通过导入方式链接到页面中的一种样式。

语法:

<style>

       @import url();

 </style>

样式表优先级

 

•就近原则
 
CSS选择器
•样式的定义方式

选择器{样式1:样式值1;样式2:样式值2;……}

 

–Css选择器
•全局选择器

  设置所有标签使用同一样式,用*来表示

   全局选择器语法:*{  }

•标签选择器

标签选择器的语法:p{}

技术分享

 

类选择器

    类选择器:用来为一系列标签定义相同的样式

  类选择器的语法: .classname{}   

  先定义

    .blue{color:#00000ff;}

  然后再引用

  <h2  class=“blue” >一站式建店</h2>

 

ID选择器

ID选择器的语法:#idname{} 

先定义

#green{color:#0000ff;}

 

再引用样式

<h2  id=“green” >一站式建店</h2>

用法和class类似,但要注意同一id名在同一个页面中只能出现一次

 

选择器的优先级及权重

 

• 行内>id>class>element>*

 

•权重:

 

–行内/1000

 

–id/100,

 

–class/10,

 

     element/1,

 

  */0

•基础样式属性
•Color:颜色;规定颜色值为颜色单词名称例如(red)或者十六进制值得颜色例如(#ff0000)或者为rgb值得颜色例如(rgb(255,0,0));
•Width:宽度;设置元素的宽度值,值为数字;单位为px(像素)、em(字符)、%(百分比);默认值为auto(自动,通过浏览器自动计算出宽度值单位为像素)
•Height:高度;设置元素的高度值,值为数字;单位为px(像素)、em(字符)、%(百分比);默认值为auto(自动,通过浏览器自动计算出宽度值单位为像素)
•Background-color:背景颜色;规定颜色值为颜色单词名称例如(red)或者十六进制值得颜色例如(#ff0000)或者为rgb值得颜色例如(rgb(255,0,0));
•Inherit:属性值,大部分属性都有该属性值意义为继承。

 

颜色值的表示法

•单词表示法
–Red green blue yellow pink orange…
•十六进制表示法
–#ff0000 #00ff00 #0000ff #000000  #ffffff
–#f00 #0f0  #00f  #000 #fff
•Rgb表示法
–(255,0,0)
•Rgba表示法
–(255,255,0,0.3)
 
 

 

 

 

css样式表

标签:

原文地址:http://www.cnblogs.com/ayal/p/5837770.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!