首页
学习
活动
专区
圈层
工具
发布

前端基础-CSS基础(五)

本文目录

继承

层叠命名规范参考

继承
代码语言:javascript
复制
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>继承</title>
        <style>
            div{
                color: red;
                border: #0000ff 1px solid;
            }

            p{
                border: #0000ff 1px solid;
            }
        </style>
    </head>
    <body>
        asdfafd   asdffd
        <div>
            asdfadf asdfasdf
            <span>asdfasdf</span>
            <span>asdfasdf</span>
            <p>这是一个p标签</p>
        </div>
        asdfa asdffadf

    </body>
</html>
  • 父元素定义了样式,子元素也使用了对应的样式,这叫做继承。
  • 并不是所有样式都可以被继承,例如border属性。
  • 页面的布局都是CSS+DIV实现的。
    • p标签前后的内容会换行。
    • div标签前后的内容会换行;是一个容器,不会改变里面内容的样式;可以放入任何的标签/ 的内容。
    • span标签也是容器,一般放入的内容:文本/ a标签,前后的内容不会换行。

层叠

代码语言:javascript
复制
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            p{
                color: blue;
                font-size: 50px;
            }
        </style>
    </head>
    <body>
        <p style="color: red;">这是一个段落</p>
    </body>
</html>
  • 对同一个内容指定了多种样式,如果样式是不一样的,就叠加生效;如果样式是一样的,就按照就近原则。

命名规范

  • 采用英文字母,数字,中划线,下划线命名,但不建议使用下划线;
  • 以英文字母开头,不能以数字、中划线、下划线开头;
  • 一个单词时,全部使用小写;
  • 多个单词时,可以使用驼峰命名,或使用中划线、下划线分割单词;
  • 命名时,尽量有意义;
  • 不要随意使用id;
  • 不要随意使用缩写,除非时常用的。

参考

  • 黑马程序员 120天全栈区块链开发 开源教程 https://github.com/itheima1/BlockChain
下一篇
举报
领券