CSS 3 流水账

CSS3

菜鸟教程-CSS3教程

CSS 选择器

1. 元素选择器

• div { background-color: gray; font: italic normal bold 14pt normal 楷体_GB2312; }

2. 属性选择器：

• div[id]：所有含有id属性的div元素；
• div[id=xx]：id属性值为xx的div元素；
• div[id ~= xx]：id属性值为以空格隔开的系列值，其中某个值为xx；
• div[id |= xx]：id属性值为以|隔开的系列值，其中某个值为xx；
• div[id*=xx]：id属性包含xx的div元素；
• div[id^=xx]：id属性以xx开始的div元素；
• div[id$=xx]：id属性以xx结束的div元素；
• div[id^=xx]：id属性以xx开始的div元素；

3. ID 选择器：#idValue { ... }
4. class 选择器：.myclass，对所有 class 为 myclass 的元素起作用；div.myclass，对 class 为 myclass 的 div 起作用；
5. 包含选择器：selector1 selector2 { ... }，满足 selector1内部的，再满足selector2的元素：div .a，div内部，class为a的元素；
6. 子选择器：selector1 > selector2 { ... }，满足selector1的元素的，直接子元素中，再满足selector2的元素：div > .a，div的子元素中，class为a的；
7. 选择器组合：有些时候，我们需要让一份 CSS 样式对多个选择器起作用，那就可以利用选择器组合来实现了。语法如下：
   selector1, selector2, selector3, ... { ... }
div, .a, #abc：对div元素、class为a的元素、id为abc的元素都起作用。

CSS 3.0 新增的伪类选择器

• first-child, last-child, nth-child, nth-last-child
• first-of-type, last-of-type, nth-of-type, nth-last-of-type
• link, visited, active, hover, focus, enabled, disabled, checked, default, read-only, read-write, selection

其他

• text-align：文本对其方式，left, right, center, justify, 左右中间两边；
• word-break：设置目标组件中文本内容的换行方式：
  • normal：靠浏览器的默认规则进行换行。通常，浏览器的处理规则是，对于英文单词，浏览器只会在半角空格、连字符等地方进行换行，不会在单词中间换行；对于中文来说，浏览器可以在任何一个中文字符后换行；
  • keep-all：只能在半角空格或连字符处换行；
  • break-all：允许在任何单词(中文&英文)中间换行；

组件的居中对齐方式呢？

style="margin: auto; width=800px or 70%"

CSS 3 盒子模型

CSS 3 盒子模型

style.display: none：隐藏元素且不占空间；
style.visibility: visible/hidden：显示/隐藏元素，但始终占空间；

CSS 3 分页

 
 




CSS3 分页实例

  
«
  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
»

CSS3 分页实例

CSS3 动画

CSS3 也是可以制作动画的，可以取代部分动态图片和 JavaScript。
菜鸟教程连接

CSS 媒体查询 @media

1、什么是媒体查询
媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。

2、为什么响应式设计需要媒体查询
如果没有CSS3的媒体查询模块，就不能针对设备特性（如视口宽度）设置特定的CSS样式

媒体查询例子：

如果浏览器窗口小于 500px, 背景将变为浅蓝色：

@media only screen and (max-width: 500px) {    
body { 
    background-color: lightblue; 
}}

Try It！Amazing！

图片的响应式设计

img {
    
    
    
    max-width: 100%;
    height: auto;
}

菜鸟教程-响应式 Web 设计

viewport

什么是 Viewport?
viewport 是用户网页的可视区域。

viewport 翻译为中文可以叫做"视区"。
手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：

响应式 Web 设计框架

Bootstrap

其他

：

这是一个文档兼容模式的定义。Edge 模式告诉 IE 以最高级模式渲染文档，也就是任何 IE 版本都以当前版本所支持的最高级标准模式渲染，避免版本升级造成的影响。

来自 Bootstrap 的说明：

Bootstrap 不支持 IE 古老的兼容模式。为了让 IE 浏览器运行最新的渲染模式下，建议将此 标签加入到你的页面中：

按 F12 键打开 IE 的调试工具，就可以看到 IE 当前的渲染模式是什么。
此 meta 标签被包含在了所有 Bootstrap 文档和实例页面中，为的就是在每个被支持的 IE 版本中拥有最好的绘制效果。

---