[ CSS入门（一）| 青训营笔记 day2]1.CSS代码的组成 2.如何在页面中使用CSS 3.如何通过选择器选中一

本节课概要

CSS代码的组成
如何在页面中使用CSS
如何通过选择器选中一个元素
如何通过伪类选中一个元素
CSS中和格式有关的其他属性

CSS代码的组成

用来定义页面元素的样式，可用来

设置字体和颜色
设置位置和大小
添加动画效果

CSS代码的组成belike: 选择器Selector{ 选择器Property:属性值Value; (声明Declaration) }(样式规则)

在页面中使用CSS

外链

用link标签将文件夹中的CSS引入，内容和样式分离，比较推荐使用

<link rel="stylesheet" href="/assets/style.css">

嵌入

将CSS代码嵌入到style标签中

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

内联

通过标签的属性定义样式,不需要选择器

适于额外添加不同的样式时使用

<p style="margin: lem 0">Example Content</p>

如何定位元素——选择器 Selector

作用：找出页面中的元素，以便给他们设置样式使用多种方法选择元素：

按照标签名、类名或id
按照属性
按照DOM树中的位置

通配选择器

用*表示，匹配所有元素

<style>
* {
  color: red;
  font-size: 20px;
}
</style>

标签选择器

用相应的标签来选择样式

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

id选择器

每个标签设置了相应的id，对每个id设置样式每个标签最好只设置一个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>

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>

属性选择器

对具有相应属性的标签设置样式例：对具有disabled属性的标签设置样式，使其禁用

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

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

例：对特定的type设置样式

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

例：对属性值具有特定开头或结尾的标签设置样式 herf^="#": herf属性以#开头 href$=".jpg"：href属性以.jpg结尾

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

<style>
  a[href^="#"] {
/*^^^^^*/
  }
 
  a[href$=".jpg"] {
/*^^^^^*/
  }
</style>

如何定位元素——伪类

pseudo-classes

不基于标签和属性定位元素
分为状态伪类和结构性伪类

状态伪类

对不同状态下的样式进行设置常见的一些状态

link: 默认状态
visited: 被访问过
hover：鼠标悬停于上时
active: 点击鼠标时
focus：点击鼠标之后

<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>

结构性伪类

根据DOM结点在DOM树中的位置决定是否选中该元素 first-child:父集的第一个子节点 last-child: 父集的最后一个字节点

<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>

也可以通过较为复杂的方式，选中特点个标签（例如选中第奇数个或偶数个标签）

和格式有关的各种属性

颜色

用RGB数值表示颜色 rgb(255,255,255)为白色，全为0时为黑色
HSL H：色相如红色、黄色等 S：饱和度，越高越鲜艳 L：亮度，越高颜色越亮
用颜色名字选择 blue ivory tomato,snow……
(不）透明度 alpha 值为1时完全不透明，值为0时完全透明例如： rgba(255,0,0,1) hsla(0,100%,50%,1)

字体

一般可在font-family的最后设置一个通用字体族，防止设备上没有可用的字体英文字体要写在中文字体前面，不然英文字体会用微软雅黑表示

其他属性

文字对齐 text-align: left center right justify
文字间隔 spacing: letter-spacing word-spacing
文字缩进 text-indent
文字修饰 text-decoraion: none underline line-through overline
空格(html中多个空格会被合并为一个空格) normal nowrap pre pre-wrap pre-line

[ CSS入门（一）| 青训营笔记 day2]