当前位置 : 编程 / 盗雪css视频教程_2013年

盗雪css视频教程_2013年

视频免费下载:

视频网盘链接: http://pan.baidu.com/s/1NZLyY 密码:4n7i(若无法下载可以邮件联系admin@dao-xue.com,会邮件发送视频)

课程大纲(更新中...)

01_Introduction 什么是CSS?
层叠样式表:英文缩写Cascading Style Sheet

html和css (盗雪html入门基础视频教程)

02_Beginning 课前准备
学习这套视频需要的基础——盗雪html基础视频教程
如何使用这套视频教程?
视频教程目录结构
包含资源:视频教程、电子书、课程大纲、推荐书籍、QQ群
相关网站、博客、QQ群
工具准备(windows、mac等操作系统)
文本编辑器的选择(自行搜索“好用的css编辑器”):Notepad++
浏览器的选择(Chrome、Firefox、Safari、IE):Chrome
调试工具的选择 Firebug、Web Developer Toolbar:Chrome >> 右键 >> 审查元素
03_HowToLearn 怎样学习?
使用视频的注意事项
动手是王道!!
一看视频,二做笔记,三做练习+定期阶段性复习
遇到问题如何解决?
Google(GoAgent)、百度
微博
知乎
站内搜索(专业论坛)
国外资源(http://stackoverflow.com/)
QQ群
04_BasicsCss的基本语法
基本格式:添加第一个css规则,一些术语、概念讲解:声明、选择器、属性、属性值
css的四种添加方式:
内链样式表(行内样式):

一个普通段落
内部样式表(嵌入式):head标签里面添加style标签
外部样式表(链接式):
引入样式:

 

05_Selectors 选择器(1)
标签选择器: tag_selector
id选择器: #id_selector
class选择器: .class_selector

06_Selectors 选择器(2)
组选择器: tag_selector, #id_selector, #id_selector
派生选择器: tag_selector a
子类选择器: tag_selector > a

07_Selectors 选择器(3)
tag_selector#id_selector
tag_selector.class_selector

08_Selectors 属性选择器(4)
tag_selector[name='特定']
tag_selector[name^='开头']
tag_selector[name$='结尾']
tag_selector[name*='包含']
09_PseudoClasses 伪类选择器(1)
未访问:a:link
悬浮: a:hover
激活: a:active
已访问:a:visited
聚焦: input:focus
注意伪类选择器的顺序:link>hover>focus>active>visited

10_PseudoClasses 伪类选择器(2)
第 (n) 个:selector:nth-child(2)
第(奇数)个:selector:nth-child(odd)
第(偶数)个:selector:nth-child(even)

11_WidthsAndHeights 宽高设置
块级元素设置宽高:
width:300px;
height:300px;
非块级元素设置宽高,必须先设置:display:block;
最大、最小 宽高设置:
max-width:700px;
min-widht:200px;
max-height:900px;
min-height:300px;
题外话:溢出的控制?
自动:overflow:auto;
滚动:overflow:scroll;
隐藏:overflow:hidden;
水平方向滚动条设置:overflow-x
垂直方向滚动条设置:overflow-y
12_Position 定位

相对定位:position:relative;
绝对定位:position:absolute;
固定定位:position:fixed;
13_BoxModel 盒子模型

内容:content
内边距:padding
边框:border
外边距:margin
14_CenteringContainer 元素居中

精确计算:
设置padding
设置margin
使用margin的auto值
如何使文字居中? text-align: center;
15_Color 颜色设置

颜色名: blue、red
十六进制:#d0a300 #000 #fff #aaa #999
rgb: rgb(120, 255, 0)
rgba: rgba(0, 239, 12, 0.8)
题外话:alpha通道的透明度 和 元素的透明度 opacity:0.6

16_DisplayProperty Display属性设置

display: block;
display: inline;
display: inline-block;

17_Hiding_an_Element 在网页上隐藏某个元素

display:none 使元素彻底隐藏,隐藏后不占用原空间(看不见也摸不着)
visibility:hidden使对象不可见,隐藏后仍占用原空间(看不见但摸得着)
18_FontBasics 字体设置

用什么字体? font-family:Microsoft YaHei, KaiTi; (中文字体自行谷歌搜索“css font-family 中文”)
字体多大? font-size:1.2em;
字体粗细? font-weight: bolder;

标签: css, web前端

已有 7 条评论

  1. 谢谢啦! 谢谢啦!

    可以把视屏传到睿思上吗?你懂的。

    1. 还没更新完,这个不太合适吧。。更新完后会放睿思的。 明天你就有流量了

      1. (*^__^*) (*^__^*)

        我已经从百度网盘中下载了。好吧,我是你的粉丝。

  2. 这是css3吗?

  3. 链接已经失效,烦请博主重发。谢谢!

  4. hahah hahah

    失效了,请博主再发一个吧,谢谢了。

    1. 链接: http://pan.baidu.com/s/1pKg6jLh 密码: gxq8

添加新评论