CSS入门之引用、选择器、属性(六分之三)

2018-07-12 admin

没办法,我直播教小伙伴CSS入门,属性讲完,准备说定位的时候,他们就喊停,hold不住了。。。所以先写到六分之三,23333333

要点 解释
引用 如何使用定义的CSS样式方式
选择器 指明被定义样式的标签
属性 样式定义时具体定义的内容
定位 如何将标签放置到具体的位置(下篇)
盒模型 面试经典题(下篇)
显示 如何显示标签与标签布局(下篇)

引用

  1. 内联

    开标签或自闭合标签的style属性上写明对应的CSS定义内容,即为内联方式引用,如下:

    <div style='color: red;'>普通内容</div>

    相关效果见:CodePen

  2. 内部标签

    定义在head标签下的style标签内容,即为内部标签方式引用,如下:

    <head>
        <style>
        #head-style {
            color: green;
        }
        </style>
    </head>
    <body>
        <div id='head-style'>
            普通内容
        </div>
    </body>
    

    相关效果见:CodePen

  3. 外部链接

    定义在head标签下的link标签属性,即为外部链接方式引用,如下:

    <link rel='stylesheet' href='anypath/any.css'>

    any.css内容如下:

    #out-link {
        color: blue;
    }
    

    对应适用标签如下:

    <div id='out-link'>普通内容</div>

    相关效果见:CodePen

以上为三种引用方法,不包括JS

选择器

  1. id选择器

    唯一性,原则上通篇文件有且仅有一个id名称,不可重复

    任意标签的id属性,其属性值即为其唯一id,此id其他标签不可再用。

    如:

    <div id='first-id'>xxx</div>

    CSS选择器表达式如下:

    #first-id {
    
    }
    

    表达式关键词:#

  2. class选择器

    任意标签的class属性,其属性值即为其class,此class与其他标签可共用,定义后所有同class标签一起生效。

    如:

    <div class='first-class'>xxx</div>

    CSS选择器表达式如下:

    .first-class {
    
    }
    

    表达式关键词: .

  3. 标签选择器

    任意标签的标签名本身就是其选择器,由于标签的可复用性,所以使用标签选择器即为对所有同标签生效。

    CSS选择器表达式如下:

    div {
    
    }
    

    表达式关键词:无

  4. 伪类

    伪类不算是选择器,但是因为独特,这里拎出来说一下

    在选择器选中的基础上,对该标签的某种特性时段定义相关CSS属性,如hover(鼠标覆盖过程中),active(激活过程中)等等。

    CSS选择器表达式如下:

    div:hover {
        color: yellow;
    }
    

    相关效果见:CodePen

    表达式关键词::特性

属性

属性即CSS样式定制的具体样式,比如定制宽高,分别为width与height等。

相同的属性在不同的定位于显示中会有不同的表现,这里暂不表述过多,此处将属性大致分为四类,如下:

  1. 可继承属性

    普通标签可能存在子标签的情况,因此在给一个普通标签定义可继承属性时候,若子标签未定义覆盖父级定义的属性,则继承父级属性的值,如font标签。

    如存在如下代码关系:

    <div class='father'>
        我是父级标签
        <div class='son'>
            我是子级标签
            <div class='grandson'>
                我是孙子标签
            </div>
        </div>
    </div>
    

    定义CSS如下:

    .father {
        color: purple;
    }
    

    相关效果见:CodePen

  2. 不可继承属性

    不可继承性则比较好理解,就是只对自己生效。 如存在如下代码关系:

    <div class='father'>
        我是父级标签
        <div class='son'>
            我是子级标签
            <div class='grandson'>
                我是孙子标签
            </div>
        </div>
    </div>
    

    定义CSS如下:

    .father1 {
        border: 1px solid red;
    }
    

    相关效果见:CodePen

  3. 与定位相关的属性

    定位下篇会说,这里只提一下主要相关属性:

    • position(定位方式)
    • top(距离上方距离)
    • right(距离右边距离)
    • bottom(距离下方距离)
    • left(距离左边距离)
  4. 与显示相关的属性

    显示下篇会说,这里只提一下主要相关属性:

    • display(显示方式)
    • width(宽度)
    • height(高度)
    • flex(弹性)
    • 其他flex相关

完整测试代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>CSS快速入门</title>
  <style>
    #id {
      color: red;
    }

    #testH2 {
      color: red;
    }

    .testClass1 {
      color: red;
    }

    /* 伪类 */
    .vir1 {
      color: green;
    }

    .vir1:hover {
      color: yellow;
    }

    /* h2 {
      color: red;
    } */
  </style>
  <!-- ../ 上级目录(../../../../)    ./当前目录    /根目录 -->
  <link rel="stylesheet" href="./index.css">
</head>

<body style='background: #eee'>
  <h2 class="vir1">选择器(优先级排序)</h2>
    <ol>
      <li id='id'>id(标记)</li>
      <li class='class'>class(类)</li>
      <li class='vir'>:特性(伪类)</li>
      <li>标签</li>
    </ol>

  <h2>属性</h2>
  <pre>
    选择器 {
      属性A: 值A;
      属性B: 值B;
    }
  </pre>

  <footer></footer>
</body>
</html>

感谢阅读,如果对你有任何帮助,深感荣幸。

如有问题,请留言。

如果觉得文章不错,还请关注一下,谢谢

原文链接:https://segmentfault.com/a/1190000015606801

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-35794.html

文章标题:CSS入门之引用、选择器、属性(六分之三)

相关文章
如何编写干净高效的CSS代码
其实CSS的学习并不困难,但在一些较为大型的项目中就显得杂乱无章,变得很难管理,尤其是不同的人编写CSS的风格总会略有不同,从团队合作的层面上来说,就更加难以沟通,所以,我们为此总结了一些如何实现高效整洁的CSS代码原则: 使用Reset但...
2015-11-12
jQuery中DOM树操作之复制元素的方法
本文实例讲述了jQuery中DOM树操作之复制元素的方法。分享给大家供大家参考。具体分析如下: 复制元素 前面提到的操作包括:插人新创建的元素、将元素从文档中的一个位置移动 到另一个位置,以及通过新元素来包装已有的元素。可是,有时候也会用到...
2015-11-13
Node.js的不足之处
跨平台编程能力不够强大 Bowery团队指出Go能很方便地在不同系统里进行程序编译,这是他们转入Go的重要原因之一。 作为开发平台,对Linux,Windows,OSX等常见操作系统提供支援是能否吸引开发者的基本要素。在Go中,开发者可以针...
2015-11-12
css布局的各种FC简单介绍:BFC,IFC,GFC,FFC
什么是FC? Formatting Context,格式化上下文,指页面中一个渲染区域,拥有一套渲染规则,它决定了其子元素如何定位,以及与其他元素的相互关系和作用。 BFC 什么是BFC Block Formatting Context,块...
2018-05-17
纯css实现窗户玻璃雨滴逼真效果
这里仅是用CSS技术来演示这样的一个场景,可能并不太实用。然而这是一个探索CSS新功能的最佳机会。可以让你尝试使用一些新特性和新工具。并且逐渐将在工作中实践。在制作窗口雨滴效果,将使用到HAML和Sass。 案例效果 看到上面的效果是不是...
2017-03-29
前端工程师应该具备的三种思维
如果你是一个天才等级的工程师(马上可以离开),可以独立完成一个很多事情,你可以是一个怪咖,因为我相信没有一个人不会不佩服你。但现实归现实,多数人都不是天才,而我们在职场上也不是单打独斗,我们需要团队合作,需要协调和配合,需要考虑除了代码以外...
2016-01-13
7个你可能不认识的CSS单位
浼楁墍鍛ㄧ煡CSS鎶€鏈�鎴戜滑铏界劧寰堢啛鎮夛紝鍦ㄤ娇鐢ㄧ殑杩囩▼鍗村緢瀹规槗琚�鍥颁綇锛岃繖璁╂垜浠�鍦ㄦ柊闂�棰樺嚭鐜扮殑鏃跺€欏彉寰楀緢涓嶅埄銆� 闅忕潃web缁х画涓嶆柇鍦板彂灞曪紝瀵逛簬鏂版妧鏈�鏂拌В鍐虫柟妗堢殑瑕佹眰涔熶細涓...
2015-11-11
三步搞定vue在vscode的环境配置问题
1. vscode基础开发插件 vscode-icons 图标美化 Debugger for Chrome 调试 Beautify 代码格式化 Prettier 代码格式化 ESLint 代码规范 JavaScript (ES6) cod...
2017-12-25
JavaScript正则进阶之路——活学妙用奇淫正则表达式
有些童鞋肯定有所疑惑,花了大量时间学习正则表达式,却发现没有用武之地,正则不就是验证个邮箱嘛,其他地方基本用不上,其实,大部分人都是这种感觉,所以有些人干脆不学,觉得又难又没多大用处。殊不知,想要成为编程大牛,正则表达式必须玩转,GitH...
2017-05-31
DOM之通俗易懂讲解
DOM 是所有前端开发每天打交道的东西,但是随着 jQuery 等库的出现,大大简化了 DOM 操作,导致大家慢慢的 “遗忘” 了它的本来面貌。不过,要想深入学习前端知识,对 DOM 的了解是不可或缺的,所以本文力图系统的讲解下 DOM 的...
2016-01-13
回到顶部