首页 > 代码库 > css样式表

css样式表

2024-08-11 22:17:01   217人阅读

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="http://www.mamicode.com/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样式表


联系
我们