行内样式（内联样式）

<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. Leetcode 题目整理-7 Remove Element & Implement strStr()

    27. Remove Element Given an array and a value, remove all instances of that value in place and retur ...

  2. Springboot | 私人订制你的banner

    1. 搭建一个springboot模块 2. 配置POM文件 3. 自定义banner 3.1 自定义文字字符图案banner 3.2 自定义图案字符图案banner 自定义banner有什么用呢? ...

  3. 死磕dtd(1)

    看到安卓开发里大量的xml文件和layout里的Android UI开始复习一下xml xml的校验规则依据dtd dtd里面大小写敏感.....查找了好久才发现这个问题 <?xml versi ...

  4. objectarx 统计面积

    除了最后一个输出面积到excel没做,其他都是做了的.只支持AcDbPolyline和AcDbCircle.这是我模仿网上的动态图做的,主要是为了练习.下面我把自己的一些心得分享出来.使用到的一些帮助 ...

  5. Java面向对象XMind

    Java面向对象的思维导图

  6. POJ_1006_中国剩余

    http://poj.org/problem?id=1006 中国剩余定理用来解求模方程组,用到了逆元. 这题三个数互质,直接用扩展欧几里德可得逆元. #include<iostream> ...

  7. mybaitis的延迟加载

    概念:延迟加载:用到的时候才加载 因为我们在多表查询是,效率不如单表快,多个单表查询,然后使用懒加载,完成 多表关联查询 什么情况下使用懒加载 mybaitis中的表关系是一对一或者一对多的时候 我们 ...

  8. 一口气说出Redis 5种数据结构及对应使用场景，面试要加分的

    整理了一些Java方面的架构.面试资料(微服务.集群.分布式.中间件等),有需要的小伙伴可以关注公众号[程序员内点事],无套路自行领取 更多优选 一口气说出 9种 分布式ID生成方式,面试官有点懵了 ...

  9. djiango 配置文件(setings)

    """ Django settings for ORM project. Generated by 'django-admin startproject' using D ...

  10. Go语言实现：【剑指offer】二叉搜索树的后序遍历序列

    该题目来源于牛客网<剑指offer>专题. 输入一个整数数组,判断该数组是不是某二叉搜索树的后序遍历的结果.如果是则输出Yes,否则输出No.假设输入的数组的任意两个数字都互不相同. Go ...