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. 数据中心 CLOS 架构

    1.数据中心网络架构挑战 随着技术的发展,数据中心的规模越来越大,一个数据中心的服务器容量从几年前的几千台服务器发展到今天的几万甚至几十万台.为了降低网络建设和运维成本,数据中心网络的设计者们也竭力将 ...

  2. 大量删除MySQL中的数据

    出现的背景: 公司做了一个redis相关的项目,其中mysql存储了很多统计数据.比如客户端上报的数据,redis实例的数据,应用的数据,机器的数据等.每天都在上报,采集,由于没有定期删除,数据大量累 ...

  3. SQLServer数据库降级方法详解

    右击数据库,有一个任务选项--扩展里面有一个生成脚本 设置脚本选项 高级 最下方"要编写的脚本类型" 选择 框架及数据 完成

  4. 向json中添加新的熟悉或对象 Add new attribute (element) to JSON object using JavaScript

    How do I add new attribute (element) to JSON object using JavaScript? JSON stands for JavaScript Obj ...

  5. Dapper Extensions Change Schema

    Dapper Extensions Change Schema You can use the AutoClassMapper to assign a new schema to your model ...

  6. [Node.js] 01 - How to learn node.js

    基本概念 链接:https://www.zhihu.com/question/47244505/answer/105026648 链接:How to decide when to use Node.j ...

  7. zabbix参考文档

    http://www.zsythink.net/archives/category/%E8%BF%90%E7%BB%B4%E7%9B%B8%E5%85%B3/zabbix/

  8. POST 发送HTTP请求入参为:String url, Map<String, Object> propsMap

    /** * 发送HTTP请求 * * @param url * @param propsMap * 发送的参数 */ public static String httpSend(String url, ...

  9. 深入理解 Java 虚拟机之学习笔记(2)

    本节介绍 Java堆的OutOfMemoryError测试 Eclipse Memory Analyzer分析内存溢出 虚拟机栈和本地方法栈StackOverflowError测试 方法区和运行时常量 ...

  10. Java Debugging with Eclipse - Tutorial

    1.1. What is debugging? Debugging allows you to run a program interactively while watching the sourc ...