css学习（一）

Ailzac
276 阅读2分钟

CSS

CSS选择器

css优先级

  • 内联样式 > id > class > 标签
  • 多个id > 单个id 多个class > 单个class 多个标签>单个标签
  • 书写css尽量选择低等级的选择器
  • 数量相同的id,class选择器，书写在后面会覆盖前面的
/*main.css*/
h1 {
  color: #2f4f4f;
  margin-bottom: 10px;
  font-family: serif;
}

.title {
  font-family: monospace;
}

#page-tile {
  font-family: sans-serif;
}

.nav {
  margin-top: 10px;
  list-style: none;
  padding-left: 0;
}

.nav li {
  display: inline-block;
}

.nav a {
  color: white;
  background-color: #13a4a4;
  padding: 5px;
  border-radius: 2px;
  text-decoration: none;
}

.featured {
  background-color: orange;
}


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="main.css" />
  </head>
  <body>
    <header class="page-header">
      <h1 id="page-title" class="title">Wombat Coffee Rosters</h1>
      <nav>
        <ul class="nav">
          <li>
            <a href="/">Home</a>
          </li>
          <li>
            <a href="/coffees">Coffees</a>
          </li>
          <li>
            <a href="/brewers">Brewers</a>
          </li>
          <li>
            <a href="/specials" class="featured">Specials</a>
          </li>
        </ul>
      </nav>
    </header>
  </body>
</html>

css选择器使用原则

  • 非必要不要使用id选择器
  • 非必要不要使用 !important

CSS属性继承

  • 文本相关属性

    color、font、font-family、font-size、font-weight、font-variant、font-style、line-height、letter-spacing、text-align、text-indent、text-transform、white-space、word-spacing

  • 其他属性

    list-style、list-style-type、list-style-position、list-style-image、border-collapse、border-spacing

  • 属性值为inherit，会继承父元素的值

  • 属性值为initial，会变成默认初始值

CSS属性简写

  • 简写方向顺序一般为上、右、下、左（4方向），上下、左右（2方向）。

CSS布局单位使用

  • 绝对长度单位：px、mm、cm、in、pt、pc

    1in = 25.4mm = 2.54cm = 6pc = 72pt = 96 px

  • 相对单位：em(乘以当前元素字号大小,字号大小设置时为集成字号来计算)、rem(乘以根元素的字号大小)

  • 通常用rem设置字号、px设置边框、em设置其他大部分属性

  • 视口相对单位：vh(视口高度的1%)、vw(视口宽度的1%)、vmin(宽度和高度中较小一方的1%)、vmax(宽度和高度中较大一方的1%)

CSS自定义变量

:root {
  --main-font: Helvetica, Arial, sans-serif;
  --main-bg: #fff;
  --main-color: #000;
  font-size: 0.75em;
}
p{
  background-color: var(--main-bg);
  color: var(--main-color);
}
p.special{
    /*第二个参数设置无变量时的值*/
    color: var(--second-color,blue);
    /*改变变量值,能够继承层叠*/
    --main-bg:#f00;
}

//通过js设置css自定义属性变量
var rootElement = document.documentElement;
var styles = getComputedStyle(rootElement);
var mainColor = styles.getPropertyValue('--main-bg);
rootElement.style.setProperty('--main-bg','#cdf');
avatar
文章
阅读
粉丝