这是我的第二篇博客，H5教程CSS入门，适合刚开始学习H5的新手，让我们共同进步。

1.  CSS简介

1.1  CSS是什么？

　　CSS称为样式层叠表，是用于增强或控制网页样式，并允许将样式信息与网页内容分离的一种标记性语言。

1.2  我们为什么要使用CSS？

　　1.为了方便样式的复用，方便网站后期维护。

　　2.为了达到页面的精准控制，实现精美复杂的页面。

简单点说，CSS就是为了让你的网页更加好看。前面学的HTML相当于你买了一个毛坯房，虽然结构有了，但是实在是太难看了，不能住人，所以你就需要CSS来给你装修一下。

2.CSS基本语法

2.1   CSS的三种链接方式

  1. <div style="all: inherit;"></div>

2.1.1行内样式表

　　1.将CSS样式与HTML代码，完全糅杂在一起，不符合W3C关于"内容与表现分离"的基本规范，不利于后期维护。
　　2.优先级最高，但是不推荐使用。

2.1.2内部样式表

  1.     <style type="text/css"></style>

　　1.一定程度的将CSS样式与HTML代码分离，但是分离不够彻底，无法实现样式复用。
　　2.优先级低于行内样式表。

  1. <link rel="stylesheet" type="text/css" href="02.应用CSS的三种方法.css"/>

2.1.3外部样式表

　　1.实现了CSS样式与HTML代码的彻底的分离，符合W3C的规范，方便样式复用与维护。
　　2.优先级低于内部样式表。
　　3.以后开发推荐使用。

2.1.4扩展阅读（导入外部样式表的另一种方式）

  1. <style type="text/css">
  2.             @import url("02.");
  3.         </style>

【两种导入方法的区别】
　　1.link标签是标准的HTML标签，而import不是。
　　2.link可以连接各种样式的文件，而import只能导入CSS文件。
　　3.link使用的是链接的方式，相当于HTML与CSS文件的桥梁。
　　　　import使用的是导入的方式，会在文档加载时，将CSS的代码导入到HTML中。
　　4.link在网页边加载的时候边链接CSS文件，而import会在网页完全加载之后，在导入CSS文件。

2.2CSS常用选择器

2.2.1标签选择器

　　1.写法：HTML标签名{样式属性：样式属性值；--}
　　2.作用选中页面中所有对应的标签。

2.2.2类选择器

　　1.写法：.选择器名称{}
　　　　调用：在需要修改样式的标签上，使用class="选择器名称"，调用对应选择器。
　　2.作用：修改所有调用选择器的标签。
　　3.优先级高于标签选择器。

2.2.3ID选择器

　　1.写法：#选择器名称{}
　　　　调用：在需要修改样式的标签上，使用id="选择器名称"，调用对应选择器。
　　2.ID是唯一的，同一页面只能有一个ID
　　3.优先级大于class选择器。

2.2.4通用选择器

　　1.写法：*{}
　　2.作用：选中页面中所有标签。
　　3.优先级最低。

2.2.5后代选择器

　　1.写法：选择器1 选择器2 选择器3...{}（中间加空格）
　　　　例子：div .li{}需满足，div里面的class="li" 的元素。可以是子代，也可以是后代。

2.2.6子代选择器

　　1.写法：选择器1>选择器2>选择器3...{}（大于号隔开）
　　　　例如：div>ul{}则ul必须是div的直接子代。
　　2.优先级：近者优先，越精确越优先。

2.2.7交集选择器

　　1.写法：选择器1选择器2...{}（中间什么都不写）
　　　　例如：.li#li{}元素必须同时具备class="li",id="li"才能生效。

2.2.8并集选择器

　　　1.写法：选择器1,选择器2...{}（用逗号隔开）
　　　　例如：.li,#li{}元素只要具备class="li"或者id="li"就能生效。

2.2.9伪类选择器

　　1.写法：选择器名称：伪类状态{}
　　2.常用伪类状态
　　　　link：未访问状态
　　　　visited：已访问状态
　　　　hover：鼠标之上状态
　　　　actived：激活选定状态
　　　　focus：获得焦点（input常用）
　　3.超链接多种伪类共存时顺序：
　　　　link（visited）hover actived
　　4.使两个控件同时对鼠标事件做出反应的写法：
　　共同父容器选择器：伪类状态 控件选择器{
　　　　　　　　　　　　　　　　　　　　　　对应控件事件}

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>CSS常用选择器</title>
  6.  
  7.         <!--页面中插入CSS的写法，需使用style标签包裹。type="text/css"-->
  8.         <style type="text/css">
  9.  
  10.             li{
  11.                 color: red;
  12.             }
  13.             /*【标签选择器】
  14.              * 1.写法：HTML标签名{样式属性：样式属性值；--}
  15.              * 2.作用选中页面中所有对应的标签。*/
  16.             .li{
  17.                 color: orange;
  18.             }
  19.             /*【类选择器】
  20.              * 1.写法：.选择器名称{}
  21.              *         调用：在需要修改样式的标签上，使用class="选择器名称"，调用对应选择器。
  22.              * 2.作用：修改所有调用选择器的标签。
  23.              * 3.优先级高于标签选择器。*/
  24.             #li{
  25.                 color: yellow;
  26.             }
  27.             /** 【ID选择器】
  28.              * 1.写法：#选择器名称{}
  29.              *         调用：在需要修改样式的标签上，使用id="选择器名称"，调用对应选择器。
  30.              * 2.ID是唯一的，同一页面只能有一个ID
  31.              * 3.优先级大于class选择器。*/
  32.             *{
  33.                 font-size: 20px;
  34.                 background-color: aqua;
  35.             }
  36.             /*【通用选择器】
  37.              * 1.写法：*{}
  38.              * 2.作用：选中页面中所有标签。
  39.              * 3.优先级最低。*/
  40.             div li{
  41.                 color: green;
  42.             }
  43.             /*【后代选择器】
  44.              * 1.写法：选择器1 选择器2 选择器3...{}
  45.              *             例子：div .li{}需满足，div里面的class="li" 的元素。可以是子代，也可以是后代。
  46.              * 【子代选择器】
  47.              * 1.写法：选择器1>选择器2>选择器3...{}
  48.              *         例如：div>ul{}则ul必须是div的直接子代。
  49.              * 2.优先级：近者优先，越精确越优先。
  50.              * 【伪类选择器】
  51.              *
  52.              *
  53.              * */
  54.             .li#li{
  55.  
  56.                 color: blue;
  57.             }
  58.             .li,#li{
  59.                 color: darkviolet;
  60.             }
  61.             a:link{
  62.                 color: black;
  63.             }
  64.             a:visited{
  65.                 color: blue;
  66.             }
  67.             a:hover{
  68.                 color: red;
  69.             }
  70.             a:active{
  71.                 color: yellow;
  72.             }
  73.             input:hover{
  74.                 color: red;
  75.             }
  76.             input:active{
  77.                 color: blue;
  78.             }
  79.             input:focus{
  80.                 color: yellow;
  81.             }
  82.  
  83.         </style>
  84.     </head>
  85.     <body>
  86.         <div>
  87.             <ul>
  88.                 <li class="li" id="li">列表第一项</li>
  89.                 <li>列表第二项</li>
  90.                 <li class="li">列表第三项</li>
  91.                 <li id="li">列表第四项</li>
  92.             </ul>
  93.         </div>
  94.             <ul>
  95.                 <li class="li">列表第一项</li>
  96.                 <li>列表第二项</li>
  97.                 <li class="li">列表第三项</li>
  98.                 <li id="li">列表第四项</li>
  99.             </ul>
  100.             <a href="03.CSS常用文本属性.html" target="_blank"> This is a chaolianjie</a>
  101.             <input type="text" name="text" id="text" />
  102.     </body>
  103. </html>

【扩展阅读】

2.2.1选择器的优先级
　　　1.第一原则：近者优先，最内层选择器要大于外层。
　　　　例如： div ul li>div #ul li在ul 内层，所以li标签选择器能覆盖#ul id选择器
　　2.当作用在同一层时，ID选择器>class选择器>标签选择器。
　　　　例如：div #li>div .li>div li。只要最后一个选择器都作用与li 那么无论之前有多少嵌套，均没有选择关系。
　　3.当作用于同一层，而且最后一层为同等选择器
　　　　例如：div ul li>div li作用范围选的更精准，则优先级更高。
　　4.当优先级完全相同时，写在后面的选择器会覆盖选在后面的选择器。

2.2.2选择器的命名规范

1.只能使用字母数字下划线。
2.开头不能是数字。

H5教程（二），CSS入门（一）选择器的更多相关文章

  1. 无废话ExtJs 入门教程二十一[继承：Extend]

    无废话ExtJs 入门教程二十一[继承:Extend] extjs技术交流,欢迎加群(201926085) 在开发中,我们在使用视图组件时,经常要设置宽度,高度,标题等属性.而这些属性可以通过“继承” ...

  2. 无废话ExtJs 入门教程二十[数据交互：AJAX]

    无废话ExtJs 入门教程二十[数据交互:AJAX] extjs技术交流,欢迎加群(521711109) 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C ...

  3. 无废话ExtJs 入门教程二[Hello World]

    无废话ExtJs 入门教程二[Hello World] extjs技术交流,欢迎加群(201926085) 我们在学校里学习任何一门语言都是从"Hello World"开始,这里我 ...

  4. day 31 html(二) 和css入门

    前情提要: 本次主要是继续昨天学的简单的html 补充以及 css的简单入门 一:表单标签 >1:get请求 <!DOCTYPE html> <html lang=" ...

  5. HTML和CSS 入门系列（一）：超链接、选择器、颜色、盒模式、DIV布局、图片

    一.超链接 二.CSS选择器 CSS的全称叫做: Cascading Style Sheets 级联样式表的缩写. 2.1 类型选择器 2.2 派生选择器 2.3 伪类选择器 <style &g ...

  6. HTML和CSS 入门系列（二）：文字、表单、表格、浮动、定位、框架布局、SEO

    上一篇:HTML和CSS 入门系列(一):超链接.选择器.颜色.盒模式.DIV布局.图片 一.文字 1.1 属性 1.2 字体样式:font-family 1.3 字体大小:font-size 1.4 ...

  7. mongodb入门教程二

    title: mongodb入门教程二 date: 2016-04-07 10:33:02 tags: --- 上一篇文章说了mongodb最基本的东西,这边博文就在深入一点,说一下mongo的一些高 ...

  8. CSS入门教程——定位(positon)

    CSS入门教程——定位(positon) CSS定位在网页布局中是起着决定性作用.   定位 CSS的定位功能是很强大的,利用它你可以做出各种各样的网页布局.本节就介绍一些CSS常用的定位语句. 1. ...

  9. css入门二-常用样式

    css入门二-常用样式总结 基本标签样式 背景色background-color 高度height; 宽度width; 边框对齐以及详细设定举例 width/*宽度*/: 80%; height/*高 ...

随机推荐

  1. Java-API-Package：java.util

    ylbtech-Java-API-Package:java.util 1.返回顶部 1. java.util Interfaces Collection Comparator Deque Enumer ...

  2. java中实现多线程的方法有几种以及如何实现多线程

    多线程是java语言区别于其它语言的一大特点.其它语言向C++的话如果要实现多线程的话,必须调用操作系统的多线程机制(我不确定自己记得对不对 了感兴趣的自己上网查查看). 在java5以前实现多线程有 ...

  3. Celery-4.1 用户指南: Periodic Tasks (定时任务)

    简介 celery beat 是一个调度器:它以常规的时间间隔开启任务,任务将会在集群中的可用节点上运行. 默认情况下,入口项是从 beat_schedule 设置中获取,但是自定义的存储也可以使用, ...

  4. 将本地代码上传至github

    注册github账号 https://github.com/ 安装git工具 https://git-for-windows.github.io 1.在github中创建一个项目 2.填写相应信息,点 ...

  5. centos6 安装teamviewer

    wget http://www.teamviewer.com/download/teamviewer_linux.rpm yum -y install temviewerX.rpm 机器最好联网,能够 ...

  6. JVM Class Loading过程

    转自:<Java Performance>第三章 VM Class Loading The Hotspot VM supports class loading as defined by ...

  7. jxl.read.biff.BiffException: Unable to recognize OLE stream异常

    java代码读取excel文件时报: jxl.read.biff.BiffException: Unable to recognize OLE stream    at jxl.read.biff.C ...

  8. eclipse中。安装findbugs java检测工具

    问题提出: 当我们编写完代码,做完单元测试等各种测试后就提交正式运行,只能由运行的系统来检测我们代码是否有问题了,代码中隐藏的错误在系统运行的过程中被发现后,然后再来进行相应的修改,那么后期修改的代价 ...

  9. Mac系统下MySql下载MySQL5.7及详细安装流程

    一.在浏览器当中输入以下地址 https://dev.mysql.com/downloads/mysql/    二.进入以下界面:直接点击下面位置 ,选择跳过登录 点过这后直接下载. 三.下载完成后 ...

  10. activity状态保存的bundl对象存放位置的思考

    我们知道,当activity被异常终止时,可以把一些信息保存到bundle对象中,在下次启动时恢复. 那么,这个bundle对象是保存在哪里的呢? 这种状态保存的方法针对的是activity而不是进程 ...