zoukankan      html  css  js  c++  java
  • 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;
    }
  • 相关阅读:
    区别@ControllerAdvice 和@RestControllerAdvice
    Cannot determine embedded database driver class for database type NONE
    使用HttpClient 发送 GET、POST、PUT、Delete请求及文件上传
    Markdown语法笔记
    Property 'sqlSessionFactory' or 'sqlSessionTemplate' are required
    Mysql 查看连接数,状态 最大并发数(赞)
    OncePerRequestFilter的作用
    java连接MySql数据库 zeroDateTimeBehavior
    Intellij IDEA 安装lombok及使用详解
    ps -ef |grep xxx 输出的具体含义
  • 原文地址:https://www.cnblogs.com/mtcnn/p/9423142.html
Copyright © 2011-2022 走看看