HTML5和CSS3的一些学习记录

1、引述块级文本的标签（blockquote）：

<blockquote cite="http://www.marktwainbooks.edu/">

    <p>This is blockquote content!</p>

</blockquote>

2、突出显示文本的标签（mark）：

<p>Remove the tray from the box<mark>15 minutes</mark>, rotating it half way.</p>

3、创建锚（通过a标签的href属性以及锚的id对应创建一个简单的锚）：

<header>

    <h2>Table of Content</h2>

    <nav>

        <ul>

            <li><a href="#intro">Introduction</a></li>

            <li><a href="#main">Description</a></li>

            <li><a href="#rising">Rising</a></li>

        </ul>

    </nav>

</header>

<article>

    <h2 id="intro">Introduction</h2>

    <!-- 需要p标签内容多才能看到效果 -->

    <p>This is Introduction content!!This is Introduction content!!This is Introduction content!!This is Introduction content!!This is Introduction content!!This is Introduction content!!This is Introduction content!!This is Introduction content!!This is Introduction content!!This is Introduction content!!This is Introduction content!!This is Introduction content!!This is Introduction content!!This is Introduction content!!This is Introduction content!!This is Introduction content!!This is Introduction content!!This is Introduction content!!This is Introduction content!!This is Introduction content!!This is Introduction content!!This is Introduction content!!This is Introduction content!!This is Introduction content!!</p>

    <h2 id="main">Description</h2>

    <p>This is main content!!This is main content!!This is main content!!This is main content!!This is main content!!This is main content!!This is main content!!This is main content!!This is main content!!This is main content!!This is main content!!This is main content!!This is main content!!This is main content!!This is main content!!This is main content!!This is main content!!This is main content!!This is main content!!This is main content!!This is main content!!This is main content!!This is main content!!This is main content!!This is main content!!This is main content!!This is main content!!This is main content!!This is main content!!This is main content!!This is main content!!This is main content!!This is main content!!This is main content!!This is main content!!This is main content!!This is main content!!</p>

    <h2 id="rising">Rising</h2>

    <p>This is rising content!!This is rising content!!This is rising content!!This is rising content!!This is rising content!!This is rising content!!This is rising content!!This is rising content!!This is rising content!!This is rising content!!This is rising content!!This is rising content!!This is rising content!!This is rising content!!This is rising content!!This is rising content!!This is rising content!!This is rising content!!This is rising content!!This is rising content!!This is rising content!!This is rising content!!This is rising content!!This is rising content!!This is rising content!!This is rising content!!This is rising content!!This is rising content!!This is rising content!!This is rising content!!This is rising content!!This is rising content!!This is rising content!!This is rising content!!This is rising content!!This is rising content!!This is rising content!!This is rising content!!This is rising content!!This is rising content!!This is rising content!!</p>

</article>

4、设置背景色透明，文字不透明：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>背景透明，文字不透明</title>

<style>

*{

    padding: 0;

    margin: 0;

}

body{

  padding: 50px;

  background: url(img/bg.png) 0 0 repeat;

}

.demo{

  padding: 25px;

  background-color: rgba(0,0,0,0.5);/* IE9、标准浏览器、IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂 */

}

.demo p{

  color: #FFFFFF;

}

@media \0screen\,screen\9 {/* 只支持IE6、7、8 */

  .demo{

    background-color:#000000;

    filter:Alpha(opacity=50);

    position:static; /* IE6、7、8只能设置position:static(默认属性) ，否则会导致子元素继承Alpha值 */

    *zoom:1; /* 激活IE6、7的haslayout属性，让它读懂Alpha */

  }

  .demo p{

    position: relative;/* 设置子元素为相对定位，可让子元素不继承Alpha值 */

  }

}

</style>

</head>

<body>    

<div class="demo">

    <p>背景透明，文字不透明</p>

</div>

</html>

或者

.demo {

    filter:alpha(Opacity=40);

    opacity:0.40;

    -moz-opacity:0.40;

    filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=40);

    -MS-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";

}

或者

/* IE滤镜 */

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000);

/* CSS3 */

background-color: rgba(0,0,0,.5);

　　7F000000：前两位是十六进制透明值，00是完全透明，FF是完全不透明；后六位是十六进制颜色值。

　　rgba(0,0,0,.5)：前三个值分别是红绿蓝（0-255），第四个是透明值，取值0完全透明，取值1完全不透明。

5、按属性选择元素：

　　（1）HTML代码：

<article>

    <section class="project">

        <p>This is project content!</p>

    </section>

    <section class="work">

        <p>This is work content!</p>

    </section>

    <section class="study">

        <p>This is study content!</p>

    </section>

</article>

　　（2）CSS代码：

section[class] {

    color: red;

}

　　（3）这个选择器选择任何rel属性值等于external（必须完全匹配）的a元素：

a[rel="external"] {

    color: red;

}

　　（4）这个选择器选择任何带有lang属性且属性值以es开头的h2元素：

h2[lang|="es"] {

    color: red;

}

　　（5）这个选择器选择任何带有lang属性且属性值以es开头的所有元素：

*[lang|="es"] {

    color: red;

}

　　（6）这个选择器选择既有任意href属性，又有任意属性值包含单词"howdy"的title属性的a元素：

a[href][title ~ = "howdy"] {

    color: red;

}

　　（7）这个选择器选择既有任意href属性，又有任意属性值包含单词"how"的title属性的a元素：

a[href][title * = "how"] {

    color: red;

}

　　（8）这个选择器匹配任何href属性值以“http://”开头的a元素：

a[href = "http://"] {

    color: red;

}

　　（9）这个选择器匹配任何src值完全等于“logo.png”的img元素：

img[src = "logo.png"] {

    border: 1px solid green;

}

　　（10）这个选择器匹配任何src属性值以“.png”结尾的img元素：

img[src $= ".png"] {

    border: 1px solid green;

}

6、CSS布局方法：

　　（1）固定布局（fixed）：整个页面和每一栏都有基于像素的宽度。

　　（2）流式布局（fluid或liquid）：使用辈分比定义宽度，允许随着现实环境的改变进行放大或缩小。

　　（3）弹性布局（elastic）：对宽度和其他所有属性的大小都使用em，从而让页面根据用户的font-size设置进行缩放。

7、在旧版浏览器为HTML5元素添加样式：

　　（1）将下面的代码添加到网站的主样式表文件（即所有页面都用到的样式表文件）：

article, aside, figcaption,

figure, footer, header,

hgroup, menu, nav, section {

    display: block;

}

　　（2）对于IE9之前的版本，要为新的HTML5元素正常添加样式，将下面代码添加到每个页面的head元素，最好置于指向css文件的链接（<Link rel="stylesheet" href="base.css" />）后面。

<!--[if lt IE 9]>

    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

　　这种方法及替代方法有个缺陷，如果用户的浏览器不支持或关闭了JavaScript，这些用户看到的HTML5元素就是无样式甚至是凌乱的。

　　替代方法：

　　　　（1）使用div替代。

　　　　（2）如果确实要使用新的元素，可以尽可能多的编写指向其他元素的CSS选择器，以降低JavaScript关闭时产生的影响。

8、display: none;和visibility:hidden;的区别：

　　（1）display: none;隐藏的元素不会再浏览器中留下任何痕迹，没有空白的空间。

　　（2）visibility:hidden;隐藏的元素仍然会在文档中保留其所占据的空间。

9、媒体查询：

　　（1）引入媒体查询方法：

　　　　1）使用link元素的media属性：

<link rel="stylesheet" href="global.css" media="only screen and (min-width: 480px) and (max-width: 767px)" />

<link rel="stylesheet" href="global.css" media="only screen and (orientation: landscape)" />

<link rel="stylesheet" href="global.css" media="only print and (color)" />

<link rel="stylesheet" href="global.css" media="only print and (monochrome)" />

<link rel="stylesheet" href="global.css" media="only screen and (color), projection and (color)" />

　　　　2）在样式表中使用@media规则：

@media only screen and (min-width: 480px) and (max-width: 767px) {

    p {

        color: red;

        font-weight: bold;

    }

}

@media only screen and (min-width: 480px) and (max-width: 767px) {

    /* 样式规则 */

}

@media only screen and (orientation: landscape) {

    /* 样式规则 */

}

@media only print and (color) {

    /* 样式规则 */

}

@media only print and (monochrome) {

    /* 样式规则 */

}

@media only screen and (color), projection and (color) {

    /* 样式规则 */

}

　　（2）使用视觉区域meta元素：

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

　　（3）IE8及以下版本不支持媒体查询。可以使用条件注释仅让IE8及以下版本加载这段脚本（放在</body>前）。

<!--[if lte IE 8]>

    <script src="js/respond.js"></script>

<![endif]-->

　　respond.js下载地址：https://github.com/scottjehl/Respond/。

10、使用CSS3进行增强：

　　（1）设置圆角：

/* 圆 */

.circle {

    -moz-border-radius: 75px;

    -webkit-border-radius: 75px;

    border-radius: 75px;

}

/* 椭圆 */

.elliptical-corners {

    -moz-border-radius: 40px / 20px;

    -webkit-border-radius: 40px / 20px;

    border-radius: 40px / 20px;

}

/* 左上角圆角 */

.one-corner {

    -moz-border-radius-topleft: 75px;

    -webkit-border-top-left-radius: 75px;

    border-top-left-radius: 75px;

}

/* 设置整个圆角 */

.all-corners {

    border-radius: 20px;

}

　　（2）为文本添加阴影（参数分别为x-offset(水平偏移量)、y-offset(垂直偏移量)、color(颜色)和blur radius(模糊半径)）：

.multiple {

    text-shadow: 2px 2px 0 rgba(255, 255, 255, 1), 6px 6px 0 rgba(50, 50, 50, .25);

}

　　（3）为元素添加阴影（参数分别为x-offset(水平偏移量)、y-offset(垂直偏移量)、可选的inset关键字、可选的带长度单位的blur-radius、可选的带长度单位的spread值及color值），如果不指定blur-radius和spread的值，默认为0：

/* 正常的阴影 */

.shadow {

    background: #CCC;

    -moz-box-shadow: 2px 2px 5px #000;

    -webkit-box-shadow: 2px 2px 5px #000;

    box-shadow: 2px 2px 5px #000;

}

/* 内阴影 */

.inset-shadow {

     -moz-box-shadow: inset 2px 2px 5px #000;

    -webkit-box-shadow: inset 2px 2px 5px #000;

    box-shadow: inset 2px 2px 5px #000;

}

/* 多重阴影 */

.multiple {

    -moz-box-shadow: 2px 2px 10px rgba(0, 255, 0, .75), 5px 5px 20px rgba(125, 0, 0, .5);

    -webkit-box-shadow: 2px 2px 10px rgba(0, 255, 0, .75), 5px 5px 20px rgba(125, 0, 0, .5);

    box-shadow: 2px 2px 10px rgba(0, 255, 0, .75), 5px 5px 20px rgba(125, 0, 0, .5);

}

　　（4）使用渐变背景：

.linear-div {

    width:100%;

    height:200px;

    background: -webkit-gradient(linear, 0 0, 0 0, from(#F6F4EF), to(#F1EDE6));

    background: -webkit-linear-gradient(left,#F1EDE6, #F6F4EF, #F1EDE6);

    background: -moz-linear-gradient(left,#F1EDE6, #F6F4EF, #F1EDE6);

    background: -o-linear-gradient(left,#F1EDE6, #F6F4EF, #F1EDE6);

    background: -ms-linear-gradient(left,#F1EDE6, #F6F4EF, #F1EDE6);

    background: linear-gradient(left,#F1EDE6, #F6F4EF, #F1EDE6);

    filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = #F6F4EF, endColorstr = #F1EDE6);

}