CSS3
菜鸟教程-CSS3教程
CSS 选择器
- 元素选择器
div { background-color: gray; font: italic normal bold 14pt normal 楷体_GB2312; }
- 属性选择器：
-
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元素；
- ID 选择器：
#idValue { ... } - class 选择器：
.myclass，对所有class为myclass的元素起作用；div.myclass，对class为myclass的div起作用； -
包含选择器：
selector1 selector2 { ... }，满足selector1内部的，再满足selector2的元素：div .a，div内部，class为a的元素； -
子选择器：
selector1 > selector2 { ... }，满足selector1的元素的，直接子元素中，再满足selector2的元素：div > .a，div的子元素中，class为a的； - 选择器组合：有些时候，我们需要让一份 CSS 样式对多个选择器起作用，那就可以利用选择器组合来实现了。语法如下：
selector1, selector2, selector3, ... { ... }
div, .a, #abc：对div元素、class为a的元素、id为abc的元素都起作用。
CSS 3.0 新增的伪类选择器
first-child, last-child, nth-child, nth-last-childfirst-of-type, last-of-type, nth-of-type, nth-last-of-typelink, 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 分页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
ul.pagination {
display: inline-block;
padding: 0;
margin: 0;
}
ul.pagination li {display: inline;}
ul.pagination li a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
<!-- 过渡动画 -->
transition: background-color .3s;
border: 1px solid #ddd;
<!-- 加上圆角 -->
<!-- border-radius: 5px; -->
}
.pagination li:first-child a {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.pagination li:last-child a {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
ul.pagination li a.active {
background-color: #4CAF50;
color: white;
border: 1px solid #4CAF50;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>
<h2>CSS3 分页实例</h2>
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a class="active" href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">»</a></li>
</ul>
</body>
</html>
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 {
<!-- 图片可能会超过其原始大小 -->
<!-- width: 100%; -->
<!-- 用 max-width 就行了 -->
max-width: 100%;
height: auto;
}
菜鸟教程-响应式 Web 设计
viewport
什么是 Viewport?
viewport 是用户网页的可视区域。
viewport 翻译为中文可以叫做"视区"。
手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。
一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
响应式 Web 设计框架
Bootstrap
其他
<meta http-equiv="X-UA-Compatible" content="IE=edge">：
这是一个文档兼容模式的定义。Edge 模式告诉 IE 以最高级模式渲染文档，也就是任何 IE 版本都以当前版本所支持的最高级标准模式渲染，避免版本升级造成的影响。
来自 Bootstrap 的说明：
Bootstrap 不支持 IE 古老的兼容模式。为了让 IE 浏览器运行最新的渲染模式下，建议将此 <meta> 标签加入到你的页面中：
<meta http-equiv="X-UA-Compatible" content="IE=edge">
按 F12 键打开 IE 的调试工具，就可以看到 IE 当前的渲染模式是什么。
此 meta 标签被包含在了所有 Bootstrap 文档和实例页面中，为的就是在每个被支持的 IE 版本中拥有最好的绘制效果。
网友评论