- 正文
- 点这评论:( 3578人参与)
-
1、css是什么?
CSS(Cascading Style Sheet)可译为“层叠样式表”或“级联样式表”,它定义如何显示 HTML元素,用于控制网页的外观。
2、为什么使用css,优点是什么?
1:【内容】和【表现】相分离
HTML文件中只存放文本信息,将设计部放在一个独立样式文件中。页面对搜索引擎更加友好。
2:提高页面浏览速度
采用CSS布局的页面容量要比TABLE布局的页面文件容量小得多,前者一般只有后者的1/2大小。
3:易于维护和改版
只要简单的修改对应CSS文件,就可以重新设计整个网站的页面。
4: 使用CSS布局更符合现在的W3C标准
W3C组织是对网络标准制定的一个非赢利组织,像HTML、CSS、XML的标准就是由它来定制。
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;}
在网页设计中使用css缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩写的主要规则如下:
一、颜色
16进制的色彩值,如果每两位的值相同,可以缩写一半,
例如:#000000可以缩写为#000;#336699可以缩写为#369;
二、盒尺寸
通常有下面四种书写方法:
property:value1; 表示所有边都是一个值value1;
property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2
property:value1 value2 value3; 表示top的值是value1,right和left的值是value2,bottom的值是value3
property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left
方便的记忆方法是顺时针:上、右、下、左。
具体应用在margin和padding的例子如下: 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: transparent,image: none,repeat: repeat,attachment: scroll,position: 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-size和font-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;}
2、CSS语法里不分大小写,但是元素在调用id和class是区分大小写的。
比如:#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无序列表里,让内容居左对齐。
设置ul的margin:0px;padding:0px
7、Div如何居中?
设置margin:0px auto;
来源:大师哥博客,欢迎分享本文,转载请保留出处!
-
阅读更多:网络营销知识
CSS学习知识点
2012年05月18日 22:15:19 分类: 营销知识
【相关文章】
- 2013-02-17外贸英文网站如何寻找友情链接?
- 2013-02-01如何更好的做友情链接?
- 2012-12-15网络书签的10个妙用
- 2012-12-15网络书签的个人知识管理方案
- 2012-12-15我的个人知识管理工具软件
- 2012-08-09失败的网络营销经历谨记六点
- 2012-07-18数据调研就用最新版火狐
- 2012-07-08详解开放目录和社交书签
- 2012-07-08链接养殖场是什么?
- 2012-07-01百度统计新发现