css学习3(三种样式表与样式控制优先级)

1、外部样式表:当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表,也要放到<head>中。

2、外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。

3、当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用 <style> 标签在文档头部<head>定义内部样式表。

4、当样式仅需要在一个元素上应用一次时,要使用内联样式,你需要在相关的标签内使用样式(style)属性。Style 属性可以包含任何 CSS 属性。

5、如果某些属性在不同的样式表中被同样的选择器定义,那么属性值将从更具体的样式表中被继承过来。

6、多重样式优先级:(内联样式)Inline style > (内部样式)Internal style sheet >(外部样式)External style sheet > 浏览器默认样式

7、如果外部样式放在内部样式的后面,则外部样式将覆盖内部样式。

8、CSS优先规则:内联样式 > id 选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 标签选择器 = 伪元素选择器

h3 {color:blue;
}
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>内外样式</title><!--<link rel="stylesheet" type="text/css" href="style.css"/>--><style type="text/css">h3{color:green;}#content-id{/*id控制*/color: red;}.content-class{/*类控制*/color: blue;}div{/*元素控制*/color: yellow;}</style><link rel="stylesheet" type="text/css" href="style.css"/>        </head><body><h3>外部蓝色,内部绿色</h3><div class="content-class" id="content-id">PHP</div></body>
</html>

 运行结果:

 

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

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

相关文章

上网课用什么耳机和麦克风,分享几款骨传导耳机上网课用

各位耳机狂热者&#xff0c;咱们都了解传统的蓝牙耳机相对于老式有线耳机来说确实方便得多。但是&#xff0c;也别忘了蓝牙耳机会导致耳道不断堵塞&#xff0c;引发细菌滋生等问题。好在近年来&#xff0c;骨传导耳机如火如荼地走红&#xff0c;解决了这些难题&#xff0c;简直…

学习Vue:过渡与动画效果

在Vue.js中&#xff0c;为了让页面更具有吸引力和交互性&#xff0c;您可以通过过渡和动画效果来提升用户体验。本文将介绍如何利用过渡类名实现动画效果&#xff0c;探讨Vue过渡的不同阶段&#xff0c;以及如何使用第三方动画库&#xff0c;如Animate.css&#xff0c;来实现更…

飞天使-jenkins进行远程linux机器修改某个文件的思路

文章目录 jenkins配置的方式jenkins中执行shell的思路 jenkins配置的方式 jenkins中执行shell的思路 下面的脚本别照抄&#xff0c;只是一个思路 ipall"$ips"# 将文本参数按行输出为变量 while IFS read -r line; doecho "$line" if [[ ! -z $line ]] &…

ubuntu 22.04 LTS 在 llvm release/17.x 分支上编译 cookbook llvm example Chapter 02

不错的资料&#xff1a; LLVMClang编译器链接器--保值【进阶之路二】 - 掘金 —————————————————————————————————————— 下载 llvm-cookbook example: $ git clone https://github.com/elongbug/llvm-cookbook.git 也可以参照llvm-pr…

java 线程池实现多线程处理list数据

newFixedThreadPool线程池实现多线程 List<PackageAgreementEntity> entityList new CopyOnWriteArrayList<>();//多线程 10个线程//int threadNum 10;int listSize 300;List<List<PackageAgreementDto>> splitData Lists.partition(packageAgre…

Vue实现动态遍历生成el-input

实现效果: el-input的label是measureName, el-input绑定的值是formDatat.measureCode 接口返回的数据格式如下 处理过的formData的格式如下

SpringBoot+微信小程序奶茶在线点单小程序系统 附带详细运行指导视频

文章目录 一、项目演示二、项目介绍三、运行截图四、主要代码 一、项目演示 项目演示地址&#xff1a; 视频地址 二、项目介绍 项目描述&#xff1a;这是一个基于SpringBoot微信小程序框架开发的奶茶在线点单小程序系统。首先&#xff0c;这是一个前后端分离的项目&#xff…

机器学习深度学习——NLP实战(情感分析模型——textCNN实现)

&#x1f468;‍&#x1f393;作者简介&#xff1a;一位即将上大四&#xff0c;正专攻机器学习的保研er &#x1f30c;上期文章&#xff1a;机器学习&&深度学习——NLP实战&#xff08;情感分析模型——RNN实现&#xff09; &#x1f4da;订阅专栏&#xff1a;机器学习…

SpringBoot复习:(56)使用@Transactional注解标记的方法的执行流程

首先&#xff0c;如果在某个类或某个方法被标记为Transactional时&#xff0c;Spring boot底层会在创建这个bean时生成代理对象&#xff08;默认使用cglib) 示例&#xff1a; 当调用studentService的addStudent方法时&#xff0c;会直接跳到CglibAopProxy类去执行intercept方…

【BASH】回顾与知识点梳理(三十)

【BASH】回顾与知识点梳理 三十 三十. 进程的观察30.1 ps &#xff1a;将某个时间点的进程运作情况撷取下来仅观察自己的 bash 相关进程&#xff1a; ps -l观察系统所有进程&#xff1a; ps aux 30.2 top&#xff1a;动态观察进程的变化30.3 pstree 该系列目录 --> 【BASH】…

动态代理的两个使用方式(手动实现+SpringAOP实现)-Demo

一、手动实现 1、具体代码 package com.xch.proxy;/*** 具体业务接口** author XuChenghe* date 2023/8/18 15:09*/ public interface Star {/*** 唱歌方法** param name* return*/String sing(String name);/*** 跳舞方法*/void dance();} package com.xch.proxy;/*** 具体…

jenkins 安装nodejs 14

参考&#xff1a; jenkins容器安装nodejs-前端问答-PHP中文网

VR漫游:720度实景参观,打造魅力生态小区

随着城市的不断发展&#xff0c;小区的建设越发具有生态化、绿色化的特点&#xff0c;人们也会偏向选择更加适合居住的小区。为了让更多的用户体验小区的舒适性&#xff0c;不少地产开发商准备引入VR漫游技术。 VR漫游不仅能够真实地展示现场环境&#xff0c;还可以改变传统网络…

SSR使用HTTPS

1.安装 npm i browser-sync 2. 再angular.json里配置 "serve-ssr": {"builder": "nguniversal/builders:ssr-dev-server","options": {"ssl": true,"sslCert": "./node_modules/browser-sync/certs/server…

【大虾送书第六期】搞懂大模型的智能基因,RLHF系统设计关键问答

目录 ✨1、RLHF是什么&#xff1f; ✨2、RLHF适用于哪些任务&#xff1f; ✨3、RLHF和其他构建奖励模型的方法相比有何优劣&#xff1f; ✨4、什么样的人类反馈才是好的反馈 ✨5、RLHF算法有哪些类别&#xff0c;各有什么优缺点&#xff1f; ✨6、RLHF采用人类反馈会带来哪些局…

Android13新特性之通知权限提升

Android13新特性之通知权限提升 随着移动通信的高速发展&#xff0c;保障通信的安全性变得尤为重要。在Android 13的最新版本中&#xff0c;通知权限的管理得到了进一步加强。为了实现安全的通信和确保用户的隐私&#xff0c;必须正确申请通知权限。本文将详细探讨如何在Andro…

【Axure视频教程】元件边界函数

今天教大家在Axure里如何使用元件边界函数&#xff0c;包括动态获取指定元件的上下左右边界&#xff0c;限制元件移动的边界&#xff0c;以及在中继器尺寸变化后利用元件边界函数推动拉起下方元件。该教程主要讲解并且和或者函数&#xff0c;不包含中继器表格制作的相关内容&am…

人类反馈强化学习RLHF;微软应用商店推出AI摘要功能

&#x1f989; AI新闻 &#x1f680; 微软应用商店推出AI摘要功能&#xff0c;快速总结用户对App的评价 摘要&#xff1a;微软应用商店正式推出了AI摘要功能&#xff0c;该功能能够将数千条在线评论总结成一段精练的文字&#xff0c;为用户选择和下载新应用和游戏提供参考。该…

excel常见的数学函数篇2

一、数学函数 1、ABS(number)&#xff1a;返回数字的绝对值 语法&#xff1a;ABS(数字)&#xff1b;返回数字的绝对值&#xff1b;若引用单元格&#xff0c;把数字换为单元格地址即可 2、INT(number)&#xff1a;向小取整 语法&#xff1a;INT(数字)&#xff1b;若引用单元格…

神经网络基础-神经网络补充概念-14-逻辑回归中损失函数的解释

概念 逻辑回归损失函数是用来衡量逻辑回归模型预测与实际观测之间差异的函数。它的目标是找到一组模型参数&#xff0c;使得预测结果尽可能接近实际观测。 理解 在逻辑回归中&#xff0c;常用的损失函数是对数似然损失&#xff08;Log-Likelihood Loss&#xff09;&#xff…