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 ...
随机推荐
- BizTalk动手实验(六)Orchestration开发
1 课程简介 通过本课程熟悉Orchestration的相关开发与测试技术 2 准备工作 熟悉XML.XML Schema.XSLT等相关XML开发技术 熟悉.NET相关开发技术 新建BizTalk空 ...
- Android课程---用进度条改变图片透明度
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...
- IOS第11天(1:UIPickerView点餐)
UIPickerView #import "ViewController.h" @interface ViewController ()<UIPickerViewDataSo ...
- A Great Alchemist
Time limit : 2sec / Stack limit : 256MB / Memory limit : 256MB ProblemCarol is a great alchemist. In ...
- 在VPS上部署fq环境
VPS购买地址 1. 由于我选择的是CentOS 6 x86版本, 需要安装如下准备工具: git, gcc-c++, zlib-devel, openssl-devel, pcre-devel 2. ...
- 【iCore3 双核心板_FPGA】实验十九:基于双口RAM的ARM+FPGA数据存取实验
实验指导书及代码包下载: http://pan.baidu.com/s/1pLReIc7 iCore3 购买链接: https://item.taobao.com/item.htm?id=524229 ...
- DDoS deflate+iptables防御轻量级ddos攻击
一.查看攻击者ip #netstat -ntu | awk '{print $5}' | cut -d: -f1 | sort | uniq -c | sort -n 二.安装ddos deflate ...
- IIS应用程序池最大进程数设置
1.当工作进程数>1时,如果有多个连接请求就会启动多个工作进程实例来处理,所启动的最多工作进程数就是你设置的最大进程数,后续更多的连接请求会循环的发送至不同的工作进程来处理.每个工作进程都能承担 ...
- C输入输出函数与缓冲区
#转 对C语言输入输出流和缓冲区的深入理解C语言缓冲区(缓存)详解缓冲区又称为缓存,它是内存空间的一部分.也就是说,在内存空间中预留了一定的存储空间,这些存储空间用来缓冲输入或输出的数据,这部分预留的 ...
- home page
How To Set Your Home Page Step 1 – Navigate to Settings > Reading tab. Step 2 – Select A Static P ...