CSS(一)概述、选择器、选择器优先级

举报
敬 之 发表于 2022/04/16 02:30:12 2022/04/16
【摘要】         CSS:层叠样式表(Cascading Style Sheets)是一种用来表现HTML或XML等文件样式的计算机语言。不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。       &nbsp...

        CSS:层叠样式表(Cascading Style Sheets)是一种用来表现HTML或XML等文件样式的计算机语言。不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

        CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。对前端网页的布局与美化有着广泛作用。


目录

一、CSS概述

二、CSS选择器

1. 基础选择器

2. 关系选择器

3. 伪类选择器

4. 伪元素选择器

三、CSS优先级


一、CSS概述

1. 前端HTML、Javascript、CSS

  • html:超文本标记语言。用于网页的结构搭建和页面布局。
  • css:层叠样式表。用于网页的修饰,样式的渲染。
  • javascript:解释型的编程语言。用于与页面的交互。

2. CSS语法规范

(1)内联样式

        内联样式也叫行内样式,就是在 html 文件中的 html 标签中,用 style 属性样式值来完成渲染。内联样式将样式写在标签里,缺点是杂乱且不易于修改,复用性差;优点是可以指定当前标签,更加直接。


  
  1. <!-- 内联样式 -->
  2. <span style="样式声明"></span>

(2)内部样式

        在网页头部<head></head>中增加一对<style></style>标签,在 style 中定义样式。特点是需要选择器查找到元素并嵌入 HTML 文件,只能在当前页面使用,优先级低于内联样式(不建议用于项目)。


  
  1. <head>
  2. <!-- 内部样式 -->
  3. <style>
  4. h2 {
  5. background-color: lightpink;
  6. color: red;
  7. }
  8. </style>
  9. </head>

(3)外部样式

        单独创建 CSS 文件,在 HTML 文件的 head 标签中引入。


  
  1. <head>
  2. <!-- 外部样式 -->
  3. <link rel="stylesheet href="01.css">
  4. </head>

        href 为超文本引用,引用 css 文件路径,rel 属性指文件与当前HTML的关系(必写)。外部样式所有页面都可以使用,是项目中最重要的样式使用方式。

二、CSS选择器

        要使用 css 对 HTML 页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到 CSS 选择器。HTML页面中的元素就是通过 CSS 选择器进行控制的。

1. 基础选择器

(1)通用选择器:使用通配符 * ,选择 HTML 文件中所有元素。最常用的写法是清除浏览器内外边距,如下:

 *{margin:0;padding:0}
 

(2)元素选择器:也叫标签选择器,直接使用标签的名字来选择 HTML 元素。权重值为1


  
  1. h1 {color: teal;}
  2. div {color: green;}

(3)id 选择器:只针对一个元素,一般不作为样式渲染的选择器使用。

#getblue {color: blue;}
 

(4)类选择器:通过元素的类名即class值选择元素。权重值10


  
  1. .oz {color: purple;}
  2. .oo {color: orangered;}

        一个元素可以创建多个类名,每个类名之间用空格分开即可。

(5)群组选择器:将多种选择器进行组合,把不同的选择器用逗号连接


  
  1. .y,#mybox {
  2. background-color: yellow;
  3. }

2. 关系选择器

(1)后代选择器:先代元素(祖先)选择器写在前面,空格后写后代元素选择器。


  
  1. .item span {
  2. color: red;
  3. }

(2)子代选择器:选中某个元素的直接子元素(当前元素下的第一层子元素),与后代不同的是子代选择器的范围更小。


  
  1. body>div>div>div {
  2. color: red;
  3. }

(3)兄弟选择器


  
  1. .l1~li {
  2. color: blue;
  3. }
  4. .s~.nv {
  5. color: red;
  6. }

        注意,前面的为参照元素,后面的为筛选元素,选中的永远是其参照元素后面的兄弟元素

(4)相邻选择器:同一层的关系选择器,可以选中参照的元素后面紧挨着的被参照元素的选择器。


  
  1. .o1+span {
  2. color: red;
  3. }

3. 伪类选择器

        伪类选择器的作用是匹配同一个元素,设置其不同状态下的样式。常用的伪类有:

a:link {样式声明}  未激活(a标签特有)
a:visited {样式声明} 激活后(a标签特有)
div:hover {样式声明} 鼠标悬停
p:active {样式声明} 激活中
input:focus { } input标签获取焦点
input:cheaked { } input单选、复选等type 类型被选中后的样式

  
  1. a:link {
  2. color: green;
  3. }
  4. div:hover {
  5. background-color: salmon;
  6. }
  7. button:hover+div {
  8. background-color: red;
  9. }

4. 伪元素选择器

        用于设置元素的“指定部分”的样式。

::before 元素最前边部分
::after 元素的最后边部分

  
  1. div::before {
  2. content: "欢迎您,";
  3. font-weight: bolder;
  4. font-size: 26px;
  5. }

需要注意content属性必须写,但值可以为空。

三、CSS优先级

1. 优先级原则

(1)顺序读取:相同类型选择器采用顺序读取后来的优先。
(2)选择器优先级:不同类选择器,按照权重原则(id选择器100,类选择器10,元素选择器 1)。
(3)继承:制定样式的优先级大于继承样式的优先级。
(4)多个选择器一起使用:根据权重值累加比较值后采用优先级。

2. 最高优先级 - !important

        直接获取最高优先级,但注意内联样式不能加 !important。用法如下:


  
  1. .d1{
  2. background-color: rgb(22, 92, 161) !important;
  3. }
  4. <!-- 表示类名为d1的元素具有最高优先级 -->

3. 优先级的比重大小

        按引入方式:内联样式 > 内部样式 > 外部样式

        按元素:id 选择器(100)> 类选择器(10)> 元素选择器(1)

文章来源: majinjian.blog.csdn.net,作者:Developer 小马,版权归原作者所有,如需转载,请联系作者。

原文链接:majinjian.blog.csdn.net/article/details/119771922

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。