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使用方法的区别

使用外部样式的好处

  1. CSS和HTML分离
  2. 多个文件可以使用同一个样式文件
  3. 多文件引用同一个CSS文件,CSS只需下载一次

CSS使用方法优先级

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

  • 行内样式>(内部样式/外部样式)>导入式样式

  • 内部样式和外部样式之间,外部样式之间,就近原则


1.3 CSS选择器

选择器分类:

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

标签选择器

以HTML标签作为选择器

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

类选择器

区分大小写

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

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

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

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

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

效果如下

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

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

ID选择器

与类选择器类似

区分大小写

  1. 给标签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)中:

  1. 权值相同

    就近原则(距离被设置元素越近优先级越高)

  2. 权值不同

    根据权值来判断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来进行操作

推荐文章