CSS基本表现形式只有三种：标签样式、Class类样式、ID样式

标签样式: 必须与HTML标签同名。仅仅影响同名标签

Class样式：可以在任何标签中使用: class="样式名"

ID: #来表示

优先级 ID > Class > Label

1: HTML (结构层) 2: CSS (表现层) 3: JavaScript (行为层) 的关系

1: HTML (结构层) 2: CSS (表现层) 3: JavaScript (行为层)

2: HTML类似人的骨骼, CSS就像人的皮肤，JS给人赋予生命。

3: 前端框架：BootStrap / Jquery (通过网页的dom对象类进行选择) / Vue、Angularjs （双向数据绑定）

代码：

前端技术介绍、样式三种形式

/* CSS基本表现形式只有三种：标签样式、Class类样式、ID样式

			 标签样式: 必须与HTML标签同名。仅仅影响同名标签

			 Class样式：可以在任何标签中使用: class="样式名"

			 ID: #来表示,优先级  ID > Class > Label

		*/

		div{

						color: red;

					}

					.mycls{

						color: green;

					}

					#mycls{

						color: blue;

					}

	</style>

	<script type="text/javascript">

	</script>

</head>

<body>

	<!--

			 1: HTML (结构层)    2: CSS (表现层)    3: JavaScript (行为层)

			 2: HTML类似人的骨骼, CSS就像人的皮肤，JS给人赋予生命。

			 3: 前端框架：BootStrap / Jquery  (通过网页的dom对象类进行选择) / Vue、Angularjs （双向数据绑定）

			 -->

			<div>我是DIV标签</div>

			<div class="mycls" >我是DIV标签，使用class定义CSS</div>

			<p id="mycls">我是P段落 使用Id定义</p>

</body>

CSS样式三种形式的更多相关文章

  1. CSS样式三种形式222

    markdown CSS基本表现形式只有三种:标签样式.Class类样式.ID样式 标签样式: 必须与HTML标签同名.仅仅影响同名标签 Class样式:可以在任何标签中使用: class=" ...

  2. 大家好，又是新的一天。今天给大家带来一些新的知识：选择器的种类和css的三种样式

    今天我们为大家 选择了 六种 选择器: 1. 标签选择器 2.id选择器 3.class选择器 4.后代选择器 5.子代选择器 6.交集选择器 我们就举三个典型的例子:后代选择器,子代选择器和交集选择 ...

  3. HTML5结合CSS的三种方法+结合JS的三种方法

    HTML5+CSS: HTML中应用CSS的三种方法 一.内联 内联样式通过style属性直接套进HTML中去. 示例代码 <pstylepstyle="color:red" ...

  4. html(常用标签,标签分类)，页面模板， CSS(css的三种引入方式)，三种引入方式优先级

    HTML 标记语言为非编程语言负责完成页面的结构 组成: 标签:被<>包裹的由字母开头,可以结合合法字符( -|数字 ),能被浏览器解析的特殊符号,标签有头有尾 指令:被<>包 ...

  5. css-1,css的三种引入方式 基本选择器

    <!-- (1)CSS 层叠样式表 作用:修饰网页结构 (2)css的三种引入方式 权重: 优先级高 权重大 谁在页面谁的权重大 - 行内样式 注意:行内样式的优先级是最高的 - 内接样式 - ...

  6. 11 CSS的三种引入方式和基本选择器

    <!-- 整体说明: 1.CSS的三种引入方式 (1)行内样式 (2)内接样式 (3)外接样式 2.CSS的基本选择器 (1)id选择器 (引用方式:#id) (2)标签选择器(引用方式:标签名 ...

  7. Html CSS的三种链接方式

    感谢原文:https://blog.csdn.net/abc5382334/article/details/24260817 感谢原文:https://blog.csdn.net/jiaqingge/ ...

  8. Qt学习 之 多线程程序设计（QT通过三种形式提供了对线程的支持）

    QT通过三种形式提供了对线程的支持.它们分别是, 一.平台无关的线程类 二.线程安全的事件投递 三.跨线程的信号-槽连接. 这使得开发轻巧的多线程Qt程序更为容易,并能充分利用多处理器机器的优势.多线 ...

  9. spring对事务支持的三种形式

    spring对事务支持的三种形式: 1.通过spring配置文件进行切面配置 <bean id="***Manager" class="org.springfram ...

随机推荐

  1. OpenFOAM显示残差

    本文主要讲解两种方法用来显示OpenFOAM的计算残差,一种是采用OpenFOAM自带的foamMonitor来输出残差,另一种就是大家经常看见的采用pyFoam来输出残差.不管采用哪一种方法都必须安 ...

  2. [Linux] RTC 读写指令及测试程序

    CPU:RK3288 系统:Linux IC:hym8563 在 Linux 系统中,指令 date 和 hwclock 都可以读写时间 date:读写系统时间,写时间需要管理员权限 hwclock: ...

  3. mysql 替换函数replace()实现mysql替换指定字段中的字符串

    mysql 替换字符串的实现方法: mysql中replace函数直接替换mysql数据库中某字段中的特定字符串,不再需要自己写函数去替换,用起来非常的方便. mysql 替换函数replace() ...

  4. Unity编辑器环境在Inspector面板中显示变量

    Serialize功能Unity3D 中提供了非常方便的功能可以帮助用户将 成员变量 在Inspector中显示,并且定义Serialize关系. 简单的说,在没有自定义Inspector的情况下所有 ...

  5. F5健康检查导致的服务端连接异常RST

    1. TCP健康检查 比如阿里云,F5负载设备当前都有这种机制. 该实现机制可能会导致后端ECS认为相关TCP连接出现异常(非正常退出),并在业务软件如Java连接池等日志中抛出相应的错误信息,如Co ...

  6. Oracle 查询表分区相关信息

    Oracle 查询表分区相关信息 --表分区 --1,分区表信息 -- (1)显示数据库所有分区表的信息 select * from DBA_PART_TABLES a where a.owner=u ...

  7. Kotlin 之操作符重载

    Kotlin 之操作符重载   参考: kotlin in action kotlin 官方参考文档 运算符重载 Kotlin允许我们为自己的类型提供预定义的一组操作符实现(这些操作符都对应的成员函数 ...

  8. shell编程系列9--文本处理三剑客之sed概述及常见用法总结

    shell编程系列9--文本处理三剑客之sed概述及常见用法总结 sed的工作模式:对文本的行数据一行行处理,如下图 sed(stream editor),是流编辑器,依据特定的匹配模式,对文本逐行匹 ...

  9. 圣诞节雪花效果，pc端

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. 004-行为型-09-访问者模式（Visitor）

    一.概述 它分离对象的数据和行为,使用Visitor模式,可以不修改已有类的情况下,增加新的操作. 主要解决:稳定的数据结构和易变的操作耦合问题. 注意事项:访问者可以对功能进行统一,可以做报表.UI ...