首页 > 其他分享 >学习(review)二——CSS(上)

学习(review)二——CSS(上)

时间:2023-04-26 22:35:59浏览次数:54  
标签:优先级 样式 标签 review 学习 样式表 选择器 CSS

CSS(层叠样式表)

一般通过<style type="text/css"> 内部为CSS环境</style> 进行编写CSS。

使用 CSS,您可以控制颜色、字体、文本大小、元素之间的间距、元素的位置和布局、

要使用的背景图像或背景颜色、不同设备的不同显示和屏幕大小等等CSS一般用于修饰页面显示效果

设计网页的样式,美化网页,取代了原来部分的HTML标签

CSS有标签选择器,id选择器,类选择器,组合选择器,其中id选择器具有唯一性。

eg:  .f2{font-size:77px} <p class = "f2">w </p>(类选择器)

      #p4{background:red  font-size:55px } <p id = "p4">w </p>(id选择器)

     p{color : red} <p s yle="color:red ;">A red paragraph.</p>(标签选择器)

     div   p{color : blue}  组合样式(不是很确定是不是这样写的QWQ)

如果CSS从位置分类,则可以分作嵌入[内联](在标签内部嵌入相应属性以属性的样式存在)

eg:<span style ="font-size.......">

注:多个样式同时在的时候优先级采用就近原则

  • 就近原则——最靠近相关标签的样式优先级高

    1. 行内样式优先级最高;
    2. 内部样式优先级大于导入样式,而与链接样式的优先级则与文档顺序有关,越靠近相关标签的样式优先级越高,即遵循就近原则。
    3. 导入样式与链接样式的优先级也遵循就近原则。

内部,当单个文档需要特殊的样式时,就应该使用内部样式表。

eg:<head> <style> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </style> </head>

外部:通过使用 <link> 元素链接到外部 CSS 文件 ,<link> 标签在(文档的)头部

eg: <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>

参考链接:HTML CSS 样式表 (w3schools.cn)

(61条消息) CSS三种样式表(内部样式表、行内样式表、 外部样式表)_hello_dashen的博客-CSDN博客

CSS Id 和 Class选择器 | 菜鸟教程 (runoob.com)

(61条消息) CSS样式表优先级_样式表的优先级_性灵的博客-CSDN博客

标签:优先级,样式,标签,review,学习,样式表,选择器,CSS
From: https://www.cnblogs.com/sad5/p/17357571.html

相关文章

  • 王者荣耀英雄张良技能单词学习---continuous,intercept,battery,suppress 这四个单词
    刚刚用张良拿了首胜言灵·咒令(被动技能)被动:张良对任一敌人造成的相邻两次普攻或技能伤害的时间间隔若小于1.5秒,这两次伤害的间隔时间被视为“连续攻击状态”,该状态每积累满1.2秒,会使该敌人额外承受140(+50%法术加成)点真实伤害,该伤害随英雄等级每级成长10点。这个技能重点是连续,只......
  • python+playwright 学习-57 svg 元素拖拽
    前言SVG英文全称为ScalablevectorGraphics,意思为可缩放的矢量图,这种元素比较特殊,需要通过​name​()函数来进行定位。本篇讲下关于svg元素的拖拽相关操作。拖拽svg元素如图所示,svg下的circle元素是可以拖动的比如往右拖动100个像素,那么cx的值由原来的cx="100"变成......
  • 最大公约数学习笔记
    一、定义因数/约数:给定一个正整数\(x\),\(x\)的因数/约数就是所有满足\(x\)是\(y\)的正整数倍的\(y\)。最大公因数/最大公约数:给定两个正整数\(a\),\(b\),求一个最大的正整数数\(x\),使得它同时是\(a\)和\(b\)的因数。一般在OI中记为\((a,b)=x\),在数学上记为\(\gc......
  • 华为HCIP学习清单
    华为HCIP学习清单本篇博客用于汇总本人对于华为HCIP-Datacom方向的学习笔记,便于索引.笔记HCIP-ICT实战进阶01-OSPF各类LSA介绍及分析HCIP-ICT实战进阶02-OSPF特殊区域及其他特性HCIP-ICT实战进阶03-OSPF高级特性HCIP-ICT实战进阶04-ISIS原理与配置HCIP-ICT实战进阶05-路......
  • 让CSS里div上下左右绝对居中几种方式
    1、绝对定位(常用于登录模块)备注:前提条件div需要有宽高1<divclass="box"></div>2#css3.box{4position:absolute/fixed;5left:0;6right:0;7top:0;8bottom:0;9margin:auto;10}2、margin负值备注:前提条件div需要有宽高1<divclass="box"&g......
  • 利用pytorch深度学习框架验证骰子的合格性
    利用pytorch深度学习框架验证骰子的合格性骰子生产的合格性可以用概率来表达,比如每个面出现的概率大概都是1/6。importtorchfromd2limporttorchasd2lfromtorch.distributionsimportmultinomial#多次扔骰子出现每个面的概率服从多项式分布fair_probs=torch.ones(......
  • 【学习笔记】拓展中国剩余定理
    若干方程组:\(\begin{cases}x\equivc_1\quad(\modp_1)\\x\equivc_2\quad(\modp_2)\\···\\x\equivc_m\quad(\modp_m)\end{cases}\)求x但不保证p互质。采用两两方程合并的形式。\(\begin{cases}x\equivc_1\quad(\modp_1)\\x\equivc_2\quad(\modp_2)\......
  • 【专题】2022年中国企业数字化学习行业研究报告PDF合集分享(附原数据表)
    报告链接:http://tecdat.cn/?p=32263原文出处:拓端数据公众号多变,不确定性,复杂,模糊不清的新业务图景,加快了公司人才发展模式的数字化转变;疫情冲击离线运输与公司现金流量,消费者支出减少,机构表现受压,数字化学习突破;行业数字化水平不断提高,商业体系和学习体系之间的关联性不断加强,企......
  • Webserver学习笔记
    前言Webserver这个东西真的恶心的一批,很难自学,但是网上又没有现成的教程(谁没事写一个Webserver啊)。这篇文章主要提供Webserver的基本框架的思路,毕竟网站基本框架相同无疑于抄袭,SSD可以先走了。正文准备本篇博客的Webserver基于SOCKET实现,这样只是为了追求底层,相对......
  • CVPR'23|向CLIP学习预训练跨模态!简单高效的零样本参考图像分割方法
    前言 本文提出了一种zero-shot的Referringimagesegmentation方法,该方法利用了来自CLIP的pre-train的跨模态知识。所提方法的性能明显优于所有基线方法和监督较弱的方法。本文转载自极市平台作者|CV开发者都爱看的仅用于学术分享,若侵权请联系删除欢迎关注公众号CV技术指南......