css有两大特性：继承性和层叠性

继承性

继承：给父级设置一些属性，子级继承了父级的该属性，这就是我们的css中的继承。

记住：有一些属性是可以继承下来 ： color 、 font-*、 text-*、line-* 。主要是文本级的标签元素。

但是像一些盒子元素属性，定位的元素（浮动，绝对定位，固定定位）不能继承

有一些属性不能被继承，如：border, margin, padding, background等。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

    <style type="text/css">

        .father{

            color: red;

        }

    </style>

</head>

<body>

    <!--

       继承：给父级设置一些属性，子级继承了父级的该属性，这就是我们的css中的继承。

       记住：有一些属性是可以继承下来 ： color 、 font-*、 text-*、line-* 。主要是文本级的标签元素。

       但是像一些盒子元素属性，定位的元素（浮动，绝对定位，固定定位）不能继承。

    -->

    <div class="father" id="user">

        <p>mike</p>

    </div>

</body>

</html>

inherited from 继承

前端 CSS的继承性的更多相关文章

  1. 前端----css的继承性和层叠性

    css有两大特性; 继承性和层叠性 继承性 继承:给父级设置一些属性,子级继承了父级的该属性, 这就是我们的css中的继承, 需要注意的是 有一些属性是可以继承下来的: color   ,  font ...

  2. 前端 CSS 继承性和层叠性

    CSS有两大特性:继承性和层叠性 前端 CSS的继承性 前端 CSS层叠性 CSS选择器优先级 前端 CSS 优先级 样式设置important

  3. CSS样式----CSS的继承性和层叠性（图文详解）

    CSS的继承性 我们来看下面这样的代码,来引入继承性: 上方代码中,我们给div标签增加红色属性,却发现,div里的每一个子标签<p>也增加了红色属性.于是我们得到这样的结论: 有一些属性 ...

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

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

  5. 前端CSS(1)

    前端基础CSS(1)   一.css的引入方式 现在的互联网前端分三层: HTML:超文本标记语言.从语义的角度描述页面结构. CSS:层叠样式表.从审美的角度负责页面样式. JS:JavaScrip ...

  6. day 45 前端CSS

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

  7. css的继承性

    为了减少css的代码量,很多时候,我们必须要非常重视css的继承性 1.首先,有些属性是不能继承的.这没有任何原因,只是因为它就是这么设置的.举个例子来说:border属性,大家都知道,border属 ...

  8. 前端CSS编程之道-LESS

    由于前端css编写繁琐,最近开始学习LESS,用LESS编写文件.less文件可以直接编译成我们要的.css文件 学习Less 我下面是我练习时的截图,希望小伙伴也能动手自己写一下,而不是复制粘贴模式 ...

  9. 扯一扯前端css的整体架构设计：（2）base基础类的那些事儿

    周一下午在实验室写了第一篇博文,有几个人捧场,那咱就得接着下去啊.然后我觉得现在写的内容更多的偏向于谈一下我对于前端css架构的理解和前端经验的一个小总结,所以就把标题里原来的[项目总结]给删掉了.但 ...

随机推荐

  1. KeSetEvent

    KeSetEvent https://bbs.pediy.com/ dll inject   dll注入

  2. 如何用DNS+GeoIP+Nginx+Varnish做世界级的CDN

    如何用DNS+GeoIP+Nginx+Varnish做世界级的CDN     如何用BIND, GeoIP, Nginx, Varnish来创建你自己的高效的CDN网络?CDN,意思是Content ...

  3. day04记

    useGeneratedKeys useGeneratedKeys这个只在insert语句中有效,正常情况下useGeneratedKeys默认为false 当useGeneratedKeys为tru ...

  4. 【leetcode】1138. Alphabet Board Path

    题目如下: On an alphabet board, we start at position (0, 0), corresponding to character board[0][0]. Her ...

  5. IntelliJ IDEA VM options（转）

    Custom IntelliJ IDEA VM options # Custom IntelliJ IDEA VM options ##################JVM模式########### ...

  6. js 遍历数组取出字符串用逗号拼接

    var arr = [{"name":"hhh"},{"name":"dddd"}] //用js function ge ...

  7. mysql Alias操作符 语法

    mysql Alias操作符 语法 作用:为列名称和表名称指定别名 大理石构件 语法:SELECT column_name(s) FROM table_name AS alias_name mysql ...

  8. js解决手机键盘影响定位的问题

    // 滑动其他地方隐藏软键盘document.body.addEventListener('touchend', function(evt) { document.activeElement.blur ...

  9. 倍增O(1)求区间&值与|值

    ;i<=n;++i) f[i][]=a[i],g[i][]=a[i]; ;(<<j)<=n;++j) ;(i+(<<j)-)<=n;i++) { f[i][j ...

  10. SpringBoot自定义FailureAnalyzer

    官网说明 1.1 创建自己的 FailureAnalyzer FailureAnalyzer是一种在启动时拦截 exception 并将其转换为 human-readable 消息的好方法,包含在故障 ...