Cascading Style Sheets (CSS) 基础字体颜色绑定

Cascading Style Sheets (CSS)

用来定义页面元素的样式

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

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

h1:选择器 Selector
color：选择器 Property
white:属性值 Value
font-size:14px; :声明 Declaration

页面中使用 CSS

外链

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

嵌入

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

内联

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

选择器 Selector

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

通配选择器

* {
  color: red;
}

标签选择器

六级标题

<h6>
    六级标题
</h6>
<style>
	h6{
	color:orange;
}
</style>

id 选择器

LOGO

<h6 id="logo">LOGO</h6>
<style>
  #logo {
    color: red;
    font-size: 20px;
    font-weight: 200;
  }
</style>

类选择器

Todo List

Learn HTML
Learn CSS
Learn JavaScript

属性选择器

用户名:

密码:

<label>用户名: </label>
<input value="zhao" disabled />
<label>密码: </label>
<input value="123456" type="password" />

<style>
  [disabled] {
    background: #eee;
    color: #999;
  }
  input[type="password"] {
    border-color: red;
    color: red;
  }
</style>

回到顶部

查看图片

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

伪类

不基于标签和属性定位元素
几种伪类
- 状态伪类
- 结构性伪类

状态性伪类

example.com 用户名:

```html example.com 用户名: ```

结构伪类

泰坦尼克号

星球大战:原力觉醒

复仇者联盟3

侏罗纪世界

<ol>
<lib阿凡达</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>

用户名: 最少3个字符

<label>
  用户名:
  <input class="error" value=" aal" />
</label>
<span class="error'"> 最少3个字符 </span>
<style>
  .error {
    color: red;
  }
  input.error {
    border-color: red;
  }
</style>

组合

名称	语法	说明	示例
直接组合	AB	满足 A 同时满足 B	input:focus
后代组合	A B	选中 B，如果它是 A 的子孙	nav a
亲子组合	A > B	选中 B，如果它是 A 的子元素	section > p
兄弟选择器	A ~ B	选中 B，如果它在 A 后且和 A 同级	h2~p
相邻选择器	A + B	选中 B，如果它紧跟在 A 后面	h2+ p

拉森火山国家公园

拉森火山国家公园是位于...

气候

因为拉森火山国家公园...

高于这个高度，气候非常寒冷...

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

<style>
  article p {
    color: black;
  }
  article > p {
    /* // 选中article下的子元素p */
    color: blue;
  }
  h2 + p {
    /* //选中紧跟着 h2的p */
    color: red;
  }
</style>

选择器组

<style>
  body,h1,h2,h3,h4,h5,h6,ul,ol,li {
   {
    margin: 0;
    padding: 0;
  }
  [type="checkbox"],
  [type="radio"] {
    box-sizing: border-box;
    padding: 0;
  }
</style>

颜色

颜色测试_W3C

rgb(13, 255, 244)

#0dfff4

hsl(177, 100%, 53%)

Huge 色相(H)	Saturation 饱和度(S)	Lightness 亮度(L)
是色彩的基本属性,如红色、黄色等;取值范围是 0-360。	是指色彩的鲜艳程度,越高约鲜艳;取值范围 0-100%。	指颜色的明亮程度;越高颜色越亮;取值范围是 0-100%。

关键字

red,blue,green,cyan

alpha 透明度

<style>
  #ff000075;
  rgba(255, 0, 0, 0.46);
  hsla(0,100%, 50%, 0.46);
</style>

字体 font-family

卡尔斯巴德洞窟(CarLsbad Caverns)

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

<h1>卡尔斯巴德洞窟(CarLsbad Caverns)</h1>
<p>
  卡尔斯巴德洞窟(Carlsbad Caverns) 是美国的 座国家公园，
  位于新墨西哥州东南部。游客可以通过天
  然入口徒步进入，也可以通过电梯直接到达230米的洞穴 深处。
</p>
<style>
  h1 {
    font-family: Optima, Georgia, serif;
  }
  body {
    font-family: Helvetica, sans-serif;
  }
</style>

通用字体族

字体族	样例
Serif 衬线体	Georgia、宋体
Sans-Serif 无衬线体	Arial、Helvetica、黑体、微软雅黑
Cursive 手写体	Caflisch Script、楷体
Fantasy	Comic Sans MS, Papyrus,
Monospace 等宽字体	Consolas、Courier、中文字体

font-family 使用建议

字体列表最后写上通用字体族，找不到对应字体时会近似替代
英文字体放在中文字体前面，中文字符包含英文

使用 Web Fonts

Web fonts are awesome !

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

font-size 字体大小

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

A web font example

Notes: Web fonts ...

With this in mind, let's build...

<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 {
    /* // h1 应为父级2倍 40px */
    font-size: 2em;
  }
  section .note {
    /* // 父级80% 16px */
    font-size: 80%;
    color: orange;
  }
</style>

字体倾斜

Normal Text

Italic Text

```html

Normal Text

Italic Text

```

字重

锦瑟无端五十弦(100)
锦瑟无端五十弦(200)
锦瑟无端五十弦(300)
锦瑟无端五十弦(400-normal)
锦瑟无端五十弦(500)
锦瑟无端五十弦(600)
锦瑟无端五十弦(700-bold)
锦瑟无端五十弦(800)
锦瑟无端五十弦(900)

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

line-height 行高

Font families recap

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.

<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;
    /* 纯数字则会根据字体大小计算 20*1.6=32  */
    line-height: 1.6;
  }
</style>

font: style weight size/height family

h1 {
  /* 斜体 粗细 大小/行高 字体族 */
  font: bold 14px/1.7 Helvetica, sans-serif;
}
p {
  font: 14px serif;
}

text-align 文字对齐:

--- left ---	--- center ---	--- right ---	--- justify ---
左对齐	居中对齐	右对齐	分散/两端对齐

spacing 间距

letter-spacing:字母间距
word-spacing:单词间距

text-indent 缩进
可设置为负数

text-decoration 文字修饰

text-decoration :none 无、underline 下划线、line-through 中划线、 overline 上划线

underline：This text has a line underneath it.

overline：This text has a line over it.

line-through：This text has a line going through it.

none：This link will not be underlined

dashed underline overlin：This text has lines above and below it.

blink：This text might blink for you, depending on the browser you use.

white-space 空白

	换行符	空格和制表符	文字换行	行尾空格
`normal`	合并	合并	换行	删除
`nowrap`	合并	合并	不换行	删除
`pre`	保留	保留	不换行	保留
`pre-wrap`	保留	保留	换行	挂起
`pre-line`	保留	合并	换行	删除
`break-spaces`	保留	保留	换行	换行

调试 CSS

右键点击页面，选择「检查」
使用快捷键
- Ctrl+Shift+I (Windows)
- Cmd+Opt+I (Mac)

Q&A

vh:屏幕高度的 1%
vw:屏幕宽度的 1%

rem:从根元素计算
em:父元素计算
px:绝对大小

posted @ 2022-01-18 16:05 SKPrimin 阅读(80) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

笠逸

青箬笠，绿蓑衣，斜风细雨不须归

Cascading Style Sheets (CSS) 基础 字体 颜色 绑定