1.0 CSS基础之引用、选择器、继承与层叠、优先级

发布于 2022年 04月 09日 23:55

什么是CSS

进行外观控制并定义HTML内容在浏览器内的显示样式

CSS的优点

简化HTML相关标签，网页体积小，下载快
解决内容与表现分离的问题
更好维护网页，提高工作效率

1.1 CSS基本语法

由选择器和声明两部分组成

声明放置在一对紧邻选择器的大括号 {} 内，声明之间用 ; 隔开

CSS引用

语法：写在 <head> </head> 标签内：(嵌入样式)

<style type="text/css">
    CSS样式
</style>

切记一切标点符号都要用英文输入
在CSS引用中，注释不使用,而是/*注释内容*/，与C语言类似。

举个栗子：

效果如下

如果多个标签需要进行同样的一步或多步设置，可以将这些标签归在一个CSS样式前设置

<style type="text/css">
    p,a{font-size:30px;font-family:"幼圆"}
    a{color:green}
    p{color:red}
</style>

效果如下

同样进行了字号和字体设置，但是分开进行颜色设置，这样就可以快捷地对同类标签进行设置

1.2 CSS使用方法

CSS样式的应用场合和如何使用？

行内样式（内嵌样式）

在前标签内添加style样式语法：

<p style="color:red;font-size;">内容</p>

不建议大量使用，适合小范围设置

内部样式表（嵌入样式）

跟最开始的例子一样点击查看

但是，为了防止低版本浏览器不识别<style>标签，导致标签内代码不慎出现在网页中，我们用HTML的注释标签来包住<style>里面的内容

操作如下：

外部样式表

把CSS样式代码写在独立的一个文件中

扩展名：文件名xxx.css

在css文件中直接书写样式设置即可

语法：

<link href="xxx.css" rel="stylesheet" type="text/css"/>

同样需要放入<head>...</head>标签内

导入式

语法：写在<style type="text/css">...</style>标签内第一行

@import "xxx.css"
@import url(xxx.css);

<head>
    <style type="text/css">
        @import "xxx.css"
    </style>
</head>

或者

<head>
    <style type="text/css">
        @import url(xxx.css);
    </style>
</head>

CSS使用方法的区别

使用外部样式的好处

CSS和HTML分离
多个文件可以使用同一个样式文件
多文件引用同一个CSS文件，CSS只需下载一次

CSS使用方法优先级

对于同一个元素，同时使用方法设置CSS样式，起作用的先后顺序

行内样式>（内部样式/外部样式）>导入式样式
内部样式和外部样式之间，外部样式之间，就近原则

1.3 CSS选择器

选择器分类：

标签选择器
类选择器
ID选择器
全局选择器
群组选择器
后代选择器

标签选择器

以HTML标签作为选择器

直接对标签名进行设置，但是只适用大面积设置

类选择器

区分大小写

为HTML的开始标签添加class属性

2. 通过类选择器为有class属性的元素设置CSS样式

切记，一定要在class名前加“ . ”

在一类元素下进行不同的设置

把p和h1都分在类选择器special标签下

效果如下

同一个标签下可以设置多个类选择器

在class标签内写入另一个类选择器，并用空格分隔开，不能写另一个class！

ID选择器

与类选择器类似

区分大小写

给标签id值

2. 为id设置CSS值效果如下：

群组选择器

把相同样式设置的标签归为一类进行设置

全局选择器

对所有标签进行统一样式设置

谨慎使用

后代选择器

先看一看标签之间的辈分吧：

<em>标签是<p>标签的子标签

先父标签<p>再子标签<em>
<p>内的<em>

若只想改变159的颜色

给159命名一个类选择器

在父标签和子标签中间加上.类选择器

伪类

伪类选择器定义特殊状态下的样式
无法用标签、id、class及其他属性实现

链接的四种状态：激活状态、已访问状态、未访问状态、鼠标悬停状态

伪类	说明
:link	未访问的链接
:visited	已访问的链接
:hover	鼠标悬停状态
:active	激活（点击）那一刻的链接

举个栗子：

这是对标签的设置

可以使鼠标单击标签内字体产生各种效果

注意兼容问题

IE6及更早的版本，支持<a>元素的4种状态
IE6浏览器不支持其他元素的：hover和active

链接伪类的顺序

:link>:visited>:hover>:active

记忆方法：LVHA

说明

1. a:hover（悬停）必须放置在a:link（未访问）和a:visited（已访问）之后才生效

2. a:active（激活）必须放置在a:hover（悬停）之后才生效

3. 伪类名称对大小写不敏感

为不同的链接设置不同的LVHA 使用class进行类选择器操作：

1.4 CSS继承和层叠

CSS继承

从父元素继承部分CSS属性

这里虽然没有对<p>标签和<em>标签进行设置，但是由于对<div>进行了样式设置，这两个标签继承了父元素的属性也改变了字体大小

继承优点：

父元素设置样式，子元素可以继承部分属性（例如"border"属性不可以继承）
减少CSS代码

继承的优先级较低，有时不能改变原有默认样式，会忽略继承样式

CSS层叠

可以定义多个样式
不冲突时，多个样式可层叠为一个
冲突时，按不同样式规则优先级来应用样式

CSS选择器优先级

尝试：

现在对第二个<div>标签使用ID选择器（green）和标签选择器（red）但是结果

说明：id选择器优先于标签选择器

同理：

对第三个<div>标签使用class选择器（blue）和标签选择器（red）结果是说明：class选择器优先于标签选择器

再同个理：

同时使用class选择器和ID选择器结果是说明：ID选择器优先class选择器

当一个class标签内有两个标签时候以就近原则为准，所以字体是橙色

所以三者的优先级为：id > class > 标签选择

I>C>选

CSS优先级规则

同一个样式表（同一个style）中：

权值相同

就近原则（距离被设置元素越近优先级越高）
权值不同

根据权值来判断CSS样式，哪种CSS样式权值高，就用哪种样式

权值

举个栗子：

这时通过子代选择器和标签选择器的权值对比决定使用子代选择器

举个更复杂的栗子：

经过一波权值计算，最后应该显示灰色

！important规则

可调整样式规则的优先级
添加在样式规则之后，中间用空格隔开

语法： div{color:red !important;}

使标注的优先级最高

1.5 优先级总结

1.6 CSS样式命名

命名规范

采用英文字母、数字、以及“_”和“-”命名
以小写字母开头，不能以数字和“-”、“_”开头
命名形式：单字，连字符，下划线和驼峰

/*一个单词，全部小写*/
.special{...}
/*多个单词，驼峰写法，除了第一个单词，其他首字母大写*/
.mainTitle{...}
/*使用-和_连接符*/
.main_title
.main-title

使用有意义的命名

常用的CSS样式命名

1 页面结构

页头：header
页面主体：main
页尾：footer
内容：content/container
容器：container
导航：nav
侧栏：sidebar
栏目：column
页面外围控制：wrapper
左右中：left right center

2 导航

导航：nav
主导航：mainnav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题：title
摘要：summary

3 功能

标志：logo
广告：banner
登陆：login
登陆条：loginbar
注册：register
搜索：search
功能区：shop
标题：title

注意：

id不要滥用，谨慎使用

适当使用class

js需要用id来进行操作

1.0 CSS基础之引用、选择器、继承与层叠、优先级

什么是CSS

CSS的优点

1.1 CSS基本语法

1.2 CSS使用方法

行内样式（内嵌样式）

内部样式表（嵌入样式）

外部样式表

导入式

CSS使用方法的区别

CSS使用方法优先级

1.3 CSS选择器

标签选择器

类选择器

ID选择器

群组选择器

全局选择器

后代选择器

伪类

链接伪类的顺序

1.4 CSS继承和层叠

CSS继承

CSS层叠

CSS选择器优先级

CSS优先级规则

！important规则

1.5 优先级总结

1.6 CSS样式命名

命名规范

常用的CSS样式命名

推荐文章