CSS3的chapter1
初学CSS3的第一天,虽然之前有接触过CSS,不过好像是CSS2,我也上网了解了一下CSS3,新增了很多强大的元素,也让我更有兴趣去学习了。
CSS(Cascading Style Sheets) 层叠样式表
不同浏览器可能需要不同的前缀,这也是为了考虑可以更好的向前兼容
| 前缀 | 浏览器 |
| -webkit | chrome和safari |
| -moz | firefox |
| -ms | IE |
| -o | opera |
CSS最重要的就是将表现与结构分离,提高代码的可读性,更方便的修改和查阅代码。
CSS的语法结构:
selector{Property:Value;}
选择符 属性 值
例子:
body{background-color:red;}
h1{font-size:12px;}
引入CSS的方法有三种:
1.行内引入:
<body style="background-color:red;"></body> <h1 style="font-size:12px;"></h1>
2.页内引入:
<head>
<title></title>
<style>
body{
background-color:red;
}
h1{
font-size:12px;
}
</style>
</head>
3.外部样式表:
style.css:
body {
background-color:#cccccc;
}
h1{
font-size:12px;
}
index.html:
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
三种引入方法的优先级比较:
就近原则:行内引入>页内引入>页外引入
注释方法:
/*注释内容*/
CSS3的chapter1的更多相关文章
- 使用 HTML5、CSS3 和 MathML 在 EPUB 3 中制作版式丰富的出版物
探索用于高级排版和印刷的新一代开放电子书标准 EPUB 3.0 是最新的行业标准 XML 电子书格式,它采用了 HTML5 和 CSS3,因而融入了现代 Web 技术.它重点关注 XML 驱动的工具包 ...
- 纯CSS3实现的一些酷炫效果
之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...
- CSS3 border-radius边框圆角
在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 ...
- CSS3 3D立方体效果-transform也不过如此
CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...
- 三分钟学会用 js + css3 打造酷炫3D相册
之前发过该文,后来不知怎么回事不见了,现在重新发一下. 中秋主题的3D旋转相册 如图,这是通过Javascript和css3来实现的.整个案例只有不到80行代码,我希望通过这个案例,让正处于迷茫期的j ...
- 使用CSS3实现一个3D相册
CSS3系列我已经写过两篇文章,感兴趣的同学可以先看一下CSS3初体验之奇技淫巧,CSS3 3D立方体效果-transform也不过如此 第一篇主要列出了一些常用或经典的CSS3技巧和方法:第二篇是一 ...
- Web大前端时代之:HTML5+CSS3入门系列
准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...
- 07. Web大前端时代之:HTML5+CSS3入门系列~H5 地理位置
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...
- 前端制作动画的几种方式(css3,js)
制作动态的网页是是前端工程师必备的技能,很好的实现动画能够极大的提高用户体验,增强交互效果,那么动画有多少实现方式,一直对此有选择恐惧症的我就总结一下,以便在开发的时候选择最好的实现方式. 1.css ...
随机推荐
- SQL Server 触发器(转)
触发器是一种特殊类型的存储过程,它不同于之前的我们介绍的存储过程.触发器主要是通过事件进行触发被自动调用执行的.而存储过程可以通过存储过程的名称被调用. Ø 什么是触发器 触发器对表进行插入.更新.删 ...
- Spinner的深入学习
简介: spinner是一个列表选择框,会在用户选择后,展示一个列表供用户进行选择.Spinner是ViewGroup的间接子类,它和其他的Android控件一样,数据需要使用Adapter进行封装. ...
- EmguCV 简单图形绘制
一.圆 public static void cvCircle( IntPtr img, System.Drawing.Point center, //Center of the circle int ...
- HTTP常见错误代码总结
1.HTTP 401 用户验证失败.不允许继续访问 2.HTTP 403 禁止访问,访问web应用,没有指定要访问页面的名称 3.HTTP 404 请求的文件找不到,一般情况是在浏览器输入地址时,输入 ...
- JavaDate类
在JDK1.0中,Date类是唯一的一个代表时间的类,但是由于Date类不便于实现国际化,所以从JDK1.1版本开始,推荐使用Calendar类进行时间和日期处理.这里简单介绍一下Date类的使用. ...
- HDU 5919 Sequence II(主席树+逆序思想)
Sequence II Time Limit: 9000/4500 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others) To ...
- php Output Control 函数 ob_系列函数详解
<?php /* * 输出缓冲控制 * * flush — 刷新输出缓冲 ob_clean — 清空(擦掉)输出缓冲区 ob_end_clean — 清空(擦除)缓冲区并关闭输出缓冲 ob_en ...
- Python开发【第七章】:Python异常处理
一.异常处理 1.异常基础 在编程过程中为了增加友好性,在程序出现bug时一般不会将错误信息显示给用户,而是现实一个提示的页面,通俗来说就是不让用户看见大黄页!!! #异常处理 list = [&qu ...
- spark的安装
官方安装地址:http://spark.apache.org/docs/latest/spark-standalone.html 准备 1.三台机器(m2.m3.m4) 2.m2位master, m3 ...
- chrome浏览器不允许记忆登录账户的方法
autocomplete方法 https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_ ...