理解CSS① | 青训营笔记

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

本次笔记的内容是对“理解CSS”知识的第一次小总结。

（一）什么是CSS？

前端三件套： JavaScript(行为) + CSS(样式) + HTML(内容)

• CSS（Cascading Style Sheets），用来定义页面元素的样式-------> 设置字体和颜色；设置位置和大小；添加动画效果
• CSS基础代码：包括选择器Selector、【选择器Property、属性值Value】-->声明Declaration

例如： h1{ color:white; font-size:14px; }

（二）在页面中使用CSS

<!--外链-->
<ink rel="stylesheet" href="/ assets/style.css">

<!--嵌入-->
<style>
  li {margin:0; list-style:none; }
  p {margin:lem o;}
</style>

<!--内联（较不推荐）-->
<p style="margin : 1em o ">Example Content</p> 

(三)CSS是如何工作的？

• （1）选择器 Selector --->找出页面中的元素，以便给他们设置样式

使用多种方式选择元素:--->按照标签名、类名或id；按照属性；按照 DOM 树中的位置

• （2）通配选择器 ：*匹配所有

<h1>This is heading</h1>
<p>this is some paragraph.</p>
<style>
* {
  color: red;
  font-size: 20px;
}
</style>

• (3)标签选择器：通过标签名选择元素

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

<style>
h1 {
  color: orange;
}

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

• (4) id选择器：通过id属性选择元素，id值必须是唯一的，#id

<header>
  <h1 id="logo">
    <img src="/h5.png" width="64"
      alt="HTML5 logo">
    HTML5 文档
  <h1>
</header>
<style>
  #logo {
    font-size: 60px;
    font-weight: 200;
  }
</style>

• (5)类选择器：通过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>

• （6）属性选择器：通过某元素的属性或属性值来选择元素

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

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

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

------>属性值选择器:通过属性选择元素，标签[属性=“属性名”]。

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

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

------>高级用法:限制属性值以什么开头（a[href^="#"]），以什么结尾（a[href$=".jpg"] ）

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

<style>
  a[href^="#"] {
    color: #f54767;
    background: 0 center/1em url(top.svg) no-repeat;
    padding-left: 1.1em;
  }
 
  a[href$=".jpg"] {
    color: deepskyblue;
    background: 0 center/1em url(image.svg) no-repeat;
    padding-left: 1.1em;
  }
</style>

• (7)伪类 (pseudo-classes)选择器：不基于标签和属性定位元素

几种伪类：状态伪类、结构性伪类

1）状态伪类（动态）：根据元素所处的状态选择元素

a标签：link 、visited、hover、active

a:link {            /*正常状态*/
  color: black;
}

a:visited {         /*已经访问过*/
  color: gray;
}

a:hover {            /* 鼠标放上去*/
  color: orange;
}

a:active {           /* 鼠标放上去，并点击*/
  color: red;
}

:focus {             /*鼠标点击后，输入文字时*/
  outline: 2px solid orange;
}

<a href="http://example.com">
  example.com
</a>
<label>
  用户名：
  <input type="text">
</label>

2）结构性伪类：通过元素在DOM树中的位置选择元素

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

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

li:first-child {
  color: coral
}

li:last-child {
  border-bottom: none;
}

• (8)组合器 (Combinators)的组合方式

例子：

<article>
  <h1>拉森火山国家公园</h1>
  <p>拉森火山国家公园是位于...</p>
  <section>
    <h2>气候</h2>
    <p>因为拉森火山国家公园...</p>
  </section>
</article>

article p {
  color: coral;
}

article > p {
  color: limegreen;
}

article section h2 {
  border-bottom: 1px dashed #999;
}

选择器组 多个选择器可以放到一个组中，统一设置样式：

body, h1, h2, h3, h4, h5, h6, ul, ol, li {
  margin: 0;
  padding: 0;
}

[type="checkbox"], [type="radio"] {
  box-sizing: border-box;
  padding: 0;
}