NEWS

新闻资讯

当前位置首页 > 新闻资讯 > 正文

CSS语法+选择器+优先级_前端学习

作者:菁瑞优智_小菁 时间:2021-07-16

1、CSS概述

1.1. 什么是CSS

CSS是Cascading( /kæˈskeɪdɪŋ/) Style Sheets的简写,即层叠样式表,简称样式表。

1.2 CSS的出现是为了解决什么问题?

1994年,Web真正走出实验室。

从HTML被发明开始,样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制,因为最原始的 Web 版本中根本没有提供一种网页装饰的方法。

随着HTML的成长,为了满足页面设计者的要求,HTML添加了很多显示功能。但是随着这些功能的增加,HTML变的越来越杂乱,而且HTML页面也越来越臃肿。于是CSS便诞生了。

所以,CSS的出现是为了**解决html网页的排版和格式**的。

1.3 CSS的发展时间轴

1994年, 哈肯·维姆·莱(Hkon Wium Lie) 第一次提出CSS的建议。

1996 年 12 月,W3C 推出了 CSS 规范的第一版本。

1997 年,W3C 颁布 CSS1.0 版本 ,CSS1.0 较全面地规定了文档的显示样式,可分为选择器、样式属性、伪类 / 对象几个部分。

这一规范立即引起了各方的关注,随即微软和网景公司的浏览器均能支持 CSS1.0,这为 CSS 的发展奠定了基础。

1998 年,W3C 发布了 CSS 的第二个版本,目前的主流浏览器都采用这标准。

CSS2 的规范是基于 CSS1 设计的,包含了 CSS1 所有的功能,并扩充和改进了很多更加强大的属性。包括选择器、位置模型、布局、表格样式、媒体类型、伪类、光标样式。

2011年4月12日 ,发布了修正后的CSS2.1规范。CSS2.1修改了CSS2中的一些错误,删除了其中不被支持的内容和增加了一些已有的浏览器的扩展内容 。

CSS2.1版本是使用时间很长的一个版本,影响深远。

在2016年发布了修正版CSS2.2。

从2011年开始CSS被分为多个模块单独升级,统称为CSS3。

所以CSS3没有统一的规范标准,只有某个模块的等级。

这些模块有:

CSS选择器level3

CSS媒体查询level3

CSScolor level3

从这个时间轴可以看出,1997年HTML 4的规范出来后,1998年CSS2的规范推出,这两个版本促成了web2.0时代的到来。2000年的XHTML1.0修订版本,2011年的CSS2.1修订版本,都是使用了很长时间的规范版本。国内在2004年开始出现网站重构的呼声。

所以web2.0的学习主要是XHTML1.0(HTML4.01和XML)和CSS2.1的版本。

1.4 CSS的主要作用

- 遵循W3C标准,符合WEB2.0标准。

- 减少重复格式化,减少网页体积,加快下载和访问速度。

- 符合内容与表现形式分离的原则,方便于搜索引擎抓取到有用的内容。

- 便于更新和维护,成千上万的网页只需要修改CSS便可以更改显示外观。

- 浏览器干扰相对较小,实现一些HTML格式化不能实现的高级功能。

2、CSS的规范

2.1 语法规范

选择器{
    属性:属性值;
    ...
}

2.2 命名规范

- 因为选择器除了标签选择器外,其它选择器都是自定义的名称,所以必须有一定的规范。

- 只能以字母开头,字母都是小写,可以包含数字和中划线,最好不要用下划线。

- 中划线

中划线可以用来表示层级关系

<div class="box">
    <ul class="box-list">
        <li class="box-list-item"></li>
        <li class="box-list-item"></li>
        <li class="box-list-item"></li>
    </ul>
</div>

- 当层级嵌套过深时

当子孙模块超过4级或以上的时候,考虑在祖先模块内具有识辨性的独立缩写作为新的子孙模块。

<div class="modulename">
    <div class="modulename_cover"></div>
    <div class="modulename_info">
        <div class="modulename_info_user">
            <div class="modulename_info_user_img">
                <img src="" alt="">
                <!-- 这个时候 miui 为 modulename_info_user_img 首字母缩写-->
                <div class="miui_tit"></div>
                <div class="miui_txt"></div>
                ...
            </div>
        </div>
        <div class="modulename_info_list"></div>
    </div>
</div>

- 命名必须要有语义化、使用通用的名称,最好用英文而不是拼音,不要简写。

- 布局(.g-)

| 语义 | 命名 | 简写 |

| 文档 | doc | doc |

| 头部 | header | hd |

| 主体 | body | bd |

| 尾部 | footer | ft |

| 主栏 | main | mn |

| 主栏子容器 | mainc | mnc |

| 侧栏 | aside | asd |

| 侧栏子容器 | sidec | sdc |

| 盒容器 | wrap/box | wrap/box |

- 模块(.m-)、元件(.u-)

| 语义 | 命名 | 简写 |

| 导航 | nav | nav |

| 子导航 | subnav | snav |

| 面包屑 | crumb | crm |

| 菜单 | menu | menu |

| 选项卡 | tab | tab |

| 标题区 | head/title | hd/tt |

| 内容区 | body/content | bd/ct |

| 列表 | list | lst |

| 表格 | table | tb |

| 表单 | form | fm |

| 热点 | hot | hot |

| 排行 | top | top |

| 登录 | login | log |

| 标志 | logo | logo |

| 广告 | advertise | ad |

| 搜索 | search | sch |

| 幻灯 | slide | sld |

| 提示 | tips | tips |

| 帮助 | help | help |

| 新闻 | news | news |

| 下载 | download | dld |

| 注册 | regist | reg |

| 投票 | vote | vote |

| 版权 | copyright | cprt |

| 结果 | result | rst |

| 标题 | title | tt |

| 按钮 | button | btn |

| 输入 | input | ipt |

- 功能(.f-)

| 语义 | 命名 | 简写 |

| 清除浮动 | clearboth | cb |

| 左浮动 | floatleft | fl |

| 内联 | inlineblock | ib |

| 文本居中 | textaligncenter | tac |

| 垂直居中 | verticalalignmiddle | vam |

| 溢出隐藏 | overflowhidden | oh |

| 完全消失 | displaynone | dn |

| 字体大小 | fontsize | fz |

| 字体粗细 | fontweight | fs |

- 皮肤(.s-)

| 语义 | 命名 | 简写 |

| 字体颜色 | fontcolor | fc |

| 背景颜色 | backgroundcolor | bgc |

| 边框颜色 | bordercolor | bdc |

- 状态(.z-)

| 语义 | 命名 | 简写 |

| 选中 | selected | sel |

| 当前 | current | crt |

| 显示 | show | show |

| 隐藏 | hide | hide |

| 打开 | open | open |

| 关闭 | close | close |

| 出错 | error | err |

| 不可用 | disabled | dis |

- 命名方式(BEM):类-体(例:g-head)、类-体-修饰符(例:u-btn-active)

- 相同语义的不同类命名方法:

直接加数字或字母区分即可(如:.m-list、.m-list2、.m-list3等,都是列表模块,但是是完全不一样的模块)。其他举例:.f-fw0、.f-fw1、.s-fc0、.s-fc1、.m-logo2、.m-logo3、u-btn、u-btn2等等。

2.3 注释规范

.title{
    /*font-size:16px;*/
    color:#333;
}
/*
.title{
    font-size:16px;
    color:#333;
}
*/

3、html元素的4种CSS样式来源

3.1 浏览器默认样式

保证html页面“裸奔”的时候也具有可读性。

3.2 继承样式

后代元素可以从祖先元素继承样式,不是所有样式都可以继承的。一般文本、字体等样式可以继承,而布局类的、背景等样式不可以继承。

3.3 用户通过浏览器自定义的样式

3.4 指定样式

- 行间样式

<h1 style="color:#f30;font-size:24px;text-align:center;">
    标题
</h1>
<p style="text-align:center">
    web前端学习第一课
</p>
<p style="text-align:center">
    <img src="images/1.jpg" alt="web前端开发">
</p>

- 页面内部样式

h1{
    color:#f30;
    font-size:24px;
    text-align:center;
}
.center{
    text-align:center;
}

- 页面外部链接样式

<link rel="stylesheet" href="*.css">

一定要学会使用chrome develop tool(谷歌浏览器开发者工具)

4、CSS选择器基础

选择器的目的是什么?

找到html标签元素,然后把样式作用在该html元素上。(找对象)

选择器是一种匹配模式,用于**选择需要添加样式的目标对象**。

注: 行内样式不需要用选择器, 内部或外部CSS需要用选择器。

4.1 基本选择器(元素选择符)

- 通用选择器

\* 星号选择器,也称为通用选择器

作用:选择HTML页面上所有的元素

语法:

*{ 
    属性:属性值;
}

通用选择器一般我们不会使用,因为它会对页面上所有的元素的样式进行渲染,这样就会使页面的渲染速度变慢。

- 标签(元素)选择器

**必须是HTML语法中固有的标签,而不能使自己定义的名称。**

作用:选择HTML网页中所有指定的标签,并对其应用样式

语法:

标签{ 
    属性:属性值;
}

- 类选择器

所有的HTML标签都有class属性,为这个class设定一个值,然后就可以使用类选择器来匹配这一个值。并对其应用样式。

作用:选择指定了class属性值的标签

语法:

.class类名{
    属性:属性值;
}

注意:使用类选择器必须在值的前面加一个点符号(.),可以多个class组合。

- ID选择器

所有的HTML标签都有一个id属性

我们可以为这个id设定一个值,然后再写选择器来匹配这一个值

作用:选择指定的ID属性值的标签

语法:

#id名称{
    属性:属性值;
}

id使用的 *#* ,class使用的是 *.*

**通常id是唯一的(只能够有一个元素来匹配)**

4.2、层次选择器(复合选择器)

层次选择器通过HTML的DOM元素间的层次关系获取元素,其主要的层次关系包括后代、父子、相邻兄弟和通用兄弟几种关系。

语法如下:

| **选择符** | **名称** | **版本** | **描述** |

| E F | 包含选择符(Descendant combinator) | CSS1 | 选择所有被E元素包含的F元素。 |

| E>F | 子选择符(Child combinator) | CSS2 | 选择所有作为E元素的子元素F。 |

| E+F | 相邻选择符(Adjacent sibling combinator) | CSS2 | 选择紧贴在E元素之后F元素。 |

| E~F | 兄弟选择符(General sibling combinator) | CSS3 | 选择E元素之后所有兄弟元素F。 |

- 包含选择器E1 E2(后代关系)

作用:选择所有被E1包含的E2。

语法:

E1 E2

- 子选择器 E1>E2(父子关系)

作用:选择所有作为E1子对象的E2。

语法:

E1 > E2

比如:ul>li

**注意: **子选择器与包含选择器有区别,子选择器只选中下一代,包含选择器可以选中所有的后代(不限层级)。

- 选择器分组 E1,E2,E3(并列关系)

作用:将同样的样式应用于多个选择器,可以将选择符以逗号分隔的方式并为组。

语法:

E1,E2,E3

- 相邻选择器E1+E2(邻居关系)

作用:选择紧贴在E1元素之后E2元素。相邻选择符只会命中符合条件的相邻的兄弟元素。

语法:

E1+E2

比如:li+li

- 兄弟选择器E1~E2(兄弟关系)

选择E1元素后面的所有兄弟元素E2。

与相邻选择符不同的是,兄弟选择符会命中所有符合条件的兄弟元素,而不强制是紧邻的元素。

4.3 伪类选择器

在某个状态触发的时候,会执行对应的样式。

语法:

E:伪类{
    属性:属性值;
}

- 动态伪类选择器

| **选择符** | **版本** | **描述** |

| E:link | CSS1 | 设置超链接a在未被访问前的样式。 |

| E:visited | CSS1 | 设置超链接a在其链接地址已被访问过时的样式。 |

| E:hover | CSS1/2 | 设置元素在其鼠标悬停时的样式。 |

| E:active | CSS1/2 | 设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。 |

| E:focus | CSS1/2 | 设置元素在成为输入焦点(该元素的onfocus事件发生)时的样式。 |

- 鼠标的四种状态(重点)

**E:link** **未访问的链接**

**E:visited** **已访问的链接**

**E:hover** **鼠标悬停状态**

**E:active** **选定的激活状态**

:link、:visited只能针对a超链接。:hover、:active可以针对任何元素,不只是超链接.

注意必须按照lovehate的书写顺序。

- E:focus 焦点

设置元素在成为输入焦点(该元素的onfocus事件发生)时的样式

4.4 属性选择器

| **选择符** | **版本** | **描述** |

| E[att] | CSS2 | 选择具有att属性的E元素。 |

| E[att="val"] | CSS2 | 选择具有att属性且属性值等于val的E元素。 |

| E[att~="val"] | CSS2 | 选择具有att属性且属性值为一个用空格分隔的字词列表,其中一个等于val的E元素。 |

| E[att\|="val"] | CSS2 | 选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素,如果属性值仅为val,也将被选择。 |

5、选择器的层叠性(掌握)

5.1 css样式的继承性

HTML文档以树形结构进行组织,各元素之间是一种层次关系,这种层次关系同样反映在样式表的应用中。**具有层次关系的元素之间,内层元素将继承外层元素的样式,多个外层元素中定义的样式将叠加到内层元素**。

HTML中,<body>是其他元素的容器,是其他元素的最外层元素,所以<body>元素中定义的样式将影响其他所有元素的显示格式。

能被继承的CSS属性:

**文本相关的属性是继承的**

text-align、color、text-indent、font-family、font-size

font-style、font-weight、 letter-spacing、word-spacing

text-transform、line-height等

**列表相关的属性是继承的**

list-style、 list-style-image、list-style-position、list-style-type

5.2 css样式的优先级

- 继承样式和浏览器缺省设置

- 浏览器缺省设置获胜

- 如果元素有默认样式,而元素没有自身设定样式,浏览器渲染引擎会将默认样式设定到元素上,而不会继承。因为浏览器渲染引擎合并的cssTree和domTree生成渲染树的时候,实质上就是将样式表中的样式设定到DOM文档的行间,而行间的优先权最高,这就是a不继承父级元素的颜色样式的原因。

- 继承方式冲突

- 就近原则

- 继承样式、浏览器缺省样式与指定样式冲突

- 指定样式获胜

- 指定样式冲突

- 对当前元素指定了多个样式,则权值高者获胜。

| 选择器 | 权值 |

| 通配符 | 0 |

| 伪元素 | 1 |

| 元素选择器 | 1 |

| class选择器 | 10 |

| 伪类 | 10 |

| 属性选择器 | 10 |

| id选择器 | 100 |

| 行间样式 | 1000 |

- 引用方式冲突

- 行内样式>(内部样式=外部样式)

- 相同权重的时候,后来者居上,后定义的覆盖前定义的。

- !important

- 大杀器,最高级别,覆盖任何其它指定的样式。

- 可以覆盖别人写的很糟糕的行间样式!

- 可以通过在后面再添加!important覆盖前面的!important样式。

5.3 CSS样式的精简

- 先写基础的标签样式做统一化,利用了继承性

- 再把具有相同的样式模块化,通过class的组合

- 把相同的样式提取出来,选择器用“,”隔开

- 某个样式不一样的时候,合理的利用冲突优先级规则

6、课堂总结

6.1 重点

- CSS的作用

- CSS的规范

- CSS的各类选择器的用法

6.2 难点

- CSS样式的多种来源

- CSS层叠性的理解

6.3 学习方法

- 把不熟练的单词抄写3遍以上。

- 多敲代码,多思考。

6.4 排错技巧

- 利用chrome浏览器的开发者调试工具