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预习笔记 一: 1: 什么是CSS? 全称是层叠样式表;/通常又称为风格样式表,.他是用来进行网页风格设计的; 2:CSS的优势: 1>内容以表现分离,即使用u前面学习的HT ...

  2. 学习笔记 第十四章 使用CSS3动画

    第14章   使用CSS3动画 [学习重点] 设计2D动画 设计3D动画 设计过渡动画 设计帧动画 能够使用CSS3动画功能设计页面特效样式 14.1  设计2D动画 CSS2D Transform表 ...

  3. 第1章 初识CSS3

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

  4. CSS3秘笈复习：十三章&十四章&十五章&十六章&十七章

    第十三章 1.在使用浮动时,源代码的顺序非常重要.浮动元素的HTML必须处在要包围它的元素的HTML之前. 2.清楚浮动: (1).在外围div的底部添加一个清除元素:clear属性可以防止元素包围浮 ...

  5. CSS3秘笈：第四章

    第四章  继承 1.继承:应用在一个标签上的CSS样式被传到其内嵌标签上的过程. 2.继承的局限性: (1)有些属性不会被继承,如:CSS. (2)以下情况不会严格执行继承: ·影响网页元素位置的属性 ...

  6. jQuery系列 第四章 jQuery框架的选择器

    第四章 jQuery框架的选择器 4.1 jQuery选择器说明 jQuery 最核心的组成部分就是选择器引擎.它完全继承了 CSS 的风格,可以对 DOM 元 素的标签名.属性名.状态等进行快速准确 ...

  7. Python--Redis实战：第四章：数据安全与性能保障：第7节：非事务型流水线

    之前章节首次介绍multi和exec的时候讨论过它们的”事务“性质:被multi和exec包裹的命令在执行时不会被其他客户端打扰.而使用事务的其中一个好处就是底层的客户端会通过使用流水线来提高事务执行 ...

  8. 第9章 初识STM32固件库

    第9章     初识STM32固件库 全套200集视频教程和1000页PDF教程请到秉火论坛下载:www.firebbs.cn 野火视频教程优酷观看网址:http://i.youku.com/fire ...

  9. 第9章 初识STM32固件库—零死角玩转STM32-F429系列

    第9章     初识STM32固件库 全套200集视频教程和1000页PDF教程请到秉火论坛下载:www.firebbs.cn 野火视频教程优酷观看网址:http://i.youku.com/fire ...

  10. 【CSS3】 - 初识CSS3

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

随机推荐

  1. Java知多少（63）线程间通信

    上述例题无条件的阻塞了其他线程异步访问某个方法.Java对象中隐式管程的应用是很强大的,但是你可以通过进程间通信达到更微妙的境界.这在Java中是尤为简单的. 像前面所讨论过的,多线程通过把任务分成离 ...

  2. Java知多少（79）哈希表及其应用

    哈希表也称为散列表,是用来存储群体对象的集合类结构. 什么是哈希表 数组和向量都可以存储对象,但对象的存储位置是随机的,也就是说对象本身与其存储位置之间没有必然的联系.当要查找一个对象时,只能以某种顺 ...

  3. C++ 智能指针六

    /* 智能指针unique_ptr */ #include <iostream> #include <string> #include <memory> #incl ...

  4. CLOS网络的无阻塞条件

    交换单元及网络 模拟信号数字化和时分复用基础 交换单元模型基本交换单元 交换网络 2.1模拟信号数字化和分时复用基础 模拟信号是指在是和幅度数值上连续变化的信号 数字信号是指在时间和幅度取值上离散的编 ...

  5. Nginx系列二：（Nginx Rewrite 规则、Nginx 防盗链、Nginx 动静分离、Nginx+keepalived 实现高可用）

    一.Nginx Rewrite 规则 1. Nginx rewrite规则 Rewrite规则含义就是某个URL重写成特定的URL(类似于Redirect),从某种意义上说为了美观或者对搜索引擎友好, ...

  6. Provided id of the wrong type for class pojo.Books. Expected: class java.lang.Integer, got class java.lang.Long

    log4j:WARN No appenders could be found for logger (org.hibernate.cfg.Environment). log4j:WARN Please ...

  7. 创建预编译头 Debug 正常 Release Link Error:预编译头已存在,使用第一个 PCH

    创建预编译头 Debug 正常 Release Link Error Main.obj : error LNK2005: ___@@_PchSym_@00@UmfilkilqUdrmzkkUkilqU ...

  8. EGit系列第三篇——远程提交代码

    接着上篇,把本地项目提交一次才能Pull,为什么要Pull而不直接Remote Push呢,因为本地和远程仓库内容不一样(通常在远程仓库第一次新建项目会带一个README.md), 要先把远程仓库的东 ...

  9. Arduino基本数据类型

    基本数据类型简介 常见的Arduino是基于ATmega的8位 AVR单片机,例如Arduino UNO ,Arduino Nano,Arduino mega2560等.还有高级点 32位的,如Ard ...

  10. 在移动端如何用swiper实现导航栏效果

    我们在写移动端的时候会有滑动和点击导航后滑动到目标页面功能:而这个功能如果自己写的话会很麻烦,所以我在这推荐一下swiper这个插件. 其实swiper中的官网中也有这种功能的实现,但是我认为是有点麻 ...