初学CSS3的第一天，虽然之前有接触过CSS，不过好像是CSS2，我也上网了解了一下CSS3，新增了很多强大的元素，也让我更有兴趣去学习了。

CSS（Cascading Style Sheets） 层叠样式表

不同浏览器可能需要不同的前缀，这也是为了考虑可以更好的向前兼容

　　　前缀 　　　　浏览器
　　-webkit　 　　chrome和safari
　　-moz 　　　　firefox
　　-ms 　　　　　IE
　　 -o 　　　　opera

CSS最重要的就是将表现与结构分离，提高代码的可读性，更方便的修改和查阅代码。

CSS的语法结构：

　　selector{Property：Value;}

　　选择符　　属性　　　　值

例子：

  1. 　　body{background-color:red;}
  2.  
  3. 　　h1{font-size:12px;}

引入CSS的方法有三种：

　　1.行内引入:

　　　　

  1.     <body style="background-color:red;"></body>
  2.  
  3. 　　 <h1 style="font-size:12px;"></h1>

　　2.页内引入：

　　　　

  1. <head>
  2.       <title></title>
  3.         <style>
  4.                 body{
  5.                     background-color:red;
  6.                }
  7.                 h1{
  8.                     font-size:12px;
  9.                 }
  10.          </style>
  11. </head>

　　3.外部样式表：

　　　　style.css:　　

  1. body {
  2.       background-color:#cccccc;
  3.   }
  1.  h1{
  2.        font-size:12px;
  3.   }

　　　　index.html:

  1. <head>
  2.         <title></title>
  3.         <link rel="stylesheet" type="text/css" href="style.css" />
  4. </head>

三种引入方法的优先级比较：

　　就近原则：行内引入>页内引入>页外引入

注释方法：

　　/*注释内容*/

　　

CSS3的chapter1的更多相关文章

  1. 使用 HTML5、CSS3 和 MathML 在 EPUB 3 中制作版式丰富的出版物

    探索用于高级排版和印刷的新一代开放电子书标准 EPUB 3.0 是最新的行业标准 XML 电子书格式,它采用了 HTML5 和 CSS3,因而融入了现代 Web 技术.它重点关注 XML 驱动的工具包 ...

  2. 纯CSS3实现的一些酷炫效果

    之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...

  3. CSS3 border-radius边框圆角

    在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 ...

  4. CSS3 3D立方体效果－transform也不过如此

    CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...

  5. 三分钟学会用 js + css3 打造酷炫3D相册

    之前发过该文,后来不知怎么回事不见了,现在重新发一下. 中秋主题的3D旋转相册 如图,这是通过Javascript和css3来实现的.整个案例只有不到80行代码,我希望通过这个案例,让正处于迷茫期的j ...

  6. 使用CSS3实现一个3D相册

    CSS3系列我已经写过两篇文章,感兴趣的同学可以先看一下CSS3初体验之奇技淫巧,CSS3 3D立方体效果-transform也不过如此 第一篇主要列出了一些常用或经典的CSS3技巧和方法:第二篇是一 ...

  7. Web大前端时代之：HTML5+CSS3入门系列

    准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...

  8. 07. Web大前端时代之：HTML5+CSS3入门系列~H5 地理位置

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...

  9. 前端制作动画的几种方式（css3，js）

    制作动态的网页是是前端工程师必备的技能,很好的实现动画能够极大的提高用户体验,增强交互效果,那么动画有多少实现方式,一直对此有选择恐惧症的我就总结一下,以便在开发的时候选择最好的实现方式. 1.css ...

随机推荐

  1. Python的全局变量

    应该尽量避免使用全局变量.不同的模块都可以自由的访问全局变量,可能会导致全局变量的不可预知性.对全局变量,如果程序员甲修改了_a的值,程序员乙同时也要使用_a,这时可能导致程序中的错误.这种错误是很难 ...

  2. 杭电ACM 1013 Digital Root

    #include<stdio.h>#include<stdlib.h>#include<string.h>int main(){char s[100000];int ...

  3. IOS第12天(4,作业弹出键盘上加上(xib)view的处理，时间选择，代理模式使用，键盘的监听 )

    *****HMViewController.m #import "HMViewController.h" #import "HMKeyboardTool.h" ...

  4. Kinect 骨骼追踪对象选择

    默认情况下,骨骼追踪引擎会对视野内的所有活动的游戏者进行追踪.但只会选择两个可能的游戏者产生骨骼数据,大多数情况下,这个选择过程不确定.如果要自己选择追踪对象,需要使用AppChoosesSkelet ...

  5. centos7 挂载数据盘

    centos 挂载数据盘1.运行 fdisk -l 命令查看数据盘.注意:在没有分区和格式化数据盘之前,使用 df -h 命令是无法看到数据盘的. 如果执行了 fdisk -l 命令后,没有发现 /d ...

  6. 初探XML

    1.XML是什么? XML 指可扩展标记语言(EXtensible Markup Language) XML 是一种标记语言,很类似 HTML XML 的设计宗旨是传输数据,而非显示数据 XML 标签 ...

  7. Java中的virtual method

    今天看jcvm的标准的 时候,看到有一个virtual method,感觉很疑惑,以前看Java的时候并没有发现有这类方法. 百度.Google了一下,才发现,Java中普通方法就是virtual m ...

  8. git pull all braches

    控制台下执行如下: git branch -r | grep -v '\->' | while read remote; do git branch --track "${remote ...

  9. objective c实现配置文件+反射

    1. 先写plist配置文件 plist写到resouce里面去 通过NSBundle把数据取plist读出来 2. 通过NSClassFromString创建类 NSClassFromString ...

  10. Android动画的实现原理 .

    1.动画运行模式 独行模式 中断模式 2.Animation类 每个动画都重载了父类的applyTransformation方法这个方法的主要作用是把一些属性组装成一个Transformation类, ...