行内样式（内联样式）

<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. 解决docker容器无网络、无法连接互联网----长期更新

    众所周知,docker有三种默认的网络模式,分别是: bridge host none 然后需要注意的就是内核转发这个,一定不要忘了!配置方法如下 echo -e "net.ipv4.ip_ ...

  2. vue中如何在本地导入js文件

    import {setStore,setUser,getStore,removeStore} from "../../../public/localstory" 在导入js文件时, ...

  3. 讲一下java，c语言，c+和c++都是干嘛的，他们运行的软件都是哪些

    讲一下java,c语言,c+和c++都是干嘛的,他们运行的软件都是哪些 都是用于开发软件的,用于不同的方面.比如,淘宝的后台,是java做的.而腾讯的qq的后台服务器,是c和c++的.暴雪游戏的后台服 ...

  4. Ceph 存储集群-低级运维

    低级集群运维包括启动.停止.重启集群内的某个具体守护进程:更改某守护进程或子系统配置:增加或拆除守护进程.低级运维还经常遇到扩展.缩减 Ceph 集群,以及更换老旧.或损坏的硬件. 一.增加/删除 O ...

  5. 死磕mysql（2）

    想测试自己的查询语句,导入批量的数据,一开始很慢以为是自己的语句有问题,后来是这个autocommit,效率相差好多好多............ delimiter // create procedu ...

  6. Java的Integer与int互转

    int转Integer ; Integer wrapperi = new Integer(i); Integer转int ); int i = wrapperi.intValue(); JDK1.5以 ...

  7. python 迭代器和生成器详解

    一.迭代器 说迭代器之前有两个相关的名词需要介绍:可迭代对象:只要定义了__iter__()方法,我们就说该对象是可迭代对象,并且可迭代对象能提供迭代器.迭代器:实现了__next__()或者next ...

  8. python dict 中的中文处理

    dict1 = {'中':'国 '} print dict1 ##{'\xc3\xa4\xc2\xb8\xc2\xad': '\xc3\xa5\xc2\x9b\xc2\xbd'} import jso ...

  9. sqlserver install on linux chapter two

    The previous chapter is tell us how to install sqlerver on linuix Today, we will see how to make it ...

  10. centos6.5下编译安装单实例MySQL5.1

    MySQL5.1版本安装3步曲: 1) ./config 指定编译安装参数 2) make 3) make install 查看系统版本号 [root@meinv01 ~]# cat /etc/red ...