CSS|青训营笔记

用户5420334070888
95 阅读3分钟

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

文章开头，我们要先认识CSS是什么？

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

CSS基础代码： 
h1{ #h1表示选择器，用来选择页面中的h1，给选中的h1定义样式
     color: white;  #样式相关的属性和对应的属性值
     font-size:14px;
  }

将一个选择器和一个大括号称作一条规则，CSS本身是由一条一条的样式规则组成的

在页面中使用CSS的方法：

  1. 外链：将CSS文件放在单独的文件里，使用link标签引入的页面里面（较推荐）；
  2. 嵌入：直接将CSS代码直接嵌入到HTML里面；
  3. 内联：将对于某一标签的样式直接写入该标签的style属性里面，内联就不需要再写选择器。

CSS是如何工作的：

CSS.png

一、选择器Selector

  • 找出页面中的元素，以便给他们设置样式
  • 使用多种方式选择元素
    • 按照标签名、类名或id
    • 按照属性
    • 按照DOM树中的位置
  1. 通配选择器：`*{}` 匹配所有
  2. id选择器：一般用在对标签设置id属性时。#id{}注意id值要唯一。
  3. 类选择器：给同一类型的标签设置样式的时候(也就是给想要设置样式的某些标签设置样式时)，可以用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>
  4. 属性选择器：针对某一属性做样式，例如对输入中的disabled做样式: 
    <label>用户名：</label>
<input value="zhao" disabled />
<label>密码：</label>
<input value="123456" type="password" />
<style>
    [disabled]{
    background:#eee;
    color:#999;
    }
 </style>

    属性的值匹配某一条件时，对该类属性做样式：

       <p><a href="#top">回到顶部</a></p>
   <style>
      a[hre^="#"]{ #"^="表示属性值以#开头
        color:#f51121;
    }
      a[hre$="p"]{ #"$="表示属性值以p结尾
        color:deepskyblue;
    }
    </style>
  5. 伪类（pseudo-classes）：不基于标签和属性定位元素
    • 状态伪类：处于某种状态的元素，例如链接可以有访问过的链接和非访问过的链接 
          <a ...></a>
    <style>
    a:link{}  #默认状态的链接
    a:visited{}  #未访问的链接
    a:hover{} #鼠标移动到链接上时
    a:active{}  #鼠标点击之后
    </style>
    • 结构性伪类：根据DOM结点和在DOM中出现的位置，来决定是否选择该元素。 
      <ol>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ol>
<style>
    li:first-child{}  #对列表的第一个元素设置样式
    li:last-child{}   #对列表的最后一个元素设置样式
</style>
    • 选择器组：当想要对多个元素设置相同样式时，可用","将选择器隔开，例 
      body,h1,h1,ol,li{}
[type="checkbox"],[type="radio"]{}

    6. 二、颜色HSL

    • Hue:色相（H）是色彩的基本属性，如红色、黄色等；取值范围是0-360。
    • Saturation：饱和度（S）是指色彩的鲜艳程度，越高越鲜艳，取值范围0-100%。
    • Lightness:亮度（L）指颜色的明亮程度；越高颜色越亮，取值范围是0-100%。
    • alpha透明度：取值范围0-1，值越大越不透明。

    三、字体font-family

    例<p>当落雨掉进寂静的森林，....</p>
  <style>
    p{
     font-family:Optima,Georgia,serif;#serif表示通用字体族
    }#设置多个字体是因为不同的设备可能拥有的字体不同，设备可以按照设置字体的顺序显示自己有的字体。
  </style>

    font-size

    • 关键字：small、medium、large
    • 长度：px、em
    • 百分数:相对于父元素字体大小
    • font-wight:字体的粗细（100-900）

    调试CSS：

    • 右键点击页面，选择"检查"
    • 使用快捷键：Ctrl+Shift+I(Windows)、Cmd+Opt+I(Mac)
avatar
文章
阅读
粉丝