当前位置: 首页 > news >正文

CSS-样式表的分类以及选择器的分类

样式表,css:层叠式样式表
style
后缀名:css

1、样式表分类

(1)内联样式【优先级最高】【常用】【代码重复使用性最差】

(当特殊的样式需要应用到个别元素时,就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。)

(2)内嵌样式表【优先级第二】【最不常用】【代码重复使用性一般】

(当单个文件需要特别样式时,就可以使用内嵌样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。)

(3)外部样式表【优先级最低】【最常用】【代码重复使用性最好】

(当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。)

1、先创建一个样式表

2、然后在引入样式表

3、写入样式表内容,调整样式表位置

2、样式表选择器

每一条css样式定义由两部分组成,形式如下:
选择器
{对那些元素做什么事} 

外部样式表只是说代码写在哪里而“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素。

(1)类别选择器( class选择器)【第二优先级】【最常用】

前面以"." 来标志,如:

.d1

{

color:red;

}

在HTML页中:

【1】<div class="d1";>文字</div>    文字颜色为红色

【2】<p class="d1";>文字</p>      文字颜色为红色 

定义了一个class类,将样式应用到了元素中。               

(2)id选择器【第一优先级】【最常用】

前面以"#"来标志,如:

#d2

{

color:blue;

}

在HTML页中:

<div class="d1" id="d2">文字</div>     文字颜色变为蓝色     【id选择器优先级高于类别选择器】

(3)标签选择器(根据标签名选择)【第三优先级】【如果同时出现类别选择器和id选择器,按照优先级来及执行】【最不常用】

前面以"标签名"来标志,如:

div

{

color:red;

}

在HTML页中:

<div>文字<div>      文字颜色变为红色    

(4)复合选择器【有id第一优先级/都是类别选择器第二优先级】【最最常用】

[1]群组选择器

当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔。

.d1,#d2

{

color:red;

}

在HTML页中:

【1】<div class="d1";>文字</div>    文字颜色为红色

【2】<p id="d2";>文字</p>      文字颜色为红色 

使用群组选择器,将会大大的简化CSS代码,将具有多个相同属性的元素,合并群组进行选择,定义同样的CSS属性,这大大的提高了编码效率,同时也减少了CSS文件的体积。

[2]后代选择器

后代选择器也称为包含选择器,用来选择特定元素或元素组的后代,将对父元素的选择放在前面,对子元素的选择放在后面,中间加一个空格分开。

.d1 #d2

{

backgroundcolor red;

}

在HTML页中:

<div class="d1" id="d2">文字</div>     此<div></div> 的背景色会变成红色 

后代选择器是一种很有用的选择器,使用后代选择器可以更加精确的定位元素。

转载于:https://www.cnblogs.com/zhulijun/p/6640858.html

相关文章:

  • childNodes与children
  • 发现一个很N且免费的html5拓扑图 关系图 生成组件
  • I2S
  • Oracle11g表空间导入dmp数据
  • Ambari里如何删除某指定的服务(图文详解)
  • CP-ABE ToolKit 安装笔记
  • js数组去重的三种常用方法总结
  • DPDK QoS之分层调度器
  • 对于文本框的验证(考虑兼容问题)
  • 114. Flatten Binary Tree to Linked List (leetcode)
  • 大数据与应用统计学的区别与联系
  • 在ElasticSearch中使用 IK 中文分词插件
  • Ubuntu 16.04 中安装谷歌 Chrome 浏览器
  • SSH使用密钥免密码登录
  • Ajax和跨域问题
  • 网络传输文件的问题
  • [分享]iOS开发-关于在xcode中引用文件夹右边出现问号的解决办法
  • __proto__ 和 prototype的关系
  • 【翻译】babel对TC39装饰器草案的实现
  • 11111111
  • HTTP中GET与POST的区别 99%的错误认识
  • java8-模拟hadoop
  • JS学习笔记——闭包
  • Lucene解析 - 基本概念
  • Netty源码解析1-Buffer
  • Promise初体验
  • 得到一个数组中任意X个元素的所有组合 即C(n,m)
  • 回流、重绘及其优化
  • 漫谈开发设计中的一些“原则”及“设计哲学”
  • 面试题:给你个id,去拿到name,多叉树遍历
  • 如何解决微信端直接跳WAP端
  • 深度学习中的信息论知识详解
  • 我是如何设计 Upload 上传组件的
  • 正则表达式
  • 自动记录MySQL慢查询快照脚本
  • Hibernate主键生成策略及选择
  • Unity3D - 异步加载游戏场景与异步加载游戏资源进度条 ...
  • ​2020 年大前端技术趋势解读
  • #FPGA(基础知识)
  • (三分钟)速览传统边缘检测算子
  • (转)利用ant在Mac 下自动化打包签名Android程序
  • .NET Framework与.NET Framework SDK有什么不同?
  • .net 使用ajax控件后如何调用前端脚本
  • .netcore 6.0/7.0项目迁移至.netcore 8.0 注意事项
  • [ C++ ] STL_stack(栈)queue(队列)使用及其重要接口模拟实现
  • [ linux ] linux 命令英文全称及解释
  • [16/N]论得趣
  • [AIGC codze] Kafka 的 rebalance 机制
  • [AR]Vumark(下一代条形码)
  • [AX]AX2012开发新特性-禁止表或者表字段
  • [BIZ] - 1.金融交易系统特点
  • [C#]手把手教你打造Socket的TCP通讯连接(一)
  • [dart学习]第四篇:函数
  • [GDOUCTF 2023]<ez_ze> SSTI 过滤数字 大括号{等
  • [github全教程]github版本控制最全教学------- 大厂找工作面试必备!