行内样式（内联样式）

<h1 style="color:red;font-size:20px;">css行内样式</h1>

内部样式表（嵌入样式）

<!-- -->解决低版本浏览器不识别style标签的情况

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        <!--

        p{

            color:blue;

        }

        -->

    </style>

</head>

<body>

    <h1 style="color:red;font-size:20px;">css行内样式</h1>

    <p>行内样式</p>

    <p>嵌入样式</p>

    <p>外部样式</p>

    <p>导入样式</p>

</body>

</html>

外部样式表（建议）

<link rel="stylesheet" href="index2.css"><!-- grey -->

导入式

页面加载很慢时可能出现无样式

同时存在浏览器兼容性问题

位于style标签的第一行

    <style>

        <!--

        @import url('index.css');/*green*/

        p{

            color:blue;

        }

        -->

    </style>

css使用方式区别

优先级：

就近原则，谁距离元素最近，谁的优先级越高

css选择器

标签选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        p{

            color:blue;

        }

    </style>

</head>

<body>

    <p>css样式</p>

</body>

</html>

类选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        p{color:blue;}

        .red{color:red;}

    </style>

</head>

<body>

    <p>css样式</p>

    <p class="red">通过类设置样式</p>

</body>

</html>

id选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        p{color:blue;}

        .red{color:red;}

        #big{font-size:30px;}

    </style>

</head>

<body>

    <p>css样式</p>

    <p class="red">通过类设置样式</p>

    <p id="big">通过id设置样式</p>

</body>

</html>

全局选择器（通配符选择器）

*{margin:;padding:;font-family: "宋体";}

群组选择器

p,div{font-family: "宋体";}

后代选择器

之间用空格隔开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        p em{color:red;}

    </style>

</head>

<body>

    <p><em>css</em>样式</p>

    <div>通过<em>id</em>设置样式</div>

</body>

</html>

伪类选择器

链接伪类的顺序，a:hover必须置于a:link和a:visited之后，才有效，a:active必须在a：hover之后，才有效。而link、visited两个伪类之间顺序无所谓，谁在前都可以

顺序：:link  :visited  :hover  :active 或者  :visited  :link  :hover  :active

IE6不支持其他元素的:hover和:active状态

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        a:link{color:black;}

        a:hover{color:yellow;}

        a:visited{color:green;}

        a:active{color:red;}

        p:hover{color:yellow;}

        p:active{font-size:20px;}

    </style>

</head>

<body>

    <a href="#">链接样式</a>

    <p>p标签样式</p>

</body>

</html>

css继承和层叠

IE6以下版本，表格不会继承body的属性

IEtester测试IE浏览器个版本的兼容性

谷歌浏览器默认字体大小是16px，h1标签默认字体大小是2em，在谷歌浏览器中显示为32px

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body{font-size:12px;}

        p{color:red;border:1px solid;}

        div{color:red;}

        div{font-weight:bold;}

    </style>

</head>

<body>

    <!-- span会继承p元素的部分样式属性

        部分样式无法继承，如border

     -->

    <p>css<span>继承</span></p>

    <div>css层叠</div>

    <!-- h1字体大小为24px -->

    <h1>h1字体大小是2em</h1>

</body>

</html>

CSS语法、选择器、继承、层叠的更多相关文章

  1. css选择器---继承,优先级,层叠

    CSS三大特性—— 继承. 优先级和层叠. 继承:即子类元素继承父类的样式; 优先级:是指不同类别样式的权重比较; 层叠:是说当数量相同时,通过层叠(后者覆盖前者)的样式. css选择符分类 首先来看 ...

  2. python 全栈开发，Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)

    一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...

  3. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  4. CSS核心内容：层叠和继承

    实际的工作中,当有多个选择器作用在一个元素上时,哪个规则最终会应用到元素上?其实这是通过层叠机制来控制的,这也和样式继承(元素从其父元素那里获得属性值)有关.样式的优先级就是这样的一个机制,它包括!i ...

  5. Unit02： CSS 概述 、 CSS 语法 、 CSS 选择器 、 CSS声明

    Unit02: CSS 概述 . CSS 语法 . CSS 选择器 . CSS声明 my.css p { color: yellow; } demo1.html <!DOCTYPE html&g ...

  6. 1 CSS简介&语法&选择器及优先级&背景&文本&字体&链接&列表&表格

    什么是CSS? Cascading Style Sheets层叠样式表,样式定义如何显示HTML元素 样式通常存储于样式表中,外部样式表通常存储在CSS文件中 多个样式定义可层叠为1,样式对网页中元素 ...

  7. 前端基础----CSS语法、CSS四种引入方式、CSS选择器、CSS属性操作

    一.CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如: h1 {color:red; font-size:14px;} 二.CSS四种引入方式 1,行内式 行内式是在标 ...

  8. CSS选择器、层叠相关的基础知识

    CSS是Cascading Style Sheets的英文缩写,即层叠样式表.CSS2.1是W3C于2007年发布,现在推荐使用的.CSS3现在还处于开发中,有部分浏览器的新版本支持. 1. CSS ...

  9. 前端基础--css基本语法,选择器

    一.css概述 CSS(Cascading Style Sheet)层叠样式表,定义如何显示HTML元素,给HTML设置样式,让它更加美观.当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式 ...

  10. css语法规范、选择器、字体、文本

    css语法规范 使用 HTML 时需要遵从一定的规范,CSS 也是如此.要想熟练地使用 CSS 对网页进行修饰,首先需要了解CSS 样式规则. CSS 规则由两个主要的部分构成:选择器以及一条或多条声 ...

随机推荐

  1. Lambda 表达式入门，看这篇就够了

    说出来怕你们不相信,刚接到物业通知,疫情防控升级了,车辆只能出不能进,每户家庭每天可指派 1 名成员上街采购生活用品.这不是谣言,截个图自证清白,出自洛阳市湖北路街道处. 看来事态严峻,这样看似好心, ...

  2. 练习2-15 求简单交错序列前N项和 (15 分)

    练习2-15 求简单交错序列前N项和 (15 分) 本题要求编写程序,计算序列 1 - 1/4 + 1/7 - 1/10 + ... 的前N项之和. 输入格式: 输入在一行中给出一个正整数N. 输出格 ...

  3. QQ截图工具截取

    邮箱截图插件 TXGYMailCamera.dll(X86) Export: CameraWindow CameraSubArea CameraWindowLikeSpy 调用参数: rundll32 ...

  4. zabbix4.0的安装与配置

    #安装zabbix监控首先的先安装LNMP环境,在这里我采用事先准备好的脚本进行安装LNMP环境 脚本内容如下: #!/bin/bash # DATE:Wed Jan # hw226234@126.c ...

  5. PTA 7-10 树的遍历（二叉树基础、层序遍历、STL初体验之queue）

    7-10 树的遍历(25 分) 给定一棵二叉树的后序遍历和中序遍历,请你输出其层序遍历的序列.这里假设键值都是互不相等的正整数. 输入格式: 输入第一行给出一个正整数N(≤30),是二叉树中结点的个数 ...

  6. python库之matplotlib学习---图无法显示中文

    在代码前面加上 plt.rcParams['font.sans-serif'] = ['SimHei'] # 用来正常显示中文标签 plt.rcParams['axes.unicode_minus'] ...

  7. java服务器端线程体会

    一个完整的项目包括服务器和客服端 服务器端初步编写: (1) 服务器端应用窗口的编写 (服务器类Server): 包括窗口和组件的一些设置, 添加一些客服端的元素,如客服端在线用户表(Vector), ...

  8. CentOS 7 GNOME桌面系统 网络配置

    问题概述:在学习Linux系统的过程中,在WORKSTATION 14 PRO上安装了CentOS 7 Linux虚拟机,安装过程一切正常,但在应用过程中无法连接网络: 具体问题:1. 通过 ip a ...

  9. Oracle11G DG 搭建及管理

    一.准备工作 环境准备 主数据库Oracle Database安装 备服务器Oracle Database software 安装 二.正式配置 三.基本管理 -------------------- ...

  10. NPOI word文档表格在新的文档中多次使用

    最近有一个项目,涉及到文档操作,有一个固定的模版,模版中有文字和表格,表格会在新的文档中使用n多次 //获取模版中的表格FileStream stream = new FileStream(strPa ...