了解CSS

文过饰非452
71 阅读1分钟

这是我这是我参与「第四届青训营 」笔记创作活动的的第2天

了解CSS

CSS是什么

3V`PBBTI1}O_}~21JPM2DE9.png

CSS的组成部分

包含选择器Selector、选择器Property、属性值Valuehe和声明Delclaration。

在页面中使用CSS

O0B3FPA7JB$}YZ9%I17J1}T.png

  • 外链：把CSS放在一个单独文件，然后用link引入进来。
  • 嵌入：把样式代码嵌入HTML里面
  • 内联：写在HTML的style属性里面（不推荐）

CSS是如何工作的

当浏览器显示文档时，它必须将文档的内容与其样式信息结合。它分两个阶段处理文档：

  1. 浏览器将HTML和转化成DOM。DOM在计算机内存中表示文档。它把文档内容和其样式结合在一起。
  2. 浏览器显示 DOM 的内容。

DOM

DOM是一种树形结构. 标记语言中的每个元素,属性,文本片段都变为一个 DOM 节点。这些节点由它们与其它 DOM 节点的关系来定义。有的元素是某些子节点的父节点，且这些子节点有兄弟（节点）。

由于 DOM 是 CSS 与文档内容的相遇之处，理解 DOM 有助于设计，调试和维护 CSS 文件。

选择器Selector

 Selector一般称为选择器，也可以翻译为多路复用器，是Java NIO核心组件之一，主要功能是用于检查一个或者多个NIO Channel（通道）的状态是否处于可读、可写。如此可以实现单线程管理多个Channel（通道），当然也可以管理多个网络连接。

　　使用Selector的好处在于，可以使用更少的线程来处理更多的通道，相比使用更多的线程，避免了线程上下文切换带来的开销等。

通配选择器

  • 通配选择器用一个星号（*）表示。单独使用时，这个选择器可以与文档中的任何元素匹配，就像一个通配符。如，让页面上的所有文本都为黑色：

      * { color: black; }

  • 当然也可以选择某个元素下的所有元素。在与其他选择器结合使用时，通配选择器可以对特定元素的所有后代应用样式。如，以下代码为 .demo 元素的所有后代，添加一个灰色背景：

      .demo * { background: gray; }

  • 虽然通配选择器的功能强大，但是出于效率考虑，很少有人使用它。由于各个浏览器对每个元素上的默认边距都不一致，为了保证页面能够兼容多种浏览器，通常在Reset样式文件中，使用通配选择器进行重置，来覆盖浏览器的默认规则：

     * { margin: 0; padding: 0; }

标签选择器

标签选择器也称元素选择器、类型选择器，它直接使用元素的标签名当做选择器，将选择页面上所有该种标签。

<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.0">
    <title>标签选择器</title>
    <style>
        span {
            color: red;
        }
        p {
            color: rgb(98, 0, 255);
        }
        ul {
            /* 去掉无序列表的小圆点 */
            list-style: none;
        }
        a {
            /* 去掉超级链接的下划线 */
            text-decoration: none;
        }
    </style>
</head>
<body>
    <p>
        今天天津<span>又下雨了</span>
    </p>
    <div>
        <div>
            <ul>
                <li>A</li>
                <li><span>B</span></li>
                <li>C</li>
            </ul>
        </div>
    </div>
    <a href="http://www.baidu.com">百度一下，你就知道</a>
</body>
</html>

id选择器

id选择器可以使用井号#前缀，选择指定id的标签，示例代码如下：

        #para {
            color: red;
        }
    </style>
</head>
<body>
    <p id="para">
        我是一个段落，我有id属性。
    </p>
</body>

类选择器

class属性表示“类名”，类名的命名规范和id的命名规范相同。使用点.前缀选择指定class的标签。

属性选择器

属性选择器可以为拥有指定属性的 HTML 元素设置样式；属性选择器通过 [] 来定义，[] 内部为元素的属性，属性选择器的权重要高于标签选择器。

/* 选择 div 下的 p 标签的 class 属性值为 blue 的元素 */
div p[class="blue"] {
	background: blue;
}


<div>
  <p class="blue">p 标签</p>
  <p class="blue red">p 标签</p>
  <p class="blue">p 标签</p>
</div>

20190929172009116.png

伪类

AR{CRW(8{)V897@HQ4%Y%YS.png

  1. CSS 伪类是用来添加一些 '选择器' 的特殊效果(特殊状态)。

  2. 伪类实际使用场景举例:

    1. 设置鼠标悬停在元素上时的样式 。
    2. 为已访问和未访问链接设置不同的样式 。
    3. 设置元素获得焦点时的样式 。

组合（Combinators）

![@~FLR1~DXURF@DI0M5JJ.png

选择器组

W1~ZS3H(RQLA)FKY]6C2G.png

颜色

  • 十六进制代码用于以基数16的十六进制表示形式表示颜色的RGB(红绿蓝) 分量。 如果三个RGB配对( R，G和B )中的每一个值都相同，则可以将颜色代码缩短为三个字符(每个配对的第一个数字)。
  • RGB也称为RGBa， 代表红色，绿色和蓝色，并且需要三个介于0和255之间的单独值，放在括号之间，分别对应于红色，绿色和蓝色的十进制颜色值。
  • RGBa允许在0.0和1.0之间添加一个alpha参数来定义不透明度 。
  • 这是一种声明颜色是使用HSL还是HSLa的方法 ，类似于RGB和RGBa 。 
  • HSL代表色相，饱和度和亮度 。色相是色轮上的度数(从0到360)。 饱和度是介于0％和100％之间的百分比。 亮度也是0％到100％之间的百分比。
  • HSLa允许您在0.0到1.0之间添加一个附加的alpha参数来定义不透明度。

字体font-family

![%2%HFROVA((WNAU)8TOTOQ.png

使用 Web Fonts

网络-字体们，就是我们自己定义的图片字体。把图片变成字体，然后就可以进行各种字体操作了，比如加粗，字号增大，下划线。

<style>
    .line {
        font-family: 'Courier New', Courier, monospace;
    }
</style>

font-size

DPJ{0GS{L%AGKS_4VD}7TSW.png

avatar
文章
阅读
粉丝