这是我的第二篇博客,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.开头不能是数字。