css部分

前面我们学习了HTML,但是HTML仅仅只是做数据的显示,页面的样式比较简陋,用户体验度不高,所以需要通过CSS来完成对页面的修饰,CSS就是页面的装饰者,给页面化妆,让它更好看。

1 层叠样式表(CSS)

Cascading Style Sheet,简称为css,中文名称层叠样式表或者级联样式表,主要指的是用来装饰HTML页面的一种技术。

css是页面的装饰器,能够将一个简陋难看的页面,装扮的符合大众的审美观。

1.1 css样式的几种写法

在页面开发的时候,一般css有如下几种种写法。

  • 在标签的属性style中编写

  • 在页面中的style标签中编写

  • 在页面外的XX.css文件中编写,使用link标签引入

  • 使用@import导入需要的css文件

1.1.1 行内样式

行内样式,又叫做标签样式,主要是写在标签的style属性上,好处是优先级别较高,坏处是只能渲染一个标签。

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>第一个CSS文件</title></head><body><!--通过style属性来设置样式,这个样式是嵌套在标签中,可以称为内嵌样式,内嵌样式仅仅只是对当前标签有效,内嵌标签中的元素会把在style中的样式替换掉--><h2 style="color:#212267;text-decoration:underline;font-size:12px">这是我的第一个CSS文件</h2></body>
</html>	
1.1.2 内嵌样式

内嵌样式,又叫做页面样式,是将 CSS 写在网页源文件的头部,即在 head 间,通过使用 HTML 标签中的 style标签将其包围,其特点是该样式只能在此页使用,解决行内样式多次书写的弊端。

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>第一个CSS文件</title><style type="text/css">/*h2表示对页面中的所有的h2的标签都有效*/h2 {background: #aa1222;color: #fff;}</style></head><body><h2>这是另一个h2</h2></body>
</html>

1.1.3 外链接式

链接式通过 HTML 的 link 标签,将外部样式表文件链接到 HTML 文档中,这也是网络上网站应用最多的方式,同时也是最实用的方式。这种方法将 HTML 文档和 CSS 文件完全分离,实现结构层和表示层的彻底分离,增强网页结构的扩展性和 CSS 样式的可维护性。

首先在页面外部创建一个css文档(xxx.css),后缀名必须是css,在使用link标签引入到需要渲染的页面。

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>第一个CSS文件</title><!--此时如果在css02中有相应的h2的设置,并且和style中的有冲突会被覆盖--><link rel="stylesheet" href="css02.css" ></head><body><h2>这是另一个h2</h2></body>
</html>

注意:对于样式表而言,后定义的会把先定义的样式表覆盖掉。link标签可以放在页面的head中,也可以放在body中,一般建议放在head中,以便于浏览器渲染样式,因为样式在加载完成前需要渲染。

1.1.4 @import

css也提供了一种在css文件中到导入其他css文件的功能 -- @import,这样就可以也可以导入css文件。

<style>/* @import 是在css中使用url函数导入其他的css文件,是css本身的能力*/@import url("index.css");
</style>
1.1.5 常见面试题

link和@import的区别

首先,从本质上说,这两种方式都是为了加载css文件,但它们还是存在细微的差别。

1、link属于XHTML标签,而@import完全是css提供的一种方式。link标签除了可以加载css外,还可以做很多其他的事情,比如定义RSS,定义rel连接属性等,@import只能加载CSS。

2、加载顺序的差别:当一个页面被加载的时候,link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再加载。所以浏览@import加载CSS的页面时可能没有样式,网速慢的时候明显可以看到。

3、兼容性的差别:由于@import是CSS2.1提出的,所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题,完全兼容。

4、使用dom控制样式时的差别:当时用JavaScript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。

1.2 css的选择器

CSS在渲染HTML页面是,为了得到HTML中的标签进行样式渲染,为我们提供了大量好用的各种选择器,以便于我们在CSS中拿到HTML的标签进行样式设置。

一般我们会根据使用的频繁率和定义的标准,将css的选择器分为如下几种,方便于我们理解和掌握。

1.2.1 基本选择器

基本选择器是使用概率最高,也是最常被使用的选择器,必须要掌握它。基本选择器包括如下选择器:

  1. 标签选择器(根据标签名称获取)

  2. ID选择器(获取id为xx的标签)

  3. 类选择器(获取标签中class=xxx的标签)

  4. 通用选择器(通配符)

    <!DOCTYPE html>
    <html><head><meta charset="UTF-8"><title></title><style>/* 不建议使用通配符选择器,建议使用reset.css* {color: red;}*//* 标签选择器 */div {color: aqua;}/* id选择器 */#myprogram {background: yellow;}/* 类选择器题 */.mylove2 {color: red;}</style></head><body><div id="first" class="mylove" >这个是一个div</div><p id="myprogram">这个是段落标签</p><div class="mylove mylove2">这个是一个div</div><h1>这个是标题</h1><hr /><div class="list"><ul><li>这是是一个列表1</li><li>这是是一个列表2</li><li>这是是一个列表3</li><li>这是是一个列表4</li><li>这是是一个列表5</li><li>这是是一个列表6</li><li>这是是一个列表7</li><li>这是是一个列表8</li><li>这是是一个列表9</li><li>这是是一个列表10</li></ul><li>这是是一个列表8</li><li>这是是一个列表9</li><li>这是是一个列表10</li></div></body>
    </html>

    运行代码结果如下图

    image-20201117125553114

    注意:标签选择器就是以标签名称为标准选择对应的标签,id则是#id属性来选中标签,注意:一个页面上id必须是唯一的,所以id选择器只能选择一个标签,类选择器是.class属性选择,class属性的值一个页面上允许出现多次,所以class选择器更加灵活,在开发中一般使用最多,通配符选择器不建议使用(*匹配所有标签)。                                                            id相当于身份证号 class相当于姓名

    1.2.2 包含选择器
  5. 子代选择器(获取某个标签的第一级子标签)

  6. 后代选择器(获取某个标签中的所有的子标签)

  7. 分组选择符,也叫做逗号选择器(可以同时设定多个标签,使用逗号进行分割)

    <!DOCTYPE html>
    <html><head><meta charset="UTF-8"><title></title><style>/* 子代选择器 */div.list>ul {border: 1px solid red;}/* 后代选择器 */.list li {border: 1px solid red;}/* 逗号选择器 */.mylove, #myprogram, h1 {color: #eee;width: 200px;height: 30px;background: skyblue;}</style></head><body><div id="first" class="mylove" >这个是一个div</div><p id="myprogram">这个是段落标签</p><div class="mylove mylove2">这个是一个div</div><h1>这个是标题</h1><hr /><div class="list"><ul><li>这是是一个列表1</li><li>这是是一个列表2</li><li>这是是一个列表3</li><li>这是是一个列表4</li><li>这是是一个列表5</li><li>这是是一个列表6</li><li>这是是一个列表7</li><li>这是是一个列表8</li><li>这是是一个列表9</li><li>这是是一个列表10</li></ul><li>这是是一个列表8</li><li>这是是一个列表9</li><li>这是是一个列表10</li></div></body>
    </html>

    运行结果如图

    image-20201117125610950

     
    1.2.3 属性选择器

    属性是HTML页面标签重要的部分,所以css也提供专业使用属性来访问标签的选择器。

    <!DOCTYPE html>
    <html><head><meta charset="UTF-8"><title>属性选择器</title><style>/* 表示选中的标签中存在某个属性 */.container[class] {color: red;}div[title] {color: #00FFFF;}/* 确切的等于*/input[type='text'] {background: red;}/* 属性的值中包含某个值 */input[type*='e'] {background: red;}/* 以什么开始 */input[type^='e'] {background: red;}/* 以什么结尾 */input[type$='rl'] {background: red;}/* +表示下一个标签 */.msg + p{border: 1px solid red;}/* 属性名称等于属性值 */[title="这个是标题"] {color: red;}</style></head><body><div class="container">这个是div容器</div><div title="这个是标题">这是第二个div</div><input type="text" name="" id="" value="刘建宏" /><input type="email" name="" id="" value="liushuaige" /><input type="url" name="" id="" value="刘欧巴" /><hr /><div class="msg">刘建宏是个大帅哥</div><p id="msg2">这个是段落</p></body>
    </html>

    运行结果如图:

    image-20201117125646282

     

    可以看出,属性选择器还是比较好用的。

    1.2.3 伪类选择器

    同一个标签,根据其不同的种状态,有不同的样式。这就叫做“伪类”。伪类用冒号来表示。比如div是属于box类,这一点很明确,就是属于box类。但是a属于什么类?不明确。因为需要看用户点击前是什么状态,点击后是什么状态。所以,就叫做“伪类”。

    所以早期主要用来渲染a标签的不同状态,现在随着页面的需求,各种标签都开始支持伪类选择器了。

    常见的状态主要用如下五种:

    :link 超链接点击之前
    :visited 链接被访问过之后
    ​
    :hover “悬停”:鼠标放到标签上的时候
    :active “激活”: 鼠标点击标签,但是不松手时
    :focus 是某个标签获得焦点时的样式(比如某个输入框获得焦点)

    如a标签可以表示不同的状态下的字体颜色

     /*让超链接点击之前是红色*/
    a:link{color:red;
    }
    /*让超链接点击之后是橙色*/
    a:visited{color:orange;
    }
    /*鼠标悬停,放到标签上的时候*/
    a:hover{color:green;
    }
    /*鼠标点击链接,但是不松手的时候*/
    a:active{color:black;
    }

    注意:,在css中,这四种状态必须按照固定的顺序写

    a:link 、a:visited 、a:hover 、a:active    

    如果不按照顺序,那么将失效。“爱恨准则”:love hate。必须先爱,后恨。

    css陆续提供了大量的伪类选择器供大家使用,如表所示,需要大家掌握其中常用的几个。

    选择器示例示例说明
    :checkedinput:checked选择所有选中的表单元素
    :disabledinput:disabled选择所有禁用的表单元素
    :emptyp:empty选择所有没有子元素的p元素
    :enabledinput:enabled选择所有启用的表单元素
    :first-of-typep:first-of-type选择的每个 p 元素是其父元素的第一个 p 元素
    :in-rangeinput:in-range选择元素指定范围内的值
    :invalidinput:invalid选择所有无效的元素
    :last-childp:last-child选择所有p元素的最后一个子元素
    :last-of-typep:last-of-type选择每个p元素是其母元素的最后一个p元素
    :not(selector):not(p)选择所有p以外的元素
    :nth-child(n)p:nth-child(2|2n-1|odd|even)选择所有 p 元素的父元素的第二个子元素
    :nth-last-child(n)p:nth-last-child(2)选择所有p元素倒数的第二个子元素
    :nth-last-of-type(n)p:nth-last-of-type(2)选择所有p元素倒数的第二个为p的子元素
    :nth-of-type(n)p:nth-of-type(2)选择所有p元素第二个为p的子元素
    :only-of-typep:only-of-type选择所有仅有一个子元素为p的元素
    :only-childp:only-child选择所有仅有一个子元素的p元素
    :optionalinput:optional选择没有"required"的元素属性
    :out-of-rangeinput:out-of-range选择指定范围以外的值的元素属性
    :read-onlyinput:read-only选择只读属性的元素属性
    :read-writeinput:read-write选择没有只读属性的元素属性
    :requiredinput:required选择有"required"属性指定的元素属性
    :rootroot选择文档的根元素
    :target#news:target选择当前活动#news元素(点击URL包含锚的名字)
    :validinput:valid选择所有有效值的属性
    :linka:link选择所有未访问链接
    :visiteda:visited选择所有访问过的链接
    :activea:active选择正在活动链接
    :hovera:hover把鼠标放在链接上的状态
    :focusinput:focus选择元素输入后具有焦点
    ::first-letterp::first-letter选择每个p 元素的第一个字母
    ::first-linep::first-line选择每个p元素的第一行
    ::first-childp::first-child选择器匹配属于任意元素的第一个子元素的 <p> 元素
    ::beforep::before在每个p元素之前插入内容
    :afterp::after在每个p元素之后插入内容
    ::sectionp::section被鼠标选中后的样式
    :lang(language)p:lang(it)为p元素的lang属性选择一个开始值
1.2.4 伪元素选择器

表是css2和css3提供的伪类选择器,在css3中,css还提供了伪元素选择器,也就是这个选择器可以构建一个伪元素,也就是无法提供js等技术访问的的元素,但是确实在页面中存在的,只能使用css渲染的,这样的元素是的css的功能进一步的加强了,这两个元素就是before和after,但是css2已经定义过了这两个选择器,表示之前和之后的选择器,所以就存在这样的写法:

// CSS3将first-line、first-letter、before、after、section专门归类为伪元素
::before    表示css3的伪元素选择器
::after     标签css3的伪元素选择器
::first-letter
::first-line
::section

注意,before和after选择器必须书写content属性。

p::before {display: inline-block;content: "s";width: 10px;height: 10px;background: red;border: 1px solid red;border-radius: 50%;
}
p::after
{content:" -- liu";
}

代码运行结果如图:

image-20201117125703751

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/63377.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

7-zip如何分卷压缩文件并加密?

想要压缩的文件过大&#xff0c;想要在压缩过程中将文件拆分为几个压缩包并且同时为所有压缩包设置加密应该如何设置&#xff1f; 想要分卷压缩文件并加密一起操作就可以完成了&#xff0c;设置方法如下&#xff1a; 打开7-zip&#xff0c;选中需要压缩的文件&#xff0c;选择…

14.在 Vue 3 中使用 OpenLayers 自定义地图版权信息

在 WebGIS 开发中&#xff0c;默认的地图服务通常会带有版权信息&#xff0c;但有时候我们需要根据项目需求自定义版权信息或添加额外的版权声明。在本文中&#xff0c;我们将基于 Vue 3 的 Composition API 和 OpenLayers&#xff0c;完成自定义地图版权信息的实现。 最终效果…

【游戏】超休闲游戏:简单易上手的游戏风潮

1. 什么是超休闲游戏&#xff1f; 超休闲游戏&#xff08;Hyper-Casual Games&#xff09; 是一种专注于简单玩法、快速上手、短时间内能完成的游戏类型。这类游戏通常具有以下特点&#xff1a; 玩法简单&#xff1a;规则直观&#xff0c;用户无需教程即可上手。碎片化体验&a…

【RTKLIB源码阅读】rtklibexplorer博客翻译-Updated guide to the RTKLIB configuration file

我已经有一段时间没有更新我的RTKLIB配置文件指南了。 自从上次更新以来,我增加了一些新的功能,并对一些现有的功能有了更多的了解。 对于以前的更新,我只是更新了原帖,但这次我想我应该重新发布它,使它更容易被找到。、 RTKLIB 的一大优点是它的可配置性极强,有一系列的…

excel文件合并,每个excel名称插入excel列

import pandas as pd import os # 设置文件夹路径 folder_path rC:\test # 替换为您的下载文件夹路径 output_file os.path.join(folder_path, BOM材料.xlsx) # 创建一个空的 DataFrame 用于存储合并的数据 combined_data pd.DataFrame() # 遍历文件夹中的所有文件 for …

无法找到 msvcr120.dll,无法执行程序要怎么处理?修改msvcr120.dll文件

遇到“无法找到 msvcr120.dll&#xff0c;无法执行程序”这类错误通常指示着你的计算机缺少了一个核心组件&#xff0c;即 Microsoft Visual C 2013 Redistributable 的一部分&#xff1a;msvcr120.dll 文件。这个文件是许多依赖 Visual C 的应用程序运行的基础。目前修复此类问…

MongDB快速入门

一&#xff0c;MongoDB简介 MongoDB是一个开源&#xff0c;高性能&#xff0c;无模式的文档数据库&#xff0c;当初的设计就是用于简化开发和方便扩展&#xff0c;是NoSQL数据库产品的一种&#xff0c;也是最想关系型数据库的非关系型数据库 它支持的数据结构非常松散&#x…

Kruskal 算法在特定边权重条件下的性能分析及其实现

引言 Kruskal 算法是一种用于求解最小生成树(Minimum Spanning Tree, MST)的经典算法。它通过逐步添加权重最小的边来构建最小生成树,同时确保不会形成环路。在本文中,我们将探讨在特定边权重条件下 Kruskal 算法的性能,并分别给出伪代码和 C 语言实现。特别是,我们将分…

实战 | C# 中使用GPU加速YOLOv11 推理

导 读 本文主要介绍如何在C#中使用GPU加速YOLOv11推理。 YOLOv11介绍 C# 中使用YOLOv11 (GPU版本) 【1】环境和依赖项。 下载安装CUDA12.6和CUDNN9.6,截止文章日期最新版本,注意选择自己的版本,我的系统是win11 64位。

大数据-244 离线数仓 - 电商核心交易 ODS层 数据库结构 数据加载 DataX

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; Java篇开始了&#xff01; 目前开始更新 MyBatis&#xff0c;一起深入浅出&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff0…

以nlp为例,区分BatchNorm、LayerNorm、GroupNorm、RMSNorm

以nlp中一个小批次数据&#xff0c;详细区分BatchNorm、LayerNorm、GroupNorm、RMSNorm。这几种归一化的不同。如下表格&#xff0c;从计算范围、统计量、计算复杂度以及应用场景等方面的差异给出。 方法计算范围统计量计算复杂度应用场景BatchNorm跨所有句子的同一维度使用批…

C# 高效编程指南:从命名空间到异常处理的技巧与最佳实践

在这条成长的路上&#xff0c;有一些核心概念将成为你开发过程中的得力助手—命名空间、预处理指令、正则表达式、异常处理和文件输入输出&#xff0c;这些看似独立的技术&#xff0c;实际上在大多数应用中都紧密相连&#xff0c;共同构成了C#开发的基础。 目录 C#命名空间 C…

普及组集训--图论最短路径设分层图

P4568 [JLOI2011] 飞行路线 - 洛谷 | 计算机科学教育新生态 可以设置分层图&#xff1a;(伪代码&#xff09; E(u,v)w;无向图 add(u,v,w),add(v,u,w); for(j1~k){add(ujn,vjn,w);add(vjn,ujn,w);add(ujn-j,vjn-j,0);add(vjn-j,ujn-j,0); } add(ujn-j,vjn-j,0); add(vjn-j,uj…

常用传感器介绍合集

SW-520D倾斜传感器 HX711模块&#xff1a;高精度称重的核心利器 GY302光照传感器模块详解 MLX90614红外测温传感器介绍 MAX30102心率血氧传感器模块&#xff1a;精准健康监测的利器 RGB颜色传感器简介 DS18B20温度传感器模块 人体红外传感器简介 FC-28土壤湿度传感器 …

gitee常见命令

目录 1.本地分支重命名 2.更新远程仓库分支 3.为当前分支设置远程跟踪分支 4.撤销已经push远程的代码 5.idea->gitee的‘还原提交’ 需要和本地当前的代码解决冲突 解决冲突 本地工作区的差异代码显示 本地commit和push远程 6.idea->gitee的‘将当前分支重置到此…

C++设计模式(建造者、中介者、备忘录)

一、建造者模式 将一个复杂对象的构建与它的表示分离&#xff0c;使得同样的构建过程可以创建不同的表示。 示例&#xff1a; //房子&#xff08;产品类&#xff09; class House { private:int rooms;int windows;string decoration; public:void setRooms(int r) {rooms …

简易图书管理系统

javawebjspservlet 实体类 package com.ghx.entity;/*** author &#xff1a;guo* date &#xff1a;Created in 2024/12/6 10:13* description&#xff1a;* modified By&#xff1a;* version:*/ public class Book {private int id;private String name;private double pri…

什么是甘特图?使用甘特图制定项目计划表的步骤

在项目管理中&#xff0c;项目计划是项目的核心要素&#xff0c;它详细记录了项目任务详情、责任人、时间规划以及所需资源。 这份计划不仅为项目推进提供指引&#xff0c;更是控制范围蔓延、争取更多支持的有力工具。 在项目管理中&#xff0c;项目计划是项目的核心要素&…

mock.js介绍

mock.js http://mockjs.com/ 1、mock的介绍 *** 生成随机数据&#xff0c;拦截 Ajax 请求。** 通过随机数据&#xff0c;模拟各种场景&#xff1b;不需要修改既有代码&#xff0c;就可以拦截 Ajax 请求&#xff0c;返回模拟的响应数据&#xff1b;支持生成随机的文本、数字…

16.[极客大挑战 2019]Upload1

进入靶场 是文件上传类题目 随便传个图片 制作个含木马的 算了&#xff0c;直接抓包只传文件改格式好了 第一次传的是<?php eval($_POST[attack]);?> 第二次传的是GIF89a? <script language"php">eval($_REQUEST[1])</script> "GIF89a&…