1 CSS 概念 OA 现金盘源码下载 Q1446595067 论坛: haozbbs.com
CSS 指层叠样式表 (Cascading StyleSheets)(级联样式表)
Css 是用来美化 html 标签的, 相当于页面化妆.
样式表书写位置
2 选择器
2.1 写法
选择器是一个选择谁 (标签) 的过程.
选择器{属性: 值; 属性: 值;}
属性
解释
Width:20px;
宽
Height:20px;
高
Background-color:red;
背景颜色
font-size:24px;
文字大小
text-align:left | center| right
内容的水平对齐方式
text-indent:2em;
首行缩进
Color:red;
文字颜色
3 选择器
3.1 基础选择器
标签选择器
标签{属性: 值;}
特点: 标签选择器定义之后, 会将页面所有的元素都执行这个标签样式.
颜色的显示方式
直接写颜色的名称
十六进制显示颜色
- 0-9 a-f
- #000000; 前 2 为代表红色, 中间 2 位代表绿色, 后边 2 位代表蓝色.
- rgb
- rgba
A 代表 alpha 不透明度 值 0-1
类选择器(重点)
写法
. 自定义类名{属性: 值; 属性: 值;}
特点: 谁调用, 谁生效.
一个标签可以调用多个类选择器.
如:<div class="boxlsq">
Class 里面空格隔开, 而不是用两次 class=
多个标签可以调用同一个类选择器.
类选择器命名规则
不能用纯数字或者数字开头来定义类名
不能使用特殊符号或者特殊符号开头 (_) 来定义类名
不建议使用汉字来定义类名
不推荐使用属性或者属性的值来定义类名
ID 选择器
写法
# 自定义名称{属性: 值;}
特点: 一个 ID 选择器在一个页面只能调用一次. 如果使用 2 次或者 2 次以上, 不符合 w3c 规范, JS 调用会出问题.
一个标签只能调用一个 ID 选择器.
一个标签可以同时调用类选择器和 ID 选择器.
通配符选择器
*{属性: 值;}
特点: 给所有的标签都使用相同的样式.
不推荐使用, 增加浏览器和服务器负担.
3.2 复合选择器
概念: 两个或者两个以上的基础选择器通过不同的方式连接在一起.
交集选择器
标签 + 类 (ID) 选择器{属性: 值;}
特点: 即要满足使用了某个标签, 还要满足使用了类 (id) 选择器.
后代选择器(重点)
选择器 + 空格 + 选择器{属性: 值;}
后代选择器首选要满足包含 (嵌套) 关系.
父集元素在前边, 子集元素在后边.
特点: 无限制隔代.
只要能代表标签, 标签, 类选择器, ID 选择器自由组合.
子代选择器
选择器>选择器{属性: 值;}
选中直接下一代元素.
并集选择器
选择器 +,+ 选择器 +, 选择器{属性: 值;}
4 文本元素
4.1 属性
font-size:16px; 文字大小
Font-weight: 700 ; 值从 100-900, 文字粗细, 不推荐使用 font-weight:bold;
Font-family: 微软雅黑; 文本的字体
Font-style: normal | italic; normal 默认值 italic 斜体
line-height: 行高
4.2 文本属性连写
font: font-stylefont-weight font-size/line-height font-family;
: 注意: font: 后边写属性的值. 一定按照书写顺序.
文本属性连写文字大小和字体为必写项.
Font:italic 70016px/40px 微软雅黑;
4.3 文字的表达方式
直接写中文名称.
写字体的英文名称.
unicode 编码
第一步: f12
第二步: 找到 console
第三步: 输入 escape("宋体") 注意英文的括号和双引号.
5 样式表书写位置
内嵌式写法
- <head>
- <style type="text/css">
样式表写法
</style>
</head>
外链式写法
写在 head 里,<link rel="stylesheet" href="1.css">
行内样式表
三种写法特点:
内嵌式写法, 样式只作用于当前文件, 没有真正实现结构表现分离.
外链式写法, 作用范围是当前站点, 谁调用谁生效, 范围广, 真正实现结构表现分离.
行内样式表, 作用范围仅限于当前标签, 范围小, 结构表现混在一起. (不推荐使用)
6 标签分类(显示方式)
6.1 块元素
典型代表, Div,h1-h6,p,ul,li
特点: 独占一行
可以设置宽高
嵌套 (包含) 下, 子块元素宽度 (没有定义情况下) 和父块元素宽度默认一致.
6.2 行内元素
典型代表 span ,a, ,strong , em, del, ins
特点:在一行上显示
不能直接设置宽高
元素的宽和高就是内容撑开的宽高.
6.3 行内块元素(内联元素)
典型代表 input img
特点:在一行上显示
可以设置宽高
6.4 块元素, 行内元素
块元素转行内元素
display:inline;
行内元素转块元素
display:block;
块和行内元素转行内块元素
display:inline-block;
7 css 三大特性
7.1 层叠性
当多个样式作用于同一个 (同一类) 标签时, 样式发生了冲突, 总是执行后边的代码(后边代码层叠前边的代码). 和标签调用选择器的顺序没有关系.
7.2 继承性
继承性发生的前提是包含(嵌套关系)
文字颜色可以继承
文字大小可以继承
字体可以继续
字体粗细可以继承
文字风格可以继承
行高可以继承
总结: 文字的所有属性都可以继承.
特殊情况:
h 系列不能继承文字大小.
a 标签不能继承文字颜色.
7.3 优先级
默认样式<标签选择器<类选择器 < id 选择器<行内样式<!important
0 1 10 100 1000 1000 以上
优先级特点
继承的权重为 0
权重会叠加
8 链接伪类
a:link{属性: 值;} a{属性: 值}效果是一样的.
a:link{属性: 值;} 链接默认状态
a:visited{属性: 值;} 链接访问之后的状态
a:hover{属性: 值;} 鼠标放到链接上显示的状态 a:active{属性: 值;} 链接激活的状态
:focus{属性: 值;} 获取焦点
8.1 文本修饰
text-decoration: none | underline 下划线 | line-through 删除线
9 背景属性
9.1 background-color 背景颜色
9.2 background-image 背景图片
9.3 Background-repeat repeat(默认) | no-repeat | repeat-x | repeat-y 背景平铺
9.4 Background-position left | right | center | top | bottom 背景定位
方位值只写一个的时候, 另外一个值默认居中.
写 2 个方位值的时候, 顺序没有要求.
写 2 个具体值的时候, 第一个值代表水平方向, 第二个值代表垂直方向.
9.5 Background-attachment 背景是否滚动 scroll | fixed
9.6 背景属性连写
: 连写的时候没有顺序要求, url 为必写项.
10 行高
浏览器默认文字大小
浏览器默认文字大小: 16px
行高: 是基线与基线之间的距离
行高 = 文字高度 + 上下边距
一行文字行高和父元素高度一致的时候, 垂直居中显示.
10.1 行高的单位
行高单位
文字大小
值
- 20px
- 20px
- 20px
- 2em
- 20px
- 40px
- 150%
- 20px
- 30px
- 2
- 20px
- 40px
总结: 单位除了像素以外, 行高都是与文字大小乘积.
行高单位
父元素文字大小
子元素文字大小
行高
- 40px
- 20px
- 30px
- 40px
- 2em
- 20px
- 30px
- 40px
- 150%
- 20px
- 30px
- 30px
- 2
- 20px
- 30px
- 60px
总结: 不带单位时, 行高是和子元素文字大小相乘, em 和 % 的行高是和父元素文字大小相乘. 行高以像素为单位, 就是定义的行高值.
推荐行高使用像素为单位.
11 盒子模型
11.1 边框 border
Border-top-style: solid 实线
dotted 点线
dashed 虚线
Border-top-color 边框颜色
Border-top-width 边框粗细
边框属性的连写
特点: 没有顺序要求, 线型为必写项.
四个边框值相同的写法
特点: 没有顺序要求, 线型为必写项.
11.2 边框合并 border-collapse:collapse; 如在做细线表格就可一键搞定.
11.3 获取焦点
label for id 获取光标焦点
11.4 内边距
Padding-left | right | top | bottom
padding 连写
Padding: 20px; 上右下左内边距都是 20px
Padding: 20px 30px; 上下 20px 左右 30px
Padding: 20px 30px 40px; 上内边距为 20px 左右内边距为 30px 下内边距为 40
Padding: 20px 30px 40px 50px; 上 20px 右 30px 下 40px 左 50px
内边距撑大盒子的问题
影响盒子宽度的因素
内边距影响盒子的宽度
边框影响盒子的宽度
盒子的宽度 = 定义的宽度 + 边框宽度 + 左右内边距
继承的盒子一般不会被撑大
包含 (嵌套) 的盒子, 如果子盒子没有定义宽度, 给子盒子设置左右内边距, 一般不会撑大盒子.
11.5 外边距
margin-left | right | top | bottom
外边距连写
Margin: 20px; 上下左右外边距 20PX
Margin: 20px30px; 上下 20px 左右 30px
Margin: 20px 30px 40px; 上 20px 左右 30px 下 40px
Margin: 20px 30px 40px 50px; 上 20px 右 30px 下 40px 左 50px
垂直方向外边距合并
两个盒子垂直一个设置上外边距, 一个设置下外边距, 取的设置较大的值.
嵌套的盒子外边距塌陷
解决方法: 1 给父盒子设置边框
2 给父盒子 overflow:hidden; bfc 格式化上下文
http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html
行内元素可以定义左右的内外边距, 上下会被忽略掉.
行内块可以定义内外边距.
12 Fireworks 的基本使用
新建文件 ctrl+n
打开文件 ctrl+o
调出和隐藏标尺 ctrl+r
显示辅助线: 从标尺里面往外拉, 就会显示辅助线了. 拖回去就会消失
清除辅助线: 视图 --- 辅助线 ---- 清除辅助线
放大镜 z 放大镜状态下 alt + 鼠标左键 缩小
抓手 快捷键 空格
测量距离 先拉出 2 根辅助线
切换到指针工具
将光标放到 2 根辅助线之间, 按住 shift 键
取颜色:
点开左下取色工具, 移动鼠标位置, 即取出移动到的位置的颜色, 有十六进制和 RGB 颜色
13 文档流(标准流)
元素自上而下, 自左而右, 块元素独占一行, 行内元素在一行上显示, 碰到父集元素的边框换行.
14 浮动布局
float: left | right
特点:
元素浮动之后不占据原来的位置(脱标), 下一个会占据这个元素的位置(位于下方)
浮动的盒子在一行上显示
行内元素浮动之后转换为行内块元素.(不推荐使用, 转行内元素最好使用 display:inline-block;)
14.1 浮动的作用
文本绕图(本来就是为了解决这个问题, 故文字不会跑到图片下面, 所以才能实现文本绕图.)
制作导航
网页布局
15 清除浮动
(使用目的: 既不给父盒子设置高度(因为有的高度不清楚), 又要使下面的盒子不会被上面父盒子中浮动的盒子覆盖.)
当父盒子没有定义高度, 嵌套的盒子浮动之后, 下边的元素发生位置错误.
清除浮动不是不用浮动, 清除浮动产生的不利影响.
清除浮动的方法
clear: left | right | both
工作里用的最多的是 clear:both;
额外标签法
在最后一个浮动元素后添加标签 < div style="clear:both"></div>
给父集元素使用 overflow:hidden; bfc
如果有内容出了盒子, 不能使用这个方法.
伪元素清除浮动 推荐使用
16CSS 初始化(设默认值)
为了考虑浏览器的兼容问题, 不同浏览器对有些标签的默认值是不同的, 如果没对 CSS 初始化, 往往会出现浏览器之间的页面差异. 所以, 编写网页的第一步应该是先初始化, 使不同浏览器呈现的页面效果是一样的.
腾讯:
- body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}
- body{font:12px"宋体","ArialNarrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;}
- a{color:#2d374b;text-decoration:none}
- a:hover{color:#cd0200;text-decoration:underline}
- em{font-style:normal}
- li{list-style:none}
- img{border:0;vertical-align:middle}
- table{border-collapse:collapse;border-spacing:0}
- p{word-wrap:break-word}
新浪:
- body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;}
- body{background:#fff;color:#333;font-size:12px;margin-top:5px;font-family:"SimSun","宋体","ArialNarrow";}
- ul,ol{list-style-type:none;}
- select,input,img,select{vertical-align:middle;}
- a{text-decoration:none;}
- a:link{color:#009;}
- a:visited{color:#800080;}
- a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}
淘宝:
body, h1, h2, h3, h4, h5,h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend,button, input, textarea, th, td { margin:0; padding:0; }
- body, button, input, select,textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
- h1, h2, h3, h4, h5, h6{ font-size:100%;}
- address, cite, dfn, em, var{ font-style:normal; }
- code, kbd, pre, samp {font-family:couriernew, courier, monospace; }
- small{ font-size:12px; }
- ul, ol { list-style:none; }
- a { text-decoration:none; }
- a:hover {text-decoration:underline; }
- sup {vertical-align:text-top; }
- sub{vertical-align:text-bottom; }
- legend { color:#000; }
- fieldset, img { border:0; }
- button, input, select,textarea { font-size:100%; }
- table {border-collapse:collapse; border-spacing:0; }
17 Overflow 溢出
18 定位
定位方向: left | right | top | bottom
position:static; 静态定位. 默认值, 就是文档流.
绝对定位
- Position:absolute;
- Left/right/top/bottom:30px;
特点:
元素使用绝对定位之后不占据原来的位置(脱标)
元素使用绝对定位, 位置是从浏览器出发.
嵌套的盒子, 父盒子没有使用定位, 子盒子绝对定位, 子盒子位置是从浏览器出发.
嵌套的盒子, 父盒子使用定位, 子盒子绝对定位, 子盒子位置是从父元素位置出发.
给行内元素使用绝对定位之后, 转换为行内块.(不推荐使用, 推荐使用 display:inline-block;)
调整元素的层叠顺序: 属性
z-index:2; 后面的值越大, 越在上面. 可设置 0:999. 用于元素被覆盖时使用
相对定位
Position: relative;
特点:
使用相对定位, 位置从自身出发(left:20px 表示据原来的定位左边差 20, 即往右走 20px.).
还占据原来的位置.
子绝父相 (父元素相对定位, 子元素绝对定位) 工作中用的最多
可以保证父元素不脱标.
行内元素使用相对定位不能转行内块
固定定位(不随浏览器滚动而消失, 如导航栏)
Position:fixed;
特点:
固定定位之后, 不占据原来的位置(脱标)
元素使用固定定位之后, 位置从浏览器出发.
元素使用固定定位之后, 会转化为行内块(不推荐, 推荐使用 display:inline-block;)
定位的盒子居中显示
:margin:0auto; 盒子居中, 只能让标准流的盒子居中对齐.
(text-align 是内容的对齐方式)
定位的盒子居中: 先左 / 右走父元素盒子的一半 50%, 在向左走子盒子的一半(margin-left: 负值.)
19 标签包含规范
div 可以包含所有的标签.
p 标签不能包含 div h1 等标签.
h1 可以包含 p,div 等标签.
行内元素尽量包含行内元素, 行内元素不要包含块元素.
详细的包含规范见下图
flow: 所有的文档流, 即块元素, 行内元素
20 规避脱标流
尽量使用标准流.
标准流解决不了的使用浮动.
浮动解决不了的使用定位.
规避浮动和定位的一个小方法: 同理 margin:0 auto; 为盒子居中
21 图片和文字垂直居中对齐
vertical-align 垂直对齐, 对 inline-block 最敏感. 默认属性是: vertical-align:baseline;
更详细的可看一个个人网站: www.zhangxinxu.com
22 Css 可见性
overflow:hidden; 溢出隐藏 当内容出了盒子之外就隐藏.
结合锚点使用, 可用于鼠标放置显示, 移开不显示
visibility:hidden; 隐藏元素 隐藏之后还占据原来的位置.
display:none; 隐藏元素 隐藏之后不占据原来的位置.
Display:block; 元素可见
Display:none 和 display:block ; 常配合 js 使用.
css 之内容移除(网页优化)
使用 text-indent:-5000em;
将元素高度设置为 0, 使用内边距将盒子撑开, 给盒子使用 overflow:hidden; 将文字隐藏.
Css 精灵图
10 属性选择器
选中标签及其属性
23 emmet 快捷键:
emmet 是我们在 sublime 中的一个插件在这个插件中集成很多的快捷键.
12 html:
12.1 生成结构的快捷键:
!+ tab, 可以生成 html5 的结构代码.
12.2 生成 id 名和类名
标签名. 类名 #id 名 + tab
没有标签名. 类名 + tab ==>div
12.3 生成同级元素:
标签名 + 标签名 + 标签名 "+"tab
12.4 生成子类标签
标签名>子标签名>子标签名>子标签名 + tab
标签名>子标签名>子标签名>子标签名 ^^ 子标签名 + tab
- width:30px==>w30+tab
- Height:30px==>h30+tab
- Margin:30px==>mg30+tab
- Padding:30px==>pd30+tab
- Line-height:12px==>lh12px+tab
- Background==>bg+tab
来源: http://www.bubuko.com/infodetail-2664124.html