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);
}
HTML5和CSS3的一些学习记录的更多相关文章
- 《响应式Web设计—HTML5和CSS3实战》 学习记录
作者:Ben Frain 学习时间 2016/5/12 第一章 设计入门 *视口调试工具 IE:Microsoft Internet Explorer Develop Toolbar Safa ...
- HTML5与CSS3权威指南之CSS3学习记录
title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...
- HTML5与CSS3基础教程第八版学习笔记11~15章
第十一章,用CSS进行布局 开始布局注意事项 1.内容与显示分离 2.布局方法:固定宽度和响应式布局 固定宽度,整个页面和每一栏都有基于像素的宽度 响应式布局也称为流式页面,使用百分数定义宽度 3.浏 ...
- Web 前端开发精华文章推荐(HTML5、CSS3、jQuery)【系列二十二】
<Web 前端开发精华文章推荐>2014年第一期(总第二十二期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML ...
- 《HTML5与CSS3实例教程》
<HTML5与CSS3实例教程> 基本信息 作者: (美)Brian P. Hogan 译者: 卢俊祥 丛书名: 图灵程序设计丛书 出版社:人民邮电出版社 ISBN:97871153634 ...
- javaWeb后端学习记录
java后端学习重点: 1.java语言特性: 基础知识,集合,多线程,并发,JVM,NIO,网络编程,设计模式. (★★★★★) jdk源码中有大量的数据结构与java语言细节.jdk源码着重看c ...
- HTML与CSS学习记录
title: HTML与CSS学习记录 toc: true date: 2018-09-10 14:04:59 <HTML与CSS进阶教程读书笔记> HTML基础知识 HTML与XHTML ...
- 前端学习记录 week 1
前端学习记录 week 1 基础知识 CSS盒模型 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用.CSS盒模型本质上是一个盒子,封 ...
- Web 前端开发精华文章推荐(jQuery、HTML5、CSS3)【系列十二】
2012年12月12日,[<Web 前端开发人员和设计师必读文章>系列十二]和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HT ...
随机推荐
- dependencies、devDependencies、webpack打包 的区别与联系
为什么要在dependencies.devDependencies中声明依赖? 答:保证任何人在(或者你自己在其他设备上)对这个项目进行修改(开发)时,通过npm install就能获取同样的开发环境 ...
- elasticsearch 基础 语法总结
1. es 使用 restful 风格的 api 备注: es 的 api 格式 基本是这个样 请求方式 /索引名/文档名/id?参数 ,但是 还有 很多不是这样的 请求,比如 ...
- 大数据离线分析平台 JavaSDK数据收集引擎编写
JavaSDK设计规则 JavaSDK提供两个事件触发方法,分别为onChargeSuccess和onChargeRefund.我们在java sdk中通过一个单独的线程来发送线程数据,这样可以减少对 ...
- Hadoop Mapreduce 案例 wordcount+统计手机流量使用情况
mapreduce设计思想 概念:它是一个分布式并行计算的应用框架它提供相应简单的api模型,我们只需按照这些模型规则编写程序,即可实现"分布式并行计算"的功能. 案例一:word ...
- c#:$用法
为什么会出现$符号,c#6.0才出现的新特性 var s = string.Fromat("{0}+{1}={2}",12,23,12+23) 用起来必须输入string.From ...
- C++用 _findfirst 和 _findnext 查找文件
一.这两个函数均在io.h里面. 二.首先了解一下一个文件结构体: struct _finddata_t { unsigned attrib; time_t tim ...
- 关于AXI_Quad_SPI的寄存器配置
关于AXI_Quad_SPI的寄存器配置 1.核初始化配置 首先是: 40:0000_000A 1C:8000_0000 28:0000_0004 2.命令与dummy_data 60:000001E ...
- linux(ubuntu)下安装phantomjs
1.安装phantomjs ubuntu下sudo apt-get install phantomjs下载的不能用 —-下载程序文件 到官网下载 1.安装phantomjs —-下载程序文件 wget ...
- 什么是词性标注(POS tagging)
词性标注也叫词类标注,POS tagging是part-of-speech tagging的缩写. 维基百科对POS Tagging的定义: In corpus linguistics, part-o ...
- C#批量更新mongodb符合条件的数据
默认情况下只会更新匹配的第一条 jingjiaanalyurl.Update(Query.EQ("auid", jingjiaitem.id), Update.Set(" ...