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

1.  CSS简介

1.1  CSS是什么?

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

1.2  我们为什么要使用CSS?

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

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

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

2.CSS基本语法

2.1   CSS的三种链接方式

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

2.1.1行内样式表

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

2.1.2内部样式表

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

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

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

2.1.3外部样式表

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

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

<style type="text/css">
@import url("02.");
</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.使两个控件同时对鼠标事件做出反应的写法:
  共同父容器选择器:伪类状态 控件选择器{
                      对应控件事件}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS常用选择器</title> <!--页面中插入CSS的写法,需使用style标签包裹。type="text/css"-->
<style type="text/css"> li{
color: red;
}
/*【标签选择器】
* 1.写法:HTML标签名{样式属性:样式属性值;--}
* 2.作用选中页面中所有对应的标签。*/
.li{
color: orange;
}
/*【类选择器】
* 1.写法:.选择器名称{}
* 调用:在需要修改样式的标签上,使用class="选择器名称",调用对应选择器。
* 2.作用:修改所有调用选择器的标签。
* 3.优先级高于标签选择器。*/
#li{
color: yellow;
}
/** 【ID选择器】
* 1.写法:#选择器名称{}
* 调用:在需要修改样式的标签上,使用id="选择器名称",调用对应选择器。
* 2.ID是唯一的,同一页面只能有一个ID
* 3.优先级大于class选择器。*/
*{
font-size: 20px;
background-color: aqua;
}
/*【通用选择器】
* 1.写法:*{}
* 2.作用:选中页面中所有标签。
* 3.优先级最低。*/
div li{
color: green;
}
/*【后代选择器】
* 1.写法:选择器1 选择器2 选择器3...{}
* 例子:div .li{}需满足,div里面的class="li" 的元素。可以是子代,也可以是后代。
* 【子代选择器】
* 1.写法:选择器1>选择器2>选择器3...{}
* 例如:div>ul{}则ul必须是div的直接子代。
* 2.优先级:近者优先,越精确越优先。
* 【伪类选择器】
*
*
* */
.li#li{ color: blue;
}
.li,#li{
color: darkviolet;
}
a:link{
color: black;
}
a:visited{
color: blue;
}
a:hover{
color: red;
}
a:active{
color: yellow;
}
input:hover{
color: red;
}
input:active{
color: blue;
}
input:focus{
color: yellow;
} </style>
</head>
<body>
<div>
<ul>
<li class="li" id="li">列表第一项</li>
<li>列表第二项</li>
<li class="li">列表第三项</li>
<li id="li">列表第四项</li>
</ul>
</div>
<ul>
<li class="li">列表第一项</li>
<li>列表第二项</li>
<li class="li">列表第三项</li>
<li id="li">列表第四项</li>
</ul>
<a href="03.CSS常用文本属性.html" target="_blank"> This is a chaolianjie</a>
<input type="text" name="text" id="text" />
</body>
</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. $route路由

    <!DOCTYPE html><html ng-app="AngularApp"> <head> <meta charset=" ...

  2. linux动态内核模块编程-3

    将一组与模块相关的命令加载进内核 完成功能类似2,打印proc下的相关信息.但是不用重新编译内核,节省时间,更为灵活 内核模块介绍 模块是在内核空间运行的程序,实际上是一种目标文件,不能单独运行但其代 ...

  3. Java知识点总结1

    1.java的引用传递和值传递 当一个对象被当作参数传递到一个方法后,此方法可改变这个对象的属性,并可返回变化后的结果,那么这里到底是值传递还是引用传递? 答:是值传递.Java 编程语言只有值传递参 ...

  4. Python 面向对象 (进阶篇)

    <Python 面向对象(初级篇)>文章介绍了面向对象基本知识: 面向对象是一种编程方式,此编程方式的实现是基于对 类 和 对象 的使用 类 是一个模板,模板中包装了多个“函数”供使用(可 ...

  5. windows 获取本机(全部)IPv4、IPv6、MAC地址方法 (C/C++)

    windows下获取IP地址的两种方法: 一种可以获取IPv4和IPv6,但是需要WSAStartup: 一种只能取到IPv4,但是不需要WSAStartup: 如下: 方法一:(可以获取IPv4和I ...

  6. js原型及原型链

    一. 普通对象与函数对象  JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object ,Function 是JS自带的函数对象.下面举例说明 function f ...

  7. jetty分析

    jetty处理过程: 1  new Server() (1)初试化线程池  生成固定大小线程数,新来的线程放入BlockingQueue. (2)初始化ServerConnector 初始化 sche ...

  8. 【总结整理】地理信息系统GIS的基础坐标知识

    关于辰青2018.03.31 1.地理坐标系和投影坐标系的区别 答案: 1.地理坐标系统是一种球面坐标,而投影坐标系统是平面坐标 2.投影坐标系统在二维平面上有恒定的长度.角度和面积 3.投影坐标系统 ...

  9. static、静态变量、静态方法

    1 静态:static 1.1 用法 是一个修饰符:用于修饰成员(成员变量和成员函数) 1.2 好处 当成员变量被静态static修饰后,就多了一种调用方式,除了可以被对象调用外,还可以直接被类名调用 ...

  10. ruby 类创建-继承-消息

    ############################################# #create ruby a class #@符号表示实例变量,相当于java的private 属性 ### ...