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

火力光波的博客

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

 
 
 

日志

 
 

曹鹏CSS教程学习笔记⑴  

2010-03-12 18:42:28|  分类: CSS代码 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

曹鹏CSS视频教程学习笔记⑴

(点击绿色文字可打开视频连接)

CSS教程目录 :http://www.caopeng.org/bbs/thread-11402-1-1.html
曹鹏编程之邦 :http://www.caopeng.org/html/css.htm
演示文档下载 :http://www.caopeng.org/t/css/cssfiles.rar
下载的文件夹 :cssfiles 包含下面5个文件夹
① CSS/images;index.html、main.css、menu.js
② CSS2/1、2、3、4、5、6、7、8、9、10; _folderinfo.txt
③ Conflicts/1、2、3;
④ CSS2_ex/images;CSS2_CSS.html、CSS2_CSS_link.html、CSS2_NO_CSS.html、style.css
⑤ Conflicts_ex/1、2、3;

第一章课前须知

1、样式表特点
规则:嵌入文件可以任意挪用调用。
简单易学。
样式表的效果灵活丰富,比HTML要强大得多。
2、课前准备
编辑器:可用写字板,也可用UEDIT32,还可用dreamweaver。
浏览器:不能用比较旧的版本,可以用IE,firefox。
下载演示文档存到电脑上。
3、HTML&CSS
控制HTML文档网页
<html>
<head>
<title>Html结构</title>
</head>
<body>
<h1>段落</h1>
<p>这是第个<em>段落</em></p>
</body>
</html>
4、CSS规则解析
<html>
<head>
<title>CSS ANATOMY</title>                                                                                                                                     
<style type="text/css">
p{color:red}
</style>
</head>
<body>
<p>这是个<em>段落</em>.</p>
</body>
</html>
解剖:
<style type="text/css"></style>是CSS格式。
p{color:red}是CSS规则。
p英语叫做selector,用来选择的,是选择符。
color英语叫做PageRankoperty属性。
red是value值。
Declaration block是灰色背景,一个申明的模块。
5、写1stCSS规则
在head区域内:
<style type="text/css">
<!--
加入CSS规则
-->
</style>
草黄色为风格标签,在开始、结束风格标签之间加入CSS规则。
CSS规则由选择符与花括号组成。花括号中可写一个或多个申明,申明之间加分号。
6、嵌入式
把CSS规则嵌入到了HTML文档里的风格标签中。
<style type="text/css">
<!--
嵌入CSS规则
-->
</style>
这种方法比较适合规则比较少,而且网页比较少的情况。
7、链接式
<link href="*.css"rel="stylesheet"media="screen">
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链接在一起。
8、引入式
<style type="text/css">
@import url(*.css);
</style>

第二章常用选择和属性

类别选择符 1  2
p.bold{color:red;}
加上这个 HTML:
<h1>这是锻炼题</h1>
<p class="bold">这是类别选择符1</p>
<p>这是类别选择符2</p>
<p class="bold">这是类别选择符3</p>
解读:
p是段落
中间的那个点选择符的标识
bold是一个自定义的类别名
bold用在一个类别上

id选择符 1  2
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只能用在一个元素上

群选择符   2 

同时为多个选择符应用同一套规则:
p, h1, h2 {text-align: left;}
每个选择符之间用逗号隔开.
甚至你还可以在群选择符中参杂ID类别等:
p.navigation, h1#title {font-weight: bold;}
实例:
<html>
<head>
<title>群选择符 演示</title>
<style type="text/css">
<!--
p, h1,{text-align: left;}
p#red {color:red;}
p.blue {color:blue;}
-->
</style>
</head>
<body>
<h1>群选择符 演示</h1>
<p id="red">这是第一个段落.</p>
<p class="blue">这是第二个段落.</p>
<p>这是第三个段落.</p>
</body>
</html>

颜色 1  2  背景色 
段落背景色:p {color:值;}
网页背景色:body{background-color:值;}

颜色值5种定义的方法:
① color: <color keyword> 颜色名称
② color: #rrGooglebb HTML的16位进制
③ color: rgb(rrr,Googleg,bbb) RGB三种颜色的数值(0-255)
④ color: rgb(rrr%,Googleg%,bbb%) RGB三种颜色的百分比
⑤ color: inherit 继承父颜色值
可写颜色的名称:
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

布局 布局
Margin(外边距)  Border(边框)  Padding(内边距)  Content(内容)

边框 1   2
边框宽度:border-width:值;
边框宽度属性
border-width: thin medium  thick关键字
border-width: medium 默认边框宽度
border-width: thick
border-width: <length> 用具体数值来指定
border-top-width: <length> 设置上边框
border-right-width: <length> 设置右边框
border-bottom-width: <length> 设置下边框
border-left-width: <length> 设置左边框
如:在CSS中,你可以用关键字来指定边框宽度
border-width: thin   border-width: medium    border-width: thick
你也可以用具体的数值来指定
border-width:10px   border-width: 2em

边框颜色:border-color:值;
边框颜色值的指定方法和颜色属性值相同
如:
border-color: color name red 关键字设定边框颜色
border-color: hex value #ffffff 指定边框颜色
border-color: rgb() value rgb(10%, 80%, 0) 指定边框颜色

边框风格:border-style:风格名;
边框风格属性
border-style: none 看不见不占空间
border-style: hidden 看不见占空间
border-style: dotted
border-style: dashed
border-style: solid
border-style: double
border-style: groove
border-style: ridge
border-style: inset
border-style: outset

边框属性简写:border:宽度值 风格名 颜色值;
如,img.thumb{border:blue 10px double;}

外边距 外边距
外边距是指两个元素边框间的距离
margin:数值px;  0px 为默认值,两个垂直方向的外边距重合
外边距属性
margin-top: <length> 上外边距
margin-right: <length> 右外边距
margin-bottom: <length> 下外边距
margin-left: <length> 左外边距
margin: <top> <right> <bottom> <left> 设置每个外边距
如,图片外边距 img{margin:数值px;}
网页外边距 body{margin:数值px;}

内边距  内边距
内边距用来控制边框与内容之间的空间大小.
padding:数值px ;
内边距属性
padding-top: <length> 上内边距
padding-right: <length> 右内边距
padding-bottom: <length> 下内边距
padding-left: <length> 左内边距
padding: <top> <right> <bottom> <left> 设置每个内边距
如,padding: 30px padding: 0px padding: 15px Property Value Notes
图片内边距 img#padding{padding:20px;}

背景 背景图1  背景图2   重复1   重复2   附着  定位
段落背景图:p{background-image:url("背景图地址");}
网页背景图:body{background-image:url("背景图地址");}

背景图属性(默认重复、滚动、左上)
background-image: url("背景图地址")
background-image: none 无背景图片
background-image: inherit 继承父图片值
background-repeat: repeat 重复背景
background-repeat: repeat-x 仅平行重复
background-repeat: repeat-y 仅垂直重复
background-repeat: no-repeat 不重复
background-repeat: inherit 继承父重复值
background-attachment: scroll 背景随着滚动
background-attachment: fixed 背景固定
background-attachment: inherit 继承父附着值
background-position: <x> <y> 用具体数值或百分比指定
background-position: top、center、bottom、left、center、right
如,
body{background-color:blue;padding:5px;border:solid medium #ffffff;
background-image:url("
http://www.caopeng.org/images/009.jpg");
background-repeat:  no-repeat;
background-attachment: fixed;
background-position: bottom right;}

字体 属性 风格 粗细 大小 变量 行间距
字体:p {font-family:字体名;}
上面是段落字体,下面是网页字体。
body {font-family: Verdana }
字体属性规则可指定多种字体
body {font-family: Arial, Verdana, sans-serif}
斜体:p {font-style:值;}
斜体值:
oblique 偏斜体  italic 斜体   normal 不是斜体
加粗:p {font-weight:值;}
加粗值:
normal 一般(默认)  bold 粗  bolder 较粗  lighter 细体
font-weight: <100-900>
大小:p {font-size:值;}
绝对值: 点素pt  相素px  medium
相对值: 相对于规则
smaller normal  larger 50%
小写变大写:p {font-variant:值;}
小写变大写值:normal 首字变大写;
small-caps 全部变大写,但原大写的变得更大一些。
行间距:p {line-height:值;}
行间距值:normal;(正常)
 单位:PX、PD、EM

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

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

曹鹏CSS教程学习笔记          内容摘要

 

  评论这张
 
阅读(1824)| 评论(9)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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