• CSS(网页样式语言)基础


    所谓全栈,个体可以独立地完成系统的设计、开发、测试、部署以及运维。打通一个领域从无到有的全过程。

    为什么会有 markdown 文本编辑显示工具呢,因为 html 太重了。markdown 是 html 的一种简化思路,css 则是另外一种。css 是对 html 其中部分工作的提取和分担,这部分的工作就在于 html 各种标签的属性以及 style 属性的定制等。使得 html 单纯用于文档结构格式和整体布局。

    css 是 html 的一个辅助语言,用来描述网页样式,html 没有css也可以工作(可以通过标签的各种属性以及 style 属性定制样式),但 css 可以把样式做抽象,和 html 剥离,这样 html 单纯用作布局(css 与 html 的关系因此也可以看做,抽象和分离的关系)。

    • hello_world.html

      <html>
          <head>
              <link rel="stylesheet" type="text/css" href="style.css" />
          </head>
          <body>
              <h1>hello world</h1>
          </body>
      </html>
    • style.css

      h1 {
          color: red
      }

    1. 设置标签样式

    • CSS 样式通常写在<head></head>下的 <style></style>下:

      <html>
          <head>
              <style type="text/css"> 
              </style>
          </head>
          <body>
          ...
          </body>
      </html>
    • 我们可以在 style 标签内将 body 标签的前景色设置为红色:

      <style type="text/css">
          body {
              color: red;
          }
      </style>

    2. 设置 id 样式

    • 比如我们在网页主体(body)中使用<div>标签(div,division,区块,用于划分版区),定义一个 id 为 swatch 的版区:

      <body>
          <div id="swatch"> </div>
      </body>
    • 通过 # 进行索引,然后设置样式:

      <style type="text/css">
          #swatch {
                  width: 150px;
                  height: 100px;
                  color: #fff;
                  background-color:blue;
          }
      </style>

    3. 设置 class 的样式

    • class 类属性用来标识一组具有相同性质的元素;

      <body>
          <p class="marker">....</p>
          <p>
              <span class="marker">....</span>
              <span class="marker">....</span>
          </p>
      </body>
    • 通过 . 进行选择定位:

      <style type="text/css">
          .marker {
                  background-color:#ff;
          }
      </style>

    4. 复合选择器(compound selector)

    <div id="bt">
        <a >....</a>
    </div>
    <p>
        <a ...></a>
    </p>

    这时如何定位<div>下的 <a>而不是<p>下的呢?就要用到 compound selector 的概念了:

    #bt a {
        text-decoration: none;
    }
  • 相关阅读:
    MySQL大表优化方案
    写一个简单脚本检测mysql主从是否正常
    Nginx配置基于ip的虚拟主机
    推荐一些好的linux学习网站
    shell基础入门(一)
    centos7和linux防火墙配置入门
    centos7.0之vsftpd随笔
    获取系统相关属性
    linux 文件管理操作入门
    ANSI文件操作
  • 原文地址:https://www.cnblogs.com/mtcnn/p/9423141.html
Copyright © 2020-2023  润新知