<!--

整体说明：

1.CSS的三种引入方式

（1）行内样式

（2）内接样式

（3）外接样式

2.CSS的基本选择器

（1）id选择器 （引用方式：#id）

（2）标签选择器（引用方式：标签名字）

（3）类选择器（引用方式：.类名）

3.CSS的高级选择器

（1）后代选择器

（2）子代选择器

（3）组合选择器

    <div>

        <p>

            <span></span>

        </p>

    </div>

（4）交集选择器

-->

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>CSS的三种引入方式和基本选择器</title>

    <style>

        /*CSS样式优先级：行内样式 1000 > id选择器 100 > 类选择器010 > 标签选择器 001*/

        <!--以下是3种基本选择器 -->

        /*标签选择器*/

        div{

            color:#ff6700;

        }

        /*id选择器*/

        #box{

            color: red;

        }

        /*类选择器*/

        .box{

            color: chartreuse;

            font-size: 30px;

        }

        .active{

            color: cadetblue;

        }

    </style>

</head>

<body>

    <div class="box active" id="box">马玉刚</div>

    <div class="box">李苹</div>

</body>

</html>

11 CSS的三种引入方式和基本选择器的更多相关文章

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

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

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

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

  3. python全栈开发day38-css三种引入方式、基础选择器、高级选择器、补充选择器

    一.昨日内容回顾 div:分割整个网站,很多块 (1)排版标签 (2)块级标签 独占一行 可以设置高和宽,如果不设置宽高,默认是父盒子的宽 span: (1) 小区域 (2)文本标签 (3)在一行内显 ...

  4. js介绍，js三种引入方式，js选择器，js四种调试方式，js操作页面文档DOM（修改文本，修改css样式,修改属性）

    js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...

  5. CSS三：CSS的三种引入方式

    CSS的引入方式共有三种:行内样式.内部样式表.外部样式表. 一.行内样式 使用style属性引入CSS样式. 示例:<h1 style="color:red;">st ...

  6. CSS的三种引入方式

    1.标签 <style>定义样式         <link> 资源的引用(某些css的样式) 2.属性 rel=”stylessheet” 外部样式表  (rel为定义当前文 ...

  7. css的三种引入方式、常用的元素选择器以及css三大特性

    第一.html文件中如何使用css html文件中使用css有3种方式:链接式.嵌入式.行内式,推荐使用程度依次递减:1.链接式:在html文件通过<link />标签引入,rel属性值必 ...

  8. 前端-CSS-介绍及三种引入方式

    我们为什么需要CSS? 使用css的目的就是让网页具有美观一致的页面,另外一个最重要的原因是内容与格式分离 在没有CSS之前,我们想要修改HTML元素的样式需要为每个HTML元素单独定义样式属性,当H ...

  9. CSS【03】：CSS 基础选择器与三种引入方式

    基础选择器 选择器:css 选择 html 标签的一个工具,是将 css 与 html 建立起联系,那么 css 就可以控制 html 样式 选择器其实就是给 html 标签起名字 标签选择器 作用: ...

随机推荐

  1. 2013级别C++文章9周(春天的)工程——运算符重载（两）

    课程主页中:http://blog.csdn.net/sxhelijian/article/details/11890759,内有完整教学方案及资源链接 [程序阅读]阅读程序"简单C++学生 ...

  2. DELPHI高性能大容量SOCKET并发（八）：断点续传（上传也可以续传）

    断点续传 断点续传主要是用在上传或下载文件,一般做法是开始上传的时候,服务器返回上次已经上传的大小,如果上传完成,则返回-1:下载开始的时候,由客户端上报本地已经下载大小,服务器根据位置信息下发数据, ...

  3. 【转】Mysql rownum 实现 及应用

    Mysql rownum 实现 转自:http://blog.csdn.net/saydo/article/details/22725953   SELECT @rownum:=@rownum+1 A ...

  4. PHP关联数组教程

    PHP 数组 关联数组 什么是数组?在使用 PHP 进行开发的过程中,或早或晚,您会需要创建许多相似的变量.无需很多相似的变量,你可以把数据作为元素存储在数组中.数组中的元素都有自己的 ID,因此可以 ...

  5. Openstack部署总结：“部署过程Error: Local ip for ovs agent must be set when tunneling is enabled”问题

    问题叙述性说明 正在使用RDO当多节点部署测试,因为使用了一些老机器和机器类型的差异(一些HP的PC,有些DELL的PC).以下错误出现: Applying 192.168.40.107_neutro ...

  6. 【多线程】python界面阻塞，白屏，not responding解决的简单例子

    x = 0 QWidget. self.thread = Worker() self.xLable = QLabel( self.spinBox = QSpinBox() self.spinBox.s ...

  7. WPF_界面_图片/界面/文字模糊解决之道整理

    原文:WPF_界面_图片/界面/文字模糊解决之道整理 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u010265681/article/detai ...

  8. C类型和存储方式的语言变量

    变量的作用域:有效射程变量 >局部变量 1.在函数中的局部变量,量在该函数结束后自己主动撤销 2.函数内的复合语句中的局部变量(比方for语句),这个变量在复合语句结束后自己主动撤销.这个变量能 ...

  9. Vertica变化Local时间到GMT时间

    在Vertica的数据库的使用过程中碰到这么一种场景.程序从不同一时候区的集群中收集数据写入同一张表,然后我们须要把这些数据依照GMT时间来显示. 此时我们能够通过Vertica提供TIME ZONE ...

  10. WPF ListView控件设置奇偶行背景色交替变换以及ListViewItem鼠标悬停动画

    原文:WPF ListView控件设置奇偶行背景色交替变换以及ListViewItem鼠标悬停动画 利用WPF的ListView控件实现类似于Winform中DataGrid行背景色交替变换的效果,同 ...