您的位置:首页 / 营销知识 / CSS学习知识点

CSS学习知识点

2012年05月18日 22:15:19   分类: 营销知识

1、css是什么?

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

2、为什么使用css,优点是什么?

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

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

2:提高页面浏览速度

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

3:易于维护和改版

只要简单的修改对应CSS文件就可以重新设计整个网站的页面。

4: 使用CSS布局更符合现在的W3C标准

W3C组织是对网络标准制定的一个非赢利组织,像HTMLCSSXML的标准就是由它来定制。

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

   1内嵌式CSS样式表放到<head>文档中: 

格式如下:<style type=“text/css”> …… </style> 

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

格式如下:<p style="font-size:14pt;color:blue">蓝色14号文字</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;} 表示所有的元素的字体大小都是12px

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

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

如:p, td, li {line-height:20px;  color:#ff0000;} 

7、常用CSS缩写语法

在网页设计中使用css缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩写的主要规则如下:   

一、颜色 

16进制的色彩值,如果每两位的值相同,可以缩写一半,

例如:#000000可以缩写为#000;#336699可以缩写为#369;   

二、盒尺寸

通常有下面四种书写方法:

property:value1; 表示所有边都是一个值value1;   

property:value1 value2; 表示topbottom的值是value1,rightleft的值是value2   

property:value1 value2 value3; 表示top的值是value1rightleft的值是value2bottom的值是value3   

property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left   

方便的记忆方法是顺时针:上、右、下、左。

具体应用在marginpadding的例子如下:   margin:1px  0  2px  5px;   

三、边框(border)   

边框的属性如下:

border-width:1px; -------------------------边框宽度 

border-style:solid; -------------------------边框样式(实线,虚线等)

border-color:#000; -------------------------边框颜色

可以缩写为一句:border:1px solid #000;属性值没有顺序。 )

语法是:border:width style color;

四、背景(Backgrounds) 

背景的属性如下:   

background-color:#f00; --------------------------------------背景颜色

background-image:url(background.gif); -------------------背景图片

background-repeat:no-repeat;---------------------------------背景图片是否重复

background-attachment:fixed;--------------------------------背景图片是否固定

background-position:0 0;--------------------------------------背景图片位置

可以缩写为一句:background:#f00 url(background.gif) no-repeat fixed 0 0;   

语法是:background:color image repeat attachment position;   

你可以省略其中一个或多个属性值,如果省略,该属性值将用浏览器默认值

默认值为:color: transparentimage: nonerepeat: repeatattachment: scrollposition: 0% 0%   

五、字体(fonts)   

字体的属性如下:

font-style:italic;------------------------------------字体风格(斜体,正常体等)

font-variant:small-caps;--------------------------字体的小型大写字母的字体显示

font-weight:bold;----------------------------------字体的粗细

font-size:1em;-------------------------------------字体的大小

line-height:140%;---------------------------------字体的行距

font-family:"Lucida Grande",sans-serif; ------------字体系列(宋体,楷体等) 

可以缩写为一句:font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;   

注意,如果你缩写字体定义,至少要定义font-sizefont-family两个值。   

六、列表(lists) 

list的属性如下:

list-style-type:square; 

list-style-position:inside;  

list-style-image:url(image.gif);   

可以缩写为一句:list-style:square inside url(image.gif);

取消默认的圆点和序号可以这样写list-style:none;,  

 

CSS注意事项:

 

1、如果属性值是若干单词,则要给值加上引号;

比如:p{font-family:Georgia,"sans serif",Palatino;}

2CSS语法里不分大小写,但是元素在调用idclass是区分大小写的

比如:#divid{color:#FFFF00; size:20px;},调用时应写成id="divid",不能写id="DIVID"class也一样。

3、养成写完每个属性值后加上“;”号的好习惯。

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

4、ID选择器只能在html文档中出现一次。

在现代布局中,id选择器常常用于建立派生选择器。

5、在一个div里,如何让内容垂直居中?

方式是设置line-height属性,属性值为div的高度。

6、ul无序列表里,让内容居左对齐。

设置ulmargin:0px;padding:0px

7、Div如何居中?

设置margin:0px auto;

打赏

来源:,欢迎分享本文,转载请保留出处!

  • 评论:(0)
  • 赞助本站

已有 0 位网友发表了一针见血的评论,你还等什么?

必填

选填

选填

必填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

博客赞助
大师哥博客