行内样式（内联样式）

<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. AS中加载gradle时出现Gradle sync failed: Could not find com.android.tools.build:gradle.的错误

    时间:2019/12/7 这次接着整理加载gradle时出现的错误 出现的错误: Gradle sync failed: Could not find com.android.tools.build: ...

  2. Spring Boot入门简介-Maven配置

    一.简介 -- 简化Spring应用开发的一个框架: -- 整个Spring技术栈的一个大整合: -- J2EE开发的一站式解决方案. 二.背景: ① J2EE笨重的开发.繁多的配置.低下的开发效率. ...

  3. kvm实现快速增量盘模式的克隆脚本

    转自:http://zxlwz.blog.51cto.com/6952946/1852424 要求:备份的img磁盘格式只有qcow2格式支持增量盘使用和快照功能当你的一个虚拟机格式是raw格式时,请 ...

  4. Python多重继承之菱形继承

    继承是面向对象编程的一个重要的方式,通过继承,子类就可以扩展父类的功能.在python中一个类能继承自不止一个父类,这叫做python的多重继承(Multiple Inheritance ). 语法 ...

  5. 函数调用约定_stdcall[转]

    关键字 清理堆栈 参数入栈顺序 函数名称修饰(C) __cdecl 调用函数 右 à 左 _函数名 __stdcall 被调用函数 右 à 左 _函数名@数字 __fastcall 被调用函数 右 à ...

  6. Spring Boot自动装配原理源码分析

    1.环境准备 使用IDEA Spring Initializr快速创建一个Spring Boot项目 添加一个Controller类 @RestController public class Hell ...

  7. CCF_ 201512-2_消除类游戏

    水平方向遍历一次,竖直方向遍历一次,将需要删除的位置标志入一个数组,最后比较输出即可. #include<cstdio> #include<iostream> using na ...

  8. DG参数 LOG_ARCHIVE_DEST_n

    DG参数 LOG_ARCHIVE_DEST_n This chapter provides reference information for the attributes of the LOG_AR ...

  9. CentOS 6.4安装mongo的php扩展包

    最近安装mongo相关内容,因mongodb下载好解压即可使用,在这里我就不多说了,这里我分享下如何安装mongo的php扩展 首先下载扩展包https://github.com/mongodb/mo ...

  10. LVS 部署

    一.LVS的组成 LVS 由2部分程序组成,包括 ipvs 和 ipvsadm. 1. ipvs(ip virtual server):一段代码工作在内核空间,叫ipvs,是真正生效实现调度的代码.2 ...