<!--
整体说明:
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. 设置npm淘宝镜像

    npm config set registry https://registry.npm.taobao.org

  2. Android 开发新方向 Android Wear ——概述

    2014 谷歌 I/O大会正式公布的Android Wear 开发理念,从而能够更系统的提供开发人员使用Android接口开发便携式可穿戴设备,以智能手表为例,通过Android提供的接口,能够方便的 ...

  3. Managing remote devices

    A method and apparatus for managing remote devices. In one embodiment of the present invention, ther ...

  4. 机器学习、深度学习实战细节(batch norm、relu、dropout 等的相对顺序)

    cost function,一般得到的是一个 scalar-value,标量值: 执行 SGD 时,是最终的 cost function 获得的 scalar-value,关于模型的参数得到的: 1. ...

  5. Leetcode 268 Missing Number 位运算

    题意:先将0, 1, 2, ..., n放入数组,然后去掉其中一个值,找到那个值. 这题与singe number 是一个类型,变形的地方就是首先需要将0, 1, 2, ..., n再次放入这个数组, ...

  6. C#中的String.Format介绍

    关键字:C# string.format作者:txw1958原文:http://www.cnblogs.com/txw1958/archive/2012/11/15/csharp-string_for ...

  7. Effective JavaScript Item 38 调用父类的构造函数在子类的构造函数

    作为这一系列Effective JavaScript的读书笔记. 在一个游戏或者图形模拟的应用中.都会有场景(Scene)这一概念.在一个场景中会包括一个对象集合,这些对象被称为角色(Actor). ...

  8. img前置显示屏装load图片

    只需要设置img的background能够 <img src="" alt="" class="detailImg"  > cs ...

  9. vb.net版本房收费系统改造

    房费制开始重建的最终版本. 前几天.刚刚看完三层的视频,在视频中具体的解说了一个登录功能.天真的我,当时以为三层结构是那么的简单,所以我草草地做完总结之后,就非常快就開始机房收费系统的重构了.但是谁想 ...

  10. WPF与缓动(一) N次缓动

    原文:WPF与缓动(一) N次缓动   WPF与缓动(一)  N次缓动                                                                  ...