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

css是什么

Cascading Style Sheets 层叠样式表

css用来做什么

定义页面,元素的样式（设置字体，颜色，位置大小，动画效果）

CS基础代码

页面中使用css三种方法

1.外链

把css的定义放在一个单独的文件里边，然后用link标签把它引入到页面里
外联使用较多
内容和样式的分离
功能上的分工

2.嵌入

直接把样式代码嵌套进标签里
关注点分离，把这个组件相关的东西都放在一个地方去维护

3.内联

把对这个标签的一些样式直接写在这个标签的style属性里（这样内联的样式就不需要去写选择器了，因为直接给当前的元素写样式了）
不常用

<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>Document</title>

    <style>
        /* css的范围 里的注释*/
        /* 选择器 */
        /* 标签名选择器 */
        /* div{
            color: red;
        } */
        /* 类名选择器 */
        .one {
            color: rgb(23, 206, 181);
            font-size: 32px;
            font-weight: bold;
            font-style: italic;
            /* text-decoration: underline; */
            text-decoration: line-through;
        }

        h3 {
            color: rgba(50, 74, 255, 0.734);
            font-size: 50px;
        }
    </style>
</head>

<body>
    <!-- HTML的注释 -->
    <div class="one">hello world</div>
    <div class="one">hello div</div>
    <h3>hello world</h3>
</body>

</html>

css是如何工作的的

打开一个页面之后，浏览器会加载这个页面，然后HTML进行解析，解析出一棵树形的结构，叫dom树，经过解析css时会做一个加载以及解析，从而得到一个渲染树，之后再去把它渲染成最终的页面

选择器Selector

找出页面中的元素，以便给他们设置样式
使用多种方式选择元素
按照标签名、类名或 id
按照属性
按照 DOM 树中的位置

1.通配选择器

*———即选择所有

<!DOCTYPE html>
<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>Document</title>

    <style>
        * {
            color: blueviolet;
            font-size: 32px;
            font-weight: bold;
            font-style: italic;
        }
    </style>
</head>

<body>
    <div class="one">hello div</div>
    <h3>hello world</h3>
</body>

</html>

2.标签选择器

<h1>This is heading</h1>
<p>this is some paragraph.</p>

<style>
h1 {
  color: orange;
}
p {
  color: gray;
  font-size: 20px;
}
</style>

3.id选择器

给一些标签设置了id属性，值是logo，即可以通过#logo选中id是logo的元素给它设置样式

给一个元素设置属性的时候，这个id的值需要在页面中是唯一的

<h1 id="logo">
  <img src="https://assets.codepen.io/59477/h5-logo.svg" alt="HTML5 logo" width="48" />
  HTML5 文档
<h1>

<style>
  #logo {
    font-size: 60px;
    font-weight: 200;
  }
</style>

4.类选择器

对于给同一类型的标签设置样式时，可以用class给所有已经完成的事件设置样式

<h2>Todo List</h2>
<ul>
  <li class="done">Learn HTML</li>
  <li class="done">Learn CSS</li>
  <li>Learn JavaScript</li>
</ul>
<style>
.done {
  color: gray;
  text-decoration: line-through;
}
</style>

5.属性选择器

通过元素的属性或属性值去选中这个元素

<label>用户名：</label>
<input value="zhao" disabled />

<label>密码：</label>
<input value="123456" type="password" />

<style>
  [disabled] {
    background: #eee;
    color: #999;
  }
</style>

input有disabled属性，表示这个表单项是被禁用的。给所有的禁用的输入框设置样式，可以通过 [disabled] 选中所有加disable的元素，给他们设置属性

如果需要属性是一个特定的值的时候才选，可以使用如下方法

<p>
  <label>密码：</label>
  <input type="password" value="123456" />
</p>

<style>
  input[type="password"] {
    border-color: red;
    color: red;
  }
</style>

input[type="password"] 表示input满足type="password"条件时才会被选择

也可以对属性值做匹配，不需要严格地等于某一个值，而是去看它有什么样的规则

<p><a href="#top">回到顶部</a></p>
<p><a href="a.jpg">查看图片</a></p>

<style>
  a[href^="#"] {
    color: #f54767;
    background: 0 center/1em url(https://assets.codepen.io/59477/arrow-up.png) no-repeat;
    padding-left: 1.1em;
  }
 
  a[href$=".jpg"] {
    color: deepskyblue;
    background: 0 center/1em url(https://assets.codepen.io/59477/image3.png) no-repeat;
    padding-left: 1.2em;
  }
</style>

a[href^="#"] 表示以#为开头就会被匹配
a[href$=".jpg"]表示以.jpg为结尾则会被匹配

伪类( pseudo - classes )

选择器也可以不基于标签和属性定位元素，而通过伪类进行选择

1.状态伪类：在与用户交互时的不同状态下的不同样式

<a href="http://example.com">
  example.com
</a>

<label>
  用户名：
  <input type="text">
</label>

<style>
a:link {
  color: black;
}

a:visited {
  color: gray;
}

a:hover {
  color: orange;
}

a:active {
  color: red;
}

:focus {
  outline: 2px solid orange;
}
</style>

a:link——默认状态
a:visited——访问过链接变为灰色
a:hover——鼠标在连接上变为橙色
a:active——鼠标按下后为红色
:focus——输入框聚焦状态

2.结构性伪类

<ol>
  <li>阿凡达</li>
  <li>泰坦尼克号</li>
  <li>星球大战：原力觉醒</li>
  <li>复仇者联盟 3</li>
  <li>侏罗纪世界</li>
</ol>

<style>
li {
  list-style-position: inside;
  border-bottom: 1px solid;
  padding: 0.5em
}

li:first-child {
  color: coral
}

li:last-child {
  border-bottom: none;
}
</style>

li:first-child——父集中第一个元素的样式
li:last-child——父集中最后一个元素的样式

<label>
  用户名：
  <input class="error" value="aa">
</label>
<span class="error">
  最少3个字符
</span>

<style>
  .error {
    color: red;
  }
  
  input.error {
    border-color: red;
  }
</style>

直接组合

组合

后代组合

<article>
  <h1>拉森火山国家公园</h1>
  <p>拉森火山国家公园是位于...</p>
  <section>
    <h2>气候</h2>
    <p>因为拉森火山国家公园...</p>
    <p>高于这个高度，气候非常寒冷...</p>
  </section>
</article>

<style>
  article p {
    color: black;
  }

  article > p {
    color: blue;
  }

  h2 + p {
    color: red; 
  }
</style>

选择器组

颜色

1.RGB

2.HSL

透明度

字体

<h1>卡尔斯巴德洞窟（Carlsbad Caverns）</h1>
<p>卡尔斯巴德洞窟（Carlsbad Caverns）是美国的
一座国家公园，位于新墨西哥州东南部。游客可以通过天
然入口徒步进入，也可以通过电梯直接到达230米的洞穴
深处。</p>

<style>
  h1 {
    font-family: Optima, Georgia, serif;
  }
  body {
    font-family: Helvetica, sans-serif;
  }
</style>

通用字体族

Font-Family使用建议

字体列表最后写上通用字体族
英文字体在中文字体前

使用Web Fonts

<h1>Web fonts are awesome!</h1>

<style>
  @font-face {
    font-family: "Megrim";
    src: url(https://fonts.gstatic.com/s/megrim/v11/46kulbz5WjvLqJZVam_hVUdI1w.woff2) format('woff2');
  }

  h1 {
    font-family: Megrim, Cursive;
  }
</style>

<style>
  @font-face {
    font-family: f1;
    src: url("//s2.ssl.qhimg.com/static/ff00cb8151eeecd2.woff2") format("woff2");
  }

  @font-face {
    font-family: f2;
    src: url("//s3.ssl.qhimg.com/static/a59a90c9e8f21898.woff2") format("woff2");
  }

  @font-face {
    font-family: f3;
    src: url("//s2.ssl.qhimg.com/static/58324737c4cb53a5.woff2") format("woff2");
  }

  h1 {
    font-size: 50px;
  }
</style>

<h1 style="font-family: f1, serif">落霞与孤鹜齐飞，秋水共长天一色。</h1>
<h1 style="font-family: f2, serif">落霞与孤鹜齐飞，秋水共长天一色。</h1>
<h1 style="font-family: f3, serif">落霞与孤鹜齐飞，秋水共长天一色。</h1>

font-size

关键字：small、medium、large 长度：px、em 百分数：相对于父元素字体大小

<section>
  <h2>A web font example</h2>
  <p class="note">Notes: Web fonts ...</p>
  <p>With this in mind, let's build...</p>
</section>

<style>
  section {
    font-size: 20px;
  }

  section h1 {
    font-size: 2em;
  }

  section .note {
    font-size: 80%;
    color: orange;
  }
</style>

<p class="normal">Normal Text</p>
<p class="italic">Italic Text</p>

<style>
  p {
    font-size: 36px;
    font-family: "Helvetica Neue", sans-serif;
  }

  .normal {
    font-style: normal;
  }

  .italic {
    font-style: italic
  }
</style>

font-weight 字重

<ul>
  <li class="w1">锦瑟无端五十弦（100）</li>
  <li class="w2">锦瑟无端五十弦（200）</li>
  <li class="w3">锦瑟无端五十弦（300）</li>
  <li class="w4">锦瑟无端五十弦（400-normal）</li>
  <li class="w5">锦瑟无端五十弦（500）</li>
  <li class="w6">锦瑟无端五十弦（600）</li>
  <li class="w7">锦瑟无端五十弦（700-bold）</li>
  <li class="w8">锦瑟无端五十弦（800）</li>
  <li class="w9">锦瑟无端五十弦（900）</li>
</ul>

<style>
  .w1 { font-weight: 100 }
  .w2 { font-weight: 200 }
  .w3 { font-weight: 300 }
  .w4 { font-weight: 400 }
  .w5 { font-weight: 500 }
  .w6 { font-weight: 600 }
  .w7 { font-weight: 700 }
  .w8 { font-weight: 800 }
  .w9 { font-weight: 900 }
</style>

font-weight

数值范围：100-900
其中normal为400，bold为700

line-height 行高

<section>
  <h1>Font families recap</h1>
  <p>As we looked at in fundamental text and font styling, the fonts applied to your HTML can be controlled using the font-family property. This takes one or more font family names. </p>
</section>

<style>
  h1 {
    font-size: 30px;
    line-height: 45px;
  }

  p {
    font-size: 20px;
    line-height: 1.6;
  }
</style>

line-height: 1.6;没有单位时表示字体自身的多少倍，即20px1.6=32像素

--->>font: style Weight size/height family

text-align

文字对齐： left center right justify

spacing

letter-spacing
word-spacing

text-indent 首行缩进

text-decoration

文字修饰： none underline line-through overline

white-space

HTML中多个空格或换行会被合并为一个，可以通过控制空白符的展示

normal连续的空白符和换行符会被合并
nowrap 效果与normal相同
pre保留所有，即和代码中的显示完全一样
pre-wrap保留空格，行内显示不下时自动换行
pre-line保留换行，合并空格

CSS调试

浏览器调试工具

CSS基础 | 青训营笔记