1 - CSS的概念和语法 ｜ 青训营笔记

LianQi
126 阅读9分钟

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

什么是 CSS

JS、CSS、HTML 的关系

  • JS（JavaScript）：行为
  • CSS（Cascading Style Sheets）：样式
  • HTML（HyperText Markup Language）：内容

CSS 的用途

  • 定义页面元素的样式

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

CSS 的基本结构

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

h1：选择器（Selector），用来选中页面中的元素并定义其样式

color: "white";：一对属性（Property）和属性值（value）被称为一条规则，Property: "value”;

在页面中使用 CSS

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

    css样式放置在外部文件，使用link标签调用

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

    使用style标签，直接将CSS代码嵌入HTML文件内

  3. 内联
     <p style="margin: lem 0">Example</p>

    使用style属性，将CSS代码嵌入到标签内

CSS 是如何工作的

从加载HTML到展示页面的过程

CSS 语法

选择器（Selector）

  • 作用：找出页面中的元素，以便设置样式

  • 使用多种方式选择元素

    • 按照标签名、类名或id
    • 按照属性
    • 按照 DOM 树中的位置
  1. 通配选择器
     <style>
     *{
         color: red;
         font-size: 20px;
     }
 </style>

    选定所有元素

  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选择器
     <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>

    根据元素的id属性选定

  4. 类型选择器
     <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>

    根据元素的class属性筛选

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

    选定包含disabled属性的元素

     <p>
   <label>密码：</label>
   <input type="password" value="123456" />
 </p>
 ​
 <style>
   input[type="password"] {
     border-color: red;
     color: red;
   }
 </style>

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

    href^="#"：选定href属性的属性值以#开头的元素

    href$=".jpg"：选定href属性的属性值以.jpg结尾的元素

  6. 伪类选择器

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

    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>

      :link：未访问的链接

      :visited：已访问的链接

      :hover：鼠标悬停的元素

      :activate：选中的元素

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

      根据 DOM 节点在 DOM 树中的位置来决定是否选中该元素

      first-child：如果当前li是父集的第一个元素则选中

      last-child：如果当前li是父集的最后一个元素则选中

  7. 组合
    名称语法说明示例
    直接组合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
  8. 选择器组
     body, h1, h2, h3, h4, h5, h6, ul, ol, li {
     margin: 0;
     padding: 0;
 }
 ​
 [type="checkbox"], [type="radio"] {
     box-sizing: border-box;
     padding: 0;
 }

    同时选中多个元素

颜色（Color）

  1. RGB
     {
     color: rgb(143, 172, 135)
 }

    直接使用RGB值

  2. HEX
     {
     color: #8fac87;    
 }

    16位RGB值

  3. HSL
    • H（Hue）：色相，取值范围：0 - 360
    • S（Saturation）：饱和度，取值单位：0 - 100%
    • L（Lightness）：亮度，取值范围：0 - 100%
     {
     color: hsl(18, 91%, 84%);
 }
  4. 关键字
     {
     color: blue;
 }

    Color Keywods颜色关键字

  5. 透明度
     {
     color: #ff000078;
     color: rgba(255, 0, 0, 0.47);
     color: hsla(0, 100%, 100%, 0.47)
 }

    透明度（alpha）：直接置于颜色值的第四个参数即可，取值范围：0.00 - 1.00

子体（Font）

  1. 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：接受多个属性值，从前往后依次尝试寻找本地字体进行渲染，可以使用字体名或者通用字体族，一般建议将英文字体放置于中文字体之前，以保证不会使用中文字体渲染英文字母

    通用字体族

    • Serif （衬线体）：Georgia、宋体
    • Sans-Serif（无衬线体）：Arial、Helvetica、黑体、微软雅黑
    • Cursize（手写体）：Caflsch Script、楷体
    • Fantasy（创意字体）：Comic Sans MS、Papyrua、Zapfino
    • Monospace（等宽字体）：Consolas、Courier、中文字体

    一般建议font-family的属性值至少包含一个通用字体族，以保证可以渲染出文字（因为直接指定字体可能因为用户端本地没有该字体而无法渲染）

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

    @font-face：网络字体族

    font-family：网络字体族名称

    src：网络字体源，浏览器将尝试从该地址下载字体并渲染

    • 使用 Web fonts 则需要在渲染时从源下载该字体，这可能会导致渲染延时
  3. font-size - 字体大小

    • 关键字

      • small、medium、large

    • 长度

      • px、em

    • 百分数

      • 相对于其父元素字体大小
     <!--section-->
 <section>
     <!--section h2-->
     <h2>A web font example</h2>
     <!--section .note-->
     <p class="note">Notes: Web fonts ...</p>
     <p>With this in mind, let's build...</p>
 </section>
 ​
 <style>
   section {
     font-size: 20px;
   }
 ​
   section h2 {
     font-size: 2em;
   }
 ​
   section .note {
     font-size: 80%;
     color: orange;
   }
 </style>

    px：像素值

    em：相比其父元素的倍率，该示例中为20px * 2 = 40px

    80%：相比其父元素的比值，该示例中为20px * 80% = 16px

  4. italic - 斜体
     <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-style：默认值为normal，斜体则使用italic

    • 也可以使用oblique <angle>来指定倾斜角度，接受范围：-90deg 至 90deg，如未指定则14deg
  5. 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：字体粗细，接受范围：1 - 1000、关键字

    • 关键字：normal、blod、
    • 相对于父元素的关键字：lighter、bolder
    • 使用<number>作为属性值时，需要所使用的字体本身支持可变字体粗细，一般的字体仅接受400(normal)和700(bold)
  6. line-height - 行高

    image-20230119123153857

     <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: 45px：行高

    line-height: 1.6：当使用无单位的数字作为行高的时候，将会用该数 * 自身字体大小，即1.6 * 20px = 32px

  7. font - 字体
     h1 {
     /* 斜体 粗细 字体大小/行高 字体族 */
     font: italic bold 14px/1.7 Helvetica, sans-serif；
 }
 ​
 p {
     /* font至少包含字体大小和字体族即可 */
     font: 14px serif;
 }

    font：直接使用font属性进行集中设置

    顺序：font: 斜体 粗细 字体大小/行高 字体族;

    font属性最少只需要接受字体大小和字体族两个属性值即可，其余属性值按需书写

文本（Text）

  1. text-align - 文本对齐
    <p>
  Whether fullwidth colon punctuation and fullwidth dot punctuation should
  be considered fullwidth closing punctuation or fullwidth middle dot
  punctuation depends on where in the glyph’s box the punctuation is drawn.
</p>

<style>
    p {
        text-align: right;
}  
</style>

    text-align：文本对齐

    属性值说明
    left左对齐
    right右对齐
    center中心对齐
    justify两端对齐（不强制最后一行左对齐）
    justify-all两端对齐（强制最后一行左对齐）
  2. letter-spacing - 字间距
    {
    letter-spacing: normal;
    letter-spacing: 0.3em;
    letter-spacing: 1px;
    letter-spacing: -1px;
}
  3. word-spacing - 词间距
    {
    word-spacing: normal;
    word-spacing: 0.3em;
    word-spacing: 1px;
    word-spacing: -1px;
}
  4. letter-indent - 首行缩进
     {
     letter-indent: 15%;
     letter-indent: 3mm;
     letter-indent: 20px;
 }
  5. text-decoration - 修饰线

    text-decoration属性包含以下四个属性值：text-decoration-line、text-decoration-color、text-decoration-style和 text-decoration-thickness

     {
     text-decoration: underline overline #FF3028 dotted 1px;
 }

    text-decoration：允许自由组合其包含的四个子属性的属性值

    1. text-decoration-line（修饰线的位置）
       {
         text-decoration-line: none;
 }
      属性值说明
      none无修饰线
      underline下方有一条修饰线
      overline上方有一条修饰线
      line-through有一条贯穿文本的修饰线
      blink文本闪烁（不推荐使用）
    2. text-decoration-color（修饰线的颜色）
       {
     text-decoration-color: red;
 }

      具体可用的值参考颜色（Color）

    3. text-decoration-style（修饰线的形式）
       {
     text-decoration-style: solid;
 }
      属性值说明
      solid实线
      double双实线
      dotted点画线
      dashed虚线
      wavy波浪线
    4. text-decoration-thickness（装饰线的粗细）
       {
     text-decoration-thickness: auto;
 }
      属性值说明
      auto由浏览器自动选择
      from-font如果字体包含首选厚度，则使用字体厚度，否则同auto
      <length>px、em、mm 等长度值
      <percentage>10%，百分比值
  6. white-space - 空白处理
     {
     white-space: normal;
 }
    • 如何处理空白字符
    • 是否采用软换行
    属性值换行符空格和制表符文字自动换行行尾空格
    normal合并合并换行删除
    nowrap合并合并不换行删除
    pre保留保留不换行保留
    pre-wrap保留保留换行挂起
    pre-line保留合并换行删除
    break-spaces保留保留换行换行

CSS 选择器的特异度

选择器的特异度

 <artical>
     <h1 class="title" id="title1">拉森火山国家公园</h1>
 </artical>
 ​
 <style>
     #title1 {
         color: orange;
     }
     
     .title {
         color: blue;
     }
     
     artical h1{
         color: red;
     }
 </style>

  • 这三条选择器均能选定到该元素。但是最终使用id值，即#title1会生效，因为在三类选择器（id、属性、（伪）类）中，id的权重最高，另外两类权重相同，做计数判断。

  • 以接下来两个选择器为例，1号选择器的权重就高于2号选择器

    示例# (id选择器). 类/伪类选择器标签选择器
    #nav .list li a:link122
    .hd ul.link a022

基于选择器特异度实现基础样式的样式覆盖

<button class="btn">普通按钮</button>
<button class="btn primary">主要按钮</button>
<style>
  .btn {
    display: inline-block;
    padding: .36em .8em;
    margin-right: .5em;
    line-height: 1.5;
    text-align: center;
    cursor: pointer;
    border-radius: .3em;
    border: none;
    background: #e6e6e6;
    color: #333;
  }
  .btn.primary {
    color: #fff;
    background: #218de6;
  }
</style>

.btn：基础样式

.btn.primary：高级样式，仅覆盖基础样式的color和background

如何调试CSS

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

  • 快捷键

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