盗雪css视频教程 2013年出品的 算是最新的CSS教程吧,大概看了一下 讲的不错,分享给你们。
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视频教程
下载地址:
解压密码为本站域名 www.365exe.com
|