前端入门-基础语言篇2_走进前端技术栈 - CSS ｜ 青训营笔记

meng7
89 阅读9分钟

CSS

了解CSS

1.CSS是什么

Cascading Style Sheets（层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。

  • 用来定义页面元素的样式
  • 设置字体和颜色
  • 设置位置和大小
  • 添加动画效果

image-20230426142606627

  • CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。

  • selector是要更改样式的元素的选择器,我们可以将 CSS 选择器分为五类：

    • 简单选择器（根据名称、id、类来选取元素）
    • 组合器选择器（根据它们之间的特定关系来选取元素）
    • 伪类选择器（根据特定状态选取元素）
    • 伪元素选择器（选取元素的一部分并设置其样式）
    • 属性选择器（根据属性或属性值来选取元素）

  • property是要更改的CSS属性名称

  • value是要设置的属性值。

2.在页面中使用CSS

image-20230426143208877

  1. 外链（推荐使用）

    将样式表写在一个独立的.css文件中，然后在页面head区标记内用标签调用它，主要用于实现表现与结构分离

  2. 嵌入

    使用””标签嵌入到HTML文件的头部中标记中

    例：

     <!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-8">
   <title>Blog</title>
   <style>
     h1 {
       color: orange;
       font-size: 24px;
     }
     p {
       color: gray;
       font-size: 14px;
       line-height: 1.8;
     }
   </style>
 </head>
 <body>
   <h1>Web框架的架构模式探讨</h1>
   <p>在写干货之前，我想先探讨两个问题，
   模式的局限性？模式有什么用？</p>
 </body>
 </html>

    表现结果：

    image-20230426144247000

  3. 内联

    直接写在现有的标记中

3.CSS是如何工作的

image-20230426144321675

4.选择器Selector

  • 找出页面中的元素，以便给他们设置样式

  • 使用多种方式选择元素

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

通配选择器

通用选择器（*）选择页面上的所有的 HTML 元素。

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

image-20230426145714493

标签选择器

根据标签选择匹配内容

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

image-20230426145946093

id选择器

按照 id 属性选择一个与之匹配的元素。需要注意的是，一个文档中，每个 ID 属性都应当是唯一的。

语法： #idname

例子： #toc 匹配 ID 为 "toc" 的元素。

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

image-20230426150643899

类选择器

按照给定的 class 属性的值，选择所有匹配的元素。

语法： .classname

例子： .index 匹配任何 class 属性中含有 "index" 类的元素。

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

image-20230426150938202

属性选择器

按照给定的属性，选择所有匹配的元素。

语法： [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]

例子： [autoplay] 选择所有具有 autoplay 属性的元素（不论这个属性的值是什么）。

一

 <label>用户名：</label>
 <input value="zhao" disabled />
 ​
 <label>密码：</label>
 <input value="123456" type="password" />
 ​
 <style>
   [disabled] {
     background: #eee;
     color: #999;
   }
 </style>

image-20230426152158676

二

 <p>
   <label>密码：</label>
   <input type="password" value="123456" />
 </p>
 ​
 <style>
   input[type="password"] { <!-- 标签和属性都要匹配 -->
     border-color: red;
     color: red;
   }
 </style>

image-20230426153011567

三

a[href^="#"]href属性的值以 # 开头就会被匹配上

a[href$=".jpg"]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(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>

image-20230426153241859

伪类(pseudo-classes)

  • 在html中，伪类是一种用于已有元素处于某种状态时（滑动、点击等）为其添加对应样式的选择器，且这个状态是根据用户行为而动态变化的。

  • 伪类的名称不区分大小写，但需要以冒号:开头。另外，伪类需要与 CSS 中的选择器结合使用

  • CSS伪类是添加到选择器的关键字，用于指定所选元素的特殊状态。例如，伪类 :hover可以用于选择一个按钮，当用户的指针悬停在按钮上时，设置此按钮的样式。

     /* 用户的指针悬停在其上的任何按钮 */
 button:hover {
   color: blue;
 }

  • 不基于标签和属性定位元素

  • 几种伪类

    • 状态伪类
    • 结构性伪类

一

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

:link匹配所有未被访问的链接

:visited匹配所有已经访问过的链接

:hover匹配鼠标悬停其上的链接

:active匹配被点击的链接

:focus匹配获得焦点的元素。当用户点击或轻触一个元素或使用键盘的 Tab 键选择它时，它会被触发。

二

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

border-bottom下边框

三

 <label>
   用户名：
   <input class="error" value="aa">
 </label>
 <span class="error">
   最少3个字符
 </span>
 ​
 <style>
   .error {
     color: red;
   }
   
   input.error {
     border-color: red;
   }
 </style>
  • <span> 标签被用来组合文档中的行内元素。
  • HTML <span> 元素是短语内容的通用行内容器，并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图（通过使用类或者 Id 属性）
  • span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。
  • span没啥用，但是有了它可以通过CSS对行内元素设置样式

组合（combinators）

名称语法说明示例
直接组合AB满足A同时满足Binput: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 {
     color: blue;
   }
 ​
   h2 + p {
     color: red; 
   }
 </style>

选择器组

选择器列表

, 是将不同的选择器组合在一起的方法，它选择所有能被列表中的任意一个选择器选中的节点。

语法： A, B

示例： div, span 会同时匹配div元素和span元素。

image-20230426164759080

5.颜色

RGB

#8fac87

rgb(143,172,135)

HSL

  • Hue

    色相（H）是色彩的基本属性，如红色、黄色等；取值范围是0-360

  • Saturation

    饱和度（S）是指色彩的鲜艳程度，越高越鲜艳；取值范围0-100%

  • Lightness

    亮度（L）指颜色的明亮程度；越高颜色越亮；取值范围是0-100%

英文单词

image-20230426165338877

alpha透明度

rgba(255, 0, 0, 1)

#ff0000ff

hsla(0, 100%, 50%, 1)

  • 透明度在0-1之间，转换成0-256再转换成十六进制
  • 轻版本浏览器不要求写a(rgba)

字体

font-family

 <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 允许通过给定一个有先后顺序的，由字体名或者字体族名组成的列表来为选定的元素设置字体。

  • 属性值用逗号隔开。浏览器会选择列表中第一个该计算机上有安装的字体，或者是通过 @font-face指定的可以直接下载的字体。

  • 应当至少在使用的 font-family 列表中添加一个通用的字体族名，因为无法保证用户的计算机内已经安装了指定的字体，也不能保证使用 @font-face提供的字体移动能够正确地下载。提供通用的字体族使得浏览器可以在无法得到最佳字体的情况下使用一个相对接近的备选字体。

    通用字体族（一种风格，一类字体）

    • Serif 衬线体

      • Georgia、宋体

    • Sans-Serif 无衬线体

      • Arial、Helvetica、黑体、微软雅黑

    • Cursive 手写体

      • Caflisch Script、楷体

    • Fantasy

      • Comic Sans MS, Papyrus, Zapfino

    • Monospace 等宽字体

      • Consolas、Courier、中文字体

  • 字体的选定不是在发现用户计算机上安装的列表中的第一个字体时停止。相反，对字体的选择是逐字进行的。也就是说即使某个字符周围都在某个字体中可以显示，但该字符在当前的字体文件中没有适合的图形，那么会继续尝试列表中靠后的字体。

  • 建议英文字体写在中文字体前面，因为中文字体可能也能表现英文，在按字节翻译的过程中会先用中文字体，英文字体就没用了。

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

image-20230426171005175

二

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

image-20230426171046720

font-family: f1;f1相当于自己给从网络上下载的字体取了一个名字

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>

image-20230426172240638

二

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

image-20230426172447961

三

  • 字重font-weight范围在100-900
  • normal是400
  • bold(粗体)是500
  • 很多字体在设计时只设计了normal和bold，其它没设计。所以调整字重的时候没有显示
 <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>

image-20230426172519871

line-height(行高)

image-20230426173014730

text-align(文字对齐)

  • left
  • center
  • right
  • justify

spacing

  • letter-spacing
  • word-spacing

text-indent

text-decoration

  • none
  • underline
  • line-through
  • over-line

white-space

用来设置如何处理元素中的空白

  • normal

    连续的空白符会被合并，换行符会被当作空白符来处理。

  • nowrap

    和 normal 一样，连续的空白符会被合并。但文本内的换行无效。

  • pre

    连续的空白符会被保留。在遇到换行符或者<br>元素时才会换行。

  • pre-wrap

    连续的空白符会被保留。在遇到换行符或者<br>元素时才会换行。

  • pre-line

    连续的空白符会被合并。在遇到换行符或者<br>元素时才会换行。

调试CSS

  • 右键点击页面，选择检查

  • 使用快捷键

    • Ctrl+Shift+I(Windows)
    • Cmd+Opt+I(Mac)
avatar
文章
阅读
粉丝