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（为确保图片不被剪切，通过在图片间添加空白来适应背景区域）
• 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

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; 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 等数值）

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-568px)" href="css/iphone_styles.css" />

8.2.3、断点

断点（breakpoint）在这里指的是媒体查询起作用的屏幕宽度。

//在这里，断点是640 像素宽。如果有设备的屏幕宽度等于或小于断点设定的宽度，那么后面的CSS 就会起作用。 @media screen and (max-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; 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 代码，能够赋予浏览器未曾有过的功能。