注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

火力光波的博客

火一般的热情 光一样的速度

 
 
 

日志

 
 

曹鹏CSS教程内容摘要  

2010-03-11 00:48:06|  分类: CSS代码 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

曹鹏CSS视频教程内容摘要

CSS(Cascading Style Sheet)译为层叠样式表,是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

一、添加样式表的方法
① 行内式
<Tag style="properties">网页内容</tag>
如,< p style="color: blue; font-size:10pt">CSS实例< /p>
直接添加在HTML的(tag)行内里,这种方法不怎么常用。
②嵌入式
<head>
<style type="text/css">

<!--
CSS规则
-->
</style>
</head>
绿色为风格标签,在<head></head>之间
CSS规则在开始、结束的风格标签之间
"text/css"表示是定义样式表单的。

③链接式
<head>
<link href="*.css"rel="stylesheet"media="screen">
</head>
link是链接标识。
href英语全称是hypertext reference 表达一种超链接地址。
*.css是单独保存的样式表文件,其中不能包含<style>标识符,并且只能以css为后缀。
rel属性表示样式表将以何种方式与HTML文档结合。取值范围:
·Stylesheet:指定一个外部的样式表
·Alternate stylesheet:指定使用一个交互样式表
media是可选的属性,表示使用样式表的网页将用什么媒体输出。取值范围:
·Screen(默认):输出到电脑屏幕
·Print:输出到打印机
·TV:输出到电视机
·Projection:输出到投影仪
·Aural:输出到扬声器
·Braille:输出到凸字触觉感知设备
·Tty:输出到电传打字机
·All:输出到以上所有设备
链接层叠样式表不单是可以链接一个层叠样式表,还可以链接多个层叠样式表。
这种方法比较常用,把CSS规则隔离出来另存为一个CSS文档,然后在HTML里面经过链接把CSS和HTML链接在一起。

④引入式
<head>
<style type="text/css">
@import url(*.css);
</style>
</head>
*.css是单独保存的样式表文件,其中不能包含<style>标识符,并且只能以css为后缀。
以@import开头的引入式表输入方法和链接样式表的方法很相似,但引入式表输入方式更有优势。因为引入式可以在链接外部样式表的同时,针对该网页的具体情况,做出别的网页不需要的样式规则。

 

 二、样式表规则的格式
样式规则中的一个完整的声明,由选择器、属性和值三部分构成。

选择符.类别名 {属性:值;}
集体声明:h1,h2,h3,h4,h5,p{属性:值;}     //用逗号将每个选择符分开。
嵌套声明:p b{ 属性:值;}                //b包括的内容同时包括在选择符p里 。                          
多个声明:选择符{属性1:值1; 属性2:值2; 属性3:值3; }//用分号将声明分开。
值为若干单词:p {font-family: "sans serif";} //则要给值加引号。

 

三、层叠样式表的分类
选择符.类别名 {属性:值}
类别名将在HTML的标识符里引用:
< 标识符 class=类别名>网页内容
①类别选择符
.bold{color:red;}
加上这个 HTML:
<h1>这是锻炼题</h1>
<p class="bold">这是类别选择符1</p>
<p>这是类别选择符2</p>
<p class="bold">这是类别选择符3</p>
其中:
p是段落
中间的那个点选择符的标识
bold是一个自定义的类别名
bold用在一个类别上
②id选择符
h1#red {color:red;}
p.blue {color:blue;}
加上这个 HTML:
<h1 id="red">ID选择符 演示</h1>
<p class="blue">这是第一个段落.</p>
<p class="blue">这是第二个段落.</p>
<p>这是第三个段落.</p>
red只能用在一个元素上,不能同时采用两个id标记。

③群选择符(标记选择器)
同时为多个选择符应用同一套规则:
p, h1{text-align: left;}
每个选择符之间用逗号隔开.
甚至你还可以在群选择符中参杂ID类别等:
p.navigation, h1#title {font-weight: bold;}

 

四、CSS代码标签属性

颜色属性:(color)
color:颜色值;red (颜色名)、#ff0000 (16位进制)、rgb(255,0,0) (数值)、rgb(100%,0,0)(百分比)、inherit 继承父颜色值
常用颜色名: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.
段落背景色:p {color:颜色值;}
网页背景色:body{background-color:颜色值;}

背景属性: (background)
背景色 background-color:背景色值;  red (颜色名)、 #ff0000 (16位进制) 、 rgb(255,0,0) (RGB数值)
背景图 background-image:url(背景图地址);  none 无背景图片、inherit 继承父图片值
重复 background-repeat:重复值;repeat 重复背景、repeat-x 仅平行重复、repeat-y 仅垂直重复、no-repeat 不重复
滚动 background-attachment:滚动值; fixed固定、scroll滚动、inherit 继承父附着值
位置 background-position:位置值;top、center、bottom、left、center、right、<x> <y> 用具体数值或百分比
(默认重复、滚动、左上)
段落背景图:p{background-image:url("背景图地址");}
网页背景图:body{background-image:url("背景图地址");}
简写方法: background:#000 url() repeat fixed right  top;

字体属性:(font)
字体 font-family:字体名;Courier New、Courier、monospace、Times New Roman、Times、serif、 Arial、Helvetica、sans-serif、 Verdana
斜体 font-style:是否斜体值;oblique偏斜体、italic 斜体、normal 正常
粗细 font-weight:粗细值;normal 正常(默认)、bold 粗、bolder 更粗、lighter 细、100-900数值
大小 font-size:大小值;绝对值: xx-small、x-small、small、medium、large、x-large、xx-large、数值px、数值pt;相对值:smaller、normal、larger
、50%
行距 line-height:行距值;数值px、数值em
小写变大写 font-variant:小写变大写值;normal 首字变大写、small-caps小型大写字母
段落字体:p {font-family:字体名;}
网页字体:body {font-family: Verdana }
可指定多种字体:body {font-family: Arial, Verdana, sans-serif}

文本属性:(text)
缩进text-indent:缩进值;数值px 、 百分比、可为负数。前面是首行缩进,整个段落缩进面是:p {text-indent:缩进值;padding-left:缩进值;}
对齐 text-align:对齐值;left 左(默认)、 right 右、 center 中、 justify 两端对齐
上下划线 text-decoration:划线值;  none 无划线、underline下划线、overline 上划线、line-through 删除线
大小写转换 text-transform:大小写转换值;none 不变、capitalize 首字母大写、uppercase 全变大写、lowercase 全变小写

边框属性: (borde)
边框宽度 border-width:边框宽度值;thin、medium默认、thick,数值px、数值em
border-top-width:上边框宽度值;同上
border-right-width:右边框宽度值; 同上
border-bottom-width:下边框宽度值; 同上
border-left-width: 左边框宽度值;同上
边框颜色 border-color:边框颜色值;如,p{: #ff0000 #009900 #0000ff #55cc00} 依次为:上、右、底边和左边框(自上开始顺时针)。
边框样式 border-style:边框样式值;none 看不见不占空间、hidden看不见占空间、dotted点线、dashed虚线、solid实线、double双线、 groove
凹槽、ridge脊状、inset凹陷、outset凸起
边框属性简写:border:宽度值 样式名 颜色值;如,img.thumb{border:blue 10px double;}

外边距属性: (margin)
margin:外边距值;数值px,0px 默认值、两个垂直方向的外边距重合
margin-top: 上外边距值;同上
margin-right:右外边距值;同上
margin-bottom:下外边距值;同上
margin-left:左外边距值;同上
图片外边距 img{margin:数值px;}
网页外边距 body{margin:数值px;}
外边距属性简写: margin:1px 2px 3px 4px 为上右下左外边距

内边距属性: (padding)
padding:内边距值;数值px
padding-top: 上内边距值;同上
padding-right:  右内边距 值;同上
padding-bottom:下内边距值;同上
padding-left:  左内边距值;同上
图片内边距 img#padding{padding:20px;}
内边距属性简写: padding:1px 2px 3px 4px 为上右下左内边距

链接属性:
a:link {...} 设置未访问链接
a:visited {...} 设置访问过链接
a:active {...} 鼠标点击与释放之间时
a:hover {...} 鼠标悬停时
如,设置访问过链接为红色,背景是黑色,鼠标悬停时是白色:
a:visited {color:red;
background-color:black;}
a:hover {background-color:white;}

 

五、CSS冲突及相关

在CSS冲突中采用的规则:
原则:哪个规则更具体就采用哪个规则。
优先:嵌入到标签里的规则>id>类别>最具体的元素>其它元素>(离内容最近的规则)排序>其它排序>html样式
诊断规则是否冲突的重要声明:
!important   粘贴到规则的后面,如效果有变化说明有冲突。
设计媒体风格的方法:在层叠样式表中修改,在网页源代码中修改。
推荐一个开发工具:Web Developer  或  IE Web Developer v2.4.1.112  简体中文
推荐一个CSS网站:http://www.w3.org/TR/CSS21/ 

 

曹鹏CSS教程学习笔记      

 

曹鹏CSS教程内容摘要 - 火力光波 - 火力光波的博客

  评论这张
 
阅读(1055)| 评论(7)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017