css设计指南笔记
第1章 HTML 标记与文档结构
第2章 CSS 工作原理
2.1、为文档添加样式的三种方法
- 行内样式、嵌入样式、链接样式
2.2、选择符
- 子选择符>:标签1 > 标签2(标签2 必须是标签1 的子元素)
- 紧邻同胞选择符+:标签1 + 标签2(标签2 必须紧跟在其同胞标签1 的后面)
- 一般同胞选择符~:标签1 ~ 标签2(标签2 必须跟(不一定紧跟)在其同胞标签1 后面)
- 通用选择符(特殊情况) section a:任何是section 孙子元素,而非子元素的a 标签都会被选中
2.3、伪类(:一个冒号是伪类、::两个冒号是伪元素)
- Link:此时,链接就在那儿等着用户点击
- Visited:用户此前点击过这个链接
- Hover:鼠标指针正悬停在链接上
-
Active:链接正在被点击(鼠标在元素上按下,还没有释放)
-
:focus
-
input:focus {border:1px solid blue;}:会在光标位于input 字段中时,为该字段添加一个蓝色边框
-
-
:target 伪类
-
如果用户点击一个指向页面中其他元素的链接,则那个元素就是目标(target),可以用:target 伪类选中它。
-
-
结构化伪类
- :first-child 和:last-child
- :nth-child
2.4、伪元素
- ::first-letter:段落首字符放大
- ::first-line:可以选中文本段落(一般情况下是段落)的第一行
- ::before 和::after 伪元素:可用于在特定元素前面或后面添加特殊内容每个content属性值中都包含了空格,以便输出结果中有适当的空距
2.5、css属性值主要分三类
- 文本值:
- 例如,font-weight:bold 声明中的bold 就一个文本值。文本值也叫做关键字。
- 数字值:
- 数字值后面都有一个单位,例如英寸或点。在声明font-size:12px中,12是数字值,而px是单位(像素)。如果数字值为0,那么就不用带单位了。
- 颜色值:
- 颜色值可以用几种不同的格式来写,包括RGB(Red, Green, Blue,红绿蓝)、HSL(Hue, Saturation, Luminance,色相,饱和度,亮度)和十六进制值(例如color:#336699)。
第3章 定位元素
3.1、清除浮动的三种方式
- 为父元素应用overflow:hidden
- 浮动父元素
-
在父元素内容的末尾添加非浮动元素,可以直接在标记中加,也可以通过给父元素添加clearfix类来加(当然,样式表中得需要相应的clearfix 规则)
.clearfix:after { content:"."; display:block; height:0; visibility:hidden; clear:both; }
3.2、定位
- position:static、relative、absolute、fixed
- display:block、inline、none
- visibility:visible、hidden
3.3、背景
- background-color:背景颜色
- background-image:背景图片
- background-repeat:背景重复
- css2:
- repeat(水平和垂直都铺满[default])
- no-repeat
- repeat-x
- repeat-y
- css3:
- round(为确保图片不被剪切,通过调整图片大小来适应背景区域)
- space(为确保图片不被剪切,通过在图片间添加空白来适应背景区域)
- css2:
- background-position:背景位置
- 5个关键词:top、left、bottom、right、center(任意两个组成水平和垂直的位置)
- background-size:背景尺寸(css3)
- 50%:缩放图片,使其填充背景区的一半
- 100px 50px:把图片调整到100像素宽度,50像素高度
- cover:拉大图片,使其完全填满背景区;保持宽高比
- contain:缩放图片,使其恰好适合背景区;保持宽高比
- background-attachment:背景粘附
- scroll:背景图片随元素移动(defalut)
- fixed :背景图片不会随元素滚动而移动。fixed 最常用于给body元素中心位置添加淡色水印,让水印不随页面滚动而移动
简写:background:url(1.png) center #fff no-repeat contain fixed
-
css3新增背景属性
- background-clip:控制背景绘制区域的范围
- background-origin:控制背景定位区域的原点
-
background-break:控制分离元素
-
多背景图片
- background:
- url(1.png)30px -10px no-repeat,
- url(2.png)130px -30px no-repeat,
-
url(3.png)230px -50px no-repeat,#ffbd75
-
厂商前缀VSP(Vendor Specific Prefixes)
- -moz-transform:skewX(-45deg); / Firefox /
- -webkit-transform:skewX(-45deg); / Chrome 及Safari /
- -ms-transform:skewX(-45deg); / 微软Internet Explorer /
- -o-transform:skewX(-45deg); / Opera /
-
transform:skewX(-45deg); / 最后是W3C 标准属性 /
-
以下CSS3 属性必须加VPS:
- border-image translate
- linear-gradient transition
- radial-gradient background*
- transform background-image*
-
transform-origin
-
背景渐变
- 渐变点(线性渐变):设定颜色与不透明度、可以添加任意多个渐变点
/*例1:50%处有一个渐变点*/ .gradient1 { background:linear-gradient(#64d1dd, #fff 50%, #64d1dd); } /*例2:20%和80%处有两个渐变点*/ .gradient2 { background:linear-gradient(#e86a43 20%, #fff 50%, #e86a43 80%); } /*例3:25%、50%、75%处有三个渐变点*/ .gradient3 { background:linear-gradient(#64d1dd, #fff 25%, #64d1dd 50%, #fff 75%,#64d1dd); } /*例4:为同一个渐变点设定两种颜色可以得到突变效果*/ .gradient4 { background:linear-gradient(#e86a43, #fff 25%, #64d1dd 25%, #64d1dd 75%,#fff 75%, #e86a43); }
- 放射性渐变:创建放射性渐变,可以使用参数指定形状、位置、尺寸、颜色和不透明度。
/*默认的填满图形渐变*/ .gradient1 { background: -webkit-radial-gradient(#fff, #64d1dd, #70aa25); } /*圆形渐变*/ .gradient2 { background: -webkit-radial-gradient(circle, #fff, #64d1dd, #e86a43); } /*指定位置的圆形渐变*/ .gradient3 { background: -webkit-radial-gradient(50px 30px, circle, #fff, #64d1dd,#4947ba); }
- 渐变点(线性渐变):设定颜色与不透明度、可以添加任意多个渐变点
第四章 字体和文本
4.1、字体
-
网页中字体来源
- 用户机器中安装的字体
- 第三方网站上的字体(如Typekit、Google 可以使用link标签引入)
-
保存在Web服务器上的字体(使用@font-face规则随网页一起发送给浏览器)
-
字体相关的6个属性:font-family、font-size、font-style、font-weight、font-variant、font(简写属性)
- 字体族 font-family
- 5种通用字体类:serif、sans-serif、monospace、cursive、fantasy
- 字体大小 font-size:绝对大小 相对大小(em rem)
- 字体样式 font-style:italic(斜体)、oblique(倾斜的字体)、normal(正体)
- 字体粗细 font-weight:bold、normal
- 字体变化 font-variant:small-caps(小写英文字母变成小型大写字母)、normal
- 简写字体属性
- {font:bold italic small-caps .9em helvetica,arial,sans-serif;}
- 声明字体加粗、斜体、小型大写字母、大小和字体族
- 要遵循两条规则
- 必须声明font-size和font-family的值
- 所有值必须按如下顺序声明
- font-weight、font-style、font-variant不分先后
- 然后是font-size
- 最后是font-family
- 字体族 font-family
4.2、文本属性
- 常用css文本属性
- text-indent:文本缩进(子元素会继承缩进值)
- letter-spacing:字符间距
- word-spacing:单词间距
- text-decoration:文本装饰
- underline
- overline
- line-through
- blink
- none
- text-align:文本对齐
- justify:两端对齐
- left
- right
- center
- line-height:行高
- text-transform:文本转换
- none
- uppercase
- lowercase
- capitalize:将每个词的首字母转换为大写
- vertical-align:垂直对齐
- sub
- super
- top
- middle
- bottom
- 任意长度值
4.3、Web字体大揭秘
三种方式 - 使用Google Web Fonts 或Adobe 的Typekit 等公共字体库。 - 使用事先打好包的@font-face 包。 - 使用Font Squirrel 用你自己的字体生成@font-face 包。
第五章 页面布局
5.1、布局的基本概念
多栏布局三种基本实现方案:固定宽度、流动(响应式布局)、弹性
5.2、三栏-固定宽度布局
为栏设定内编剧和边框
只要一调整各栏中的内容,布局就可能超过容器宽度,而右边的栏就可能滑到左边的栏下方。一般来说,两种情况下可能会发生这种问题。 - 为了让内容与栏边界空开距离,为栏添加水平外边距和内边距,或者为了增加栏间距,为栏添加外边距,导致布局宽度增大,进而浮动栏下滑。 - 在栏中添加大图片,或者没有空格的长字符串(如长URL),也会导致栏宽超过布局宽度。 三种解决办法 - 重设宽度以抵消内边距和边框 - 给容器内部元素应用内边距和边框 - 使用box-sizing:border-box
5.3、三栏-中栏流动布局
5.3.1、用负边距实现
5.3.2、用CSS3单元格实现
display:table-cell
5.4 多行多栏布局
5.4.1、CSS选择符的实际应用
5.4.2、内部DIV实战
第六章 页面组件
6.1、导航菜单
6.1.1、纵向菜单
6.1.2、横向菜单
6.1.3、下拉菜单
视觉样式要与功能样式分开写,有利于维护
6.2 表单
6.2.1、HTML表单元素
6.2.2、表单标记策略
-
基本的标注和控件
<section> <label>…</label> <input /> <p>…</p> <!-- 控件使用说明 --> </section>
-
复选框和单选按钮
<section> <h4>Set Heading</h4> <!-- 第一个单选按钮/复选框 --> <section> <input /> <label>…</label> </section> <!-- 第二个单选按钮/复选框 --> <section> <input /> <label>…</label> </section> <!-- 控件使用说明 --> <p>…</p> </section>
6.2.3、设定表单样式
6.2.4、设计搜索表单
CSS3 过渡 - transition-property:过渡的CSS 属性名,比如color、width。 - transition-duration:过渡的持续时间,以秒或毫秒设定,比如2s、500ms。 - transition-timing-function:过渡的调速函数,决定动画效果是否平滑,是先慢后快还是先快后慢,比如ease-in、ease-out、ease-in-out 或linear(默认值)。 - transition-delay:过渡开始前的延迟时间,以秒或毫秒设定,比如1s、200m。 - tansition:过渡的简写属性,例如transition:color 2s ease-in 1ms;。
6.3、弹出层
6.3.1、堆叠上下文和z-index
6.3.2、用CSS创造三角形
div { border:12px solid; border-color:transparent red transparent transparent; height:0px; width:0px; }
第七章 CSS3实战
7.1、规划页面结构
- 代码结构要符合逻辑
- 规划组织要考虑层次
7.2、页眉
- 弧型角:border-radius:10px / 20px;
- 盒阴影:box-shadow: > box-shadow:4px 4px 5px 8px #aaa inset; > > box-shadow 属性的这几值分别代表:水平偏移量、垂直偏移量、模糊量、扩展量、颜色、阴 影位于边框内部(默认位于边框外部,即outset)。
- 垂直居中
- line-height
- diplay:table-row;vertical-align:middle;
7.3、专题区
7.4、图书区
- CSS3变换
- transform:函数名(数值或x、y值)
- scale:scale:用于放大或缩小元素(指定大于1的值放大元素,小于1的值缩小元素),如transform:scale(1.5)。
- rotate:根据指定的度数旋转元素(正值顺时针旋转,负值逆时针旋转),如transform:rotate(-30deg)。
- skew:让元素在x 轴和y 轴方向倾斜(只指定一个值,y 轴不受影响),如transform:skew(5deg, 50deg)。
- translate:根据指定的距离沿x轴和y轴平移对象(很像相对定位,因为对象初始占据的空间会保留),如transform:translate(-50px, 20px)。
- transform-origin:设定元素围绕其变换的原点(left、center、right、top 和bottom 等数值)
- transform:函数名(数值或x、y值)
7.5、页脚
第八章 响应式设计
8.1、小设备上的大布局
响应式设计的三个要素 - 媒体查询:是一种CSS 语法,可以根据浏览器的特性,一般是屏幕或浏览器容器宽度提供CSS 规则; - 流式布局:是使用em 或百分比等相对单位设定页面总体宽度,让布局能够随屏幕大小而缩放; - 弹性图片:是使用相对单位确保图片再大也不会超过其容器。
8.2、媒体查询
两种方式 - @media规则 - <link>标签的media属性
8.2.1、@media规则
-
媒体类型(IE6及以上支持)
- all:匹配所有设备;
- handled:匹配手持设备(小屏幕、单色、带宽有限);
- print:匹配分页媒体或打印预览模式下的屏幕;
- screen:匹配彩色计算机屏幕;
-
其他媒体类型
- braille:盲文点字触觉反馈设备
- embossed:盲文分页打印机
- projection:(投影仪
- speech:语音合成器
- tty:电话机屏幕等固定宽度字符栅格设备
-
tv:电视机
-
媒体特性(IE9以上支持):媒体特性也就是媒体某一方面的特征,一般带有min-或max-前缀。
- min-device-width 和max-device-width:匹配设备屏幕的尺寸;
- min-width 和max-width:匹配视口的宽度,例如浏览器窗口宽度;
- orientation(值为portrait 和landscape):匹配设备是横屏还是竖屏。
- 可以使用逻辑运算符and、not、or 及关键字all、only 组合媒体类型和媒体特性。
- only 关键字可以用来对不支持媒体查询的浏览器隐藏样式表
8.2.2、<link>标签的media属性
<link type="text/css" media="screen and (max-width:568px)" href="css/iphone_styles.css" />
8.2.3、断点
断点(breakpoint)在这里指的是媒体查询起作用的屏幕宽度。
//在这里,断点是640 像素宽。如果有设备的屏幕宽度等于或小于断点设定的宽度,那么后面的CSS 就会起作用。 @media screen and (max-width:640px) { /*CSS 规则*/ }
8.2.4、用<meta>标签设定视口
<meta name="viewport" content="width=device-width;maximumscale=1.0" />
8.3、针对平板优化布局
8.4、针对智能手机优化布局
8.5、最后两个问题
8.5.1、移动Safari中的缩放bug
Safari Mobile(iPhone 浏览器)中有一个bug,在设备从竖屏旋转到横屏时会导致缩放和重绘问题
8.5.2、让下拉菜单支出触摸
解决方案是使用Modernizr 检测设备是否支持触摸,如果支持再去掉对visibility属性的过渡。如果设备支持触摸,Modernizr 会给根元素html 添加一个touch 类,我们就可以针对触摸设备单写一条规则:
/*Modernizr 检测到触屏,再去掉妨碍菜单过渡的visibility 属性*/ /这条规则对(不支持触摸的)非移动设备是不适用的 .touch nav.menu li ul { -webkit-transition:1s opacity; -moz-transition:1s opacity; transition:1s opacity; }
附录
编写CSS
声明优先级顺序 1. display 及相关声明; 2. position 及相关的声明; 3. margin、padding 和border 及相关声明; 4. 字体/文本相关声明; 5. 装饰相关声明。
.demo { display:block; position:absolute; height:100px; width:300px; left:10px; top:10px; margin:0 5px; padding:10px; font-size:10px; line-height:1.2; background-color:#eee; border:1px solid; border-radius:6px; }
后备代码
最简单的后备就是没有后备:CSS3圆角功能,IE6和IE7不显示,但是也没太大影响。
IE9 之前的浏览器都不支持多背景,因此后备代码就是在多背景声明之前简单地再加一条单背景声明,比如:
//所有浏览器都能理解第一条规则,但只有支持多背景的浏览器才会采用第二条规则。 .someElement {background-image:url(images/basic_image.jpg);} .someElement {background-image: url(images/cool_image1.jpg), url(images/cool_image2.jpg), url(images/cool_image3.jpg); }
条件注释
<!--[if lte IE 8]> <!-- IE 条件注释 --> <link src="ie_only.css" rel="stylesheet" /> <![endif]-->
这种特殊格式的HTML 注释会被非IE 浏览器忽略,只有IE 浏览器才会执行其中的代码。加载条件如下: - lte(less than or equal to,小于等于) - lt(less than,小于) - gte(greater than or equal to,大于等于) - gt(greater than,大于)
腻子脚本
腻子脚本(polyfill)指的是一段JavaScript 代码,能够赋予浏览器未曾有过的功能。