1.CSS规则由两部分构成，即选择器和声明器
 　　声明必须放在{}中并且声明可以是一条或者多条
 　　每条声明由一个属性和值构成，属性和值用冒号分开，每条语句用英文冒号分开

　　注意:
  　　　　css的最后一条声明，用以结束的“;”可写可不写，但是基于W3c标准规范思考建议最后一条声明的结束“；”都要写上

2.行内样式
 　　直接在style属性设置css样式style属性提供了一种改变所有的HTML元素样式的通用方法
    　　语法:

<h1 style="color:red">style属性的应用</h1>
<p style="font-size:14px;color:green;">直接在HTML标签设置样式</p>

　　

3.内部样式
　　 把css代码写在<head>的<style>标签中与HTMl内部位于同一个HTML文件中，这就是内部样式
4.外部样式
 　　就是把css代码保存为一个单独样式表文件，文件扩展名位.class在页面引用外部样式即可
 　　HTML文件外部样式有两种方式分别是链接式和导入式
 　　1)链接式:

 <head>
 <link href="...css"rel="stylesheet"type="text/css"
 </head>
  <!--
      rel="stylesheet"是指在本页面使用这个外部样式
      type=text/css是指文件的类型是样式表文本
      href="...css"文件所在位置
    -->

2)导入外部样式表
 　　 在HTML网页使用@import导入外部样式导入样式必须放在<style>标签中而<style>标签必须放在<head>标签中

    <head>
     <style>
         @import url(".....css")
     </style>
    </head>
 <!--其中@import导入文件，前面必须放一个符号，url(".....css")表示样式文件位置-->

3)链接式和导入式区别
  　　1.<link/>标签属于XHTML范畴中而@import是css2.1中特有的
 　　 2.使用，<link/>的链接css客户端浏览网页时先将css网页加载到网页中，在进行编译显示，所以这种情况下显示出的网页与用户预期的一样即使网速再慢也是一样的效果
  　　3.使用@import导入css文件客户端在浏览网页时先将HTML结构呈现出来再把外部css文件加载到网页中当然最终与<link/>链接效果一样只是当网速较慢时会先显示没有css统一布局的HTML网页，这样会给用户不好的感觉这也是目前大多数网站用连接外部样式表的主要原因
5.样式的优先级：<就近原则>

行内元素>内部样式表>外部样式表

注：代码是逐条执行，如果内部样式比外部样式先声明，则外部样式具有优先级
6.css3的选择器
 　　标签选择器 类选择器 和id选择器
 1)类选择器

类选择器即<即标签名 class"类名称">标签内容</标签名>
 

.green{
 font-size:20px;
 color:red;
 }
 <p class="green">hhhh</p>

2)id选择器

 #green{
 font-size:20px;
 color:red;
 }
 <p id="green">hhhh</p>

注意:id选择器只能使用一次，也就是说在同一页面同一个id属性只能设置一次；而类选择器可以在页面使用多次

3)选择器的优先级

　　id选择器>class类选择器>标签选择器
7.css3高级选择器
 1. 层次选择器
  　　1）E F  后代选择器  选择匹配的F元素，且匹配的F元素被包含在匹配的E元素中
 　　2） E>F  子选择器   选择匹配的F元素，且匹配的F元素是匹配E元素的子元素
 　　3） E+F  相邻兄弟选择器  选择匹配的F元素，且匹配的F元素仅位于匹配的E元素后面
  　　4）E~F  通用兄弟选择器  选择匹配的F元素，且匹配的E元素后所有匹配的F元素

注：1）通用兄弟选择器选中的是E元素相邻的后面兄弟元素下，是一个或多个元素；
 　　2）相邻兄弟选中的是与E元素仅挨的F元素，其中选中的仅是一个元素

8.结构伪类选择器

　　1）E：first-child   作为父元素的第一个子元素的元素E
　　 2） E：last-child   作为父元素的最后一个子元素的元素E
 　　3）E F：nth-child（n）  选择父级元素E 的第n个元素F（n可以是1/2/3）关键字为even  odd
 　　4）E:first-of-type   选择父级元素具有指定类型的第一个E元素
 　　5）E:last-of-type   选择父级元素具有指定类型的最后一个E元素
 　　6）E F:nth-of-type(n)  选择父元素内具有指定类型的第n个F元素

注：E F：nth-child（n）和 E F:nth-of-type(n)使用时记住以下关键点：

 　　　　　1）E F：nth-child（n）在父级里从第一个元素开始查找，不分类型
 　　　　　　2）E F:nth-of-type(n)在父级里先看类型再看位置

9.属性选择器
 　　1）E[attr]    相匹配具有属性attr的E元素
 　　2）E[attr=val]   选择匹配具有属性attr的E元素 并且属性值位val（其中Val区分大小写）
 　　3）E[attr^=val]   选择匹配元素E，且E元素定义了属性attr，其中属性值以val开头的任意字符串
　　 4）E[attr$=val]   选择匹配元素E，且E元素定义了属性attr，其中属性值以val结尾的任意字符串
 　　5）E[attr*=val]   选择匹配元素E，且E元素定义了属性attr，其中包含了"val"话句话说，字符串val与属性值中的任意位置相匹配

初识CSS3的更多相关文章

  1. 【CSS3】 - 初识CSS3

    .navdemo{ width:560px; height: 50px; font:bold 0/50px Arial; text-align:center; margin:40px auto 0; ...

  2. 初识 css3中counter属性

    最近看到counter属性,好奇是做什么用的,于是去查了查. 1.简单介绍 counter是为css中插入计数器.[注明]在CSS2.1中counter()只能被使用在content属性上.关于浏览器 ...

  3. 初识CSS3之媒体查询（2015年05月31日）

    一.什么是媒体查询 媒体查询是面向不同设备提供不同样式的一种实现方式,它可以为每种类型的用户提供最佳的体验,也是响应式设计的实现方式. 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各 ...

  4. 第四章：初识CSS3

    1.CSS规则由两部分构成,即选择器和声明器 声明必须放在{}中并且声明可以是一条或者多条 每条声明由一个属性和值构成,属性和值用冒号分开,每条语句用英文冒号分开 注意: css的最后一条声明,用以结 ...

  5. 第1章 初识CSS3

    什么是CSS3? CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能. 目前主流浏览器chrome.safari.firefox.opera.甚至360都已经支 ...

  6. 初识css3 3d动画效果

    (先看我博客右上角的3d盒子动画效果,目前没做兼容处理,最好最新的chrome看)无意间看到网上css3写的3d动画效果,实在炫酷,以前理解为需要js去计算去写,没想到css直接可以实现.于是开始研究 ...

  7. 十天精通CSS3学习笔记 part1

    http://www.imooc.com/learn/33 第1章 初识CSS3 什么是CSS3? CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能. 目前主 ...

  8. 十天精通CSS3

    课程地址:http://www.imooc.com/learn/33 第1章 初识CSS3 CSS3课程列出第一站,先带领大家进入CSS3的世界,探索CSS3的魅力! 你做好准备了吗? 第2章 边框 ...

  9. HTML语言和CSS开发

    第一张 HTML基础1.HTML:超文本标记语言(它除了文字,还能写图片.视频.音频.交互),他不是编程语言,它是标记语言2. <!DOCTYPE html> HTML5版本申明 < ...

随机推荐

  1. 前端测试框架Jest系列教程 -- Global Functions（全局函数）

    写在前面: Jest中定义了很多全局性的Function供我们使用,我们不必再去引用别的包来去实现类似的功能,下面将列举Jest中实现的全局函数. Jest Global Functions afte ...

  2. RxAndroid中observable的基本使用和表单校验操作

    RxAndroid 响应式编程 类似于监听-观察者模式 在观察者模式中,你的对象需要实现 RxJava 中的两个关键接口:Observable 和 Observer.当 Observable 的状态改 ...

  3. c++用类写栈和队列的简单基本操作（实验）

    继续更文.这次用类来写栈和队列,都是用数组模拟的: 以下是栈和队列的定义: 然后分别是栈和队列的类: 完整代码贴上: 栈 //使用类来定义栈 class ZHAN { public: STACK s; ...

  4. Python爬虫(十五)_案例：使用bs4的爬虫

    本章将从Python案例讲起:所使用bs4做一个简单的爬虫案例,更多内容请参考:Python学习指南 案例:使用BeautifulSoup的爬虫 我们已腾讯社招页面来做演示:http://hr.ten ...

  5. 《Qt on Android核心编程》介绍

    <Qt on Android核心编程>最终尘埃落定.付梓印刷了. 2014-11-02更新:china-pub的预售链接出来了.折扣非常低哦. 封面 看看封面的效果吧,历经几版,最终就成了 ...

  6. B. Simple Game（ Codeforces Round #316 (Div. 2) 简单题）

    B. Simple Game time limit per test 1 second memory limit per test 256 megabytes input standard input ...

  7. Hibernate学习笔记(五) — 多对多关系映射

    多对多关系映射 多对多建立关系相当于在第三张表中插入一行数据 多对多解除关系相当于在第三张表中删除一行数据 多对多改动关系相当于在第三张表中先删除后添加 多对多谁维护效率都一样.看需求 在实际开发过程 ...

  8. Android实战简易教程-第三十四枪（基于ViewPager和FragmentPagerAdapter实现滑动通用Tab）

    上一段时间写过一篇文章<基于ViewPager实现微信页面切换效果> 里面实现了相似微信Tab的页面.可是这样的实现方法有个问题.就是以后全部的代码逻辑都必须在MainActivity中实 ...

  9. sharepoint 2013 使用SharePoint powershell 2013更改搜索server方法

    $hostA = Get-SPEnterpriseSearchServiceInstance -Identity "DevSearch2013" Start-SPEnterpris ...

  10. 自学Zabbix3.8-可视化Visualisation

    随着大量数据流入Zabbix,如果用户能够查看正在发生的事情,而不仅仅是数字,那么对于用户来说,这就变得容易得多了.这就是图的所在. 图允许快速地掌握数据流,关联问题,发现什么时候开始,或者做什么事情 ...