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

css

时间:2017-06-11 23:39:17      阅读:331      评论:0      收藏:0      [点我收藏+]

标签:方式   速度   render   line   dem   data   port   imp   htm   

CSS

学习知识点 

一. CSS(Cascading Style Sheet)可译为“层叠样式表”或“级联样式表”,它定义如何显示 HTML元素,用于控制网页的外观。 

二.为什么使用css,优点是什么?

 1:【内容】和【表现】相分离

 HTML文件中只存放文本信息,将样式部分放在一个独立样式文件中。页面对搜索引擎更加友好。

 2:提高页面浏览速度采用CSS布局的页面容量要比TABLE布局的页面文件容量小得多,前者一般只有后者的1/2大小。

 3:易于维护和改版只要简单的修改对应CSS文件,就可以重新设计整个网站的页面。

 4: 使用CSS布局更符合现在的W3C标准W3C组织是对网络标准制定的一个非赢利组织,像HTML、CSS、XML的标准就是由它来定制 

三、CSS样式表的调用方式哪几种?

1、内部样式:把CSS样式表放到<head>文档中:

 格式如下:

<style type=“text/css”> …… </style> 

2、内联式:把CSS样式表写在HTML对应的标记内。

 格式如下:

<p style="font-size:14pt;color:blue"></p> 

3、外部样式:把编辑好的CSS文档保存成“.CSS”文件,然后在<head>中定义。

 格式如下:<head> <link rel=stylesheet href="css的文件地址">.....</head> 

4、导入样式:与链入外部样式的功能基本相同,只是语法和实现方式上有差别。

 格式如下:

 <style>

 @import url(css.css);

</style> 

 4、几种调用方式的优先级?

 从高到低:内联样式、外部样式、内部样式、导入样式

 5、CSS的语法: CSS的定义是由三部分构成: 选择器,属性和属性值。

 语法: 

selector {property: value;} 

选择符{属性:值;}  

举例:

body {color:#006666;font-size: 18px;} 

属性和属性值之间是冒号,

多个属性值之间用分号隔开。

 6、css

选择器分类

1、类选择器

 定义:

类选择器根据类名来选择,前面以”.”来命名,如

.demo{color:#FF0000;} 

使用方法:在HTML中,标记可以定义一个class的属性来调用。如

 <p class="demo"> ....</p> 

2、id选择器定义:根据元素ID来选择元素,具有唯一性。前面以”#”号来标志,如:

#demo{color:#FF0000; } 

 使用方法:在HTML中,标记可以定义一个id的属性来调用。如

 <p id="demo"> ....</p> 

3、标签选择器

定义:HTML页面是有很多不同的标签组成,标签选择器,则是决定对应标签采用相应的CSS样式。

 使用方法:p{ 

font-size

:12px; background:#900; color:090; } ,页面里对应的p标记全部应用此样式。

 4、伪类选择器(针对超链接) 一般伪类都只会被应用在链接的样式上,格式如下:

 a:link{color: #000099;} 带有超链接的文字显示的样式。

 a:visited{color: #000099; } 访问过的超链接显示的样式。

 a:hover{color: #000099; }鼠标放在超链接上显示的样式。

 a:active {color: #000099;}-鼠标按下去是超链接显示样式。

 a {color: #000099;}标签选择器,链接的颜色。

 5、后代选择器(派生选择器)

 通过依据元素在其位置的上下文关系来定义样式,可以使标记更加简洁。

 #demo p {color:#ff0000; size:14px;} 

6、通用选择器通用选择器用*来表示。例如:

*{font-size: 12px;} 

7、并集选择器(群组选择器)

 当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔。

 比如:

p, td, li {

line-height

:20px; 

 color:#ff000}

css

标签:方式   速度   render   line   dem   data   port   imp   htm   

原文地址:http://www.cnblogs.com/chenslu/p/6986611.html

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