Day2理解CSS ｜ 青训营笔记

Leo菌
75 阅读5分钟

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

知识要点与个人感悟

一、CSS概念

CSS（Cascading Style Sheets 层叠样式表）主要负责页面中的样式，主要作用

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

以上称作一条样式规则，css正是由一条一条样式规则组成的

二、在页面中使用CSS

  1. 使用外链（推荐！！！：内容和样式分离，功能分工）
    将css定义放在单独的文件中，再用link标签引入到页面中

  2. 嵌入
    直接将css定义直接嵌入到html代码中，写在style标签内

  3. 内联样式
    所有标签都有style属性可以将样式写在style属性内（不需要选择器了，直接在给当前内容写样式）

三、CSS是如何工作的

1.选择器

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

  1. id选择器（唯一）
  2. 通配选择器
  3. 类选择器
  4. 属性选择器：通过该元素某些属性或属性值去选中该元素，使用：[属性]，下图例子中是给input标签的disabled属性设置样式（给禁用的输入框设置样式）

  • 若我们是想给某个属性为什么值时设定特定的样式可以直接在[]内写等于该值

  • 同样也可以按照规则去进行属性值的匹配（例如下面的^=表示以什么为开始，$=表示以什么为结尾）

  1. 伪类（pseudo-classes），不基于标签和属性定位元素
  • 状态性伪类（比如一些链接的状态访问还是未访问过）
a:link {color: black;} 默认状态下
a:visited {color: gray;} 访问后链接状态
a:hover {color: orange;} 鼠标移上连接后样式
a:active {color: red;} 鼠标按下去之后样式

:focus { outline: 2px solid orange;} 输入框点击后状态
  • 结构性伪类（根据Dom节点在Dom树中出现的位置来决定是否选中某个元素）
<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>
  1. 组合

  1. 选择器组，给一系列的选择器加上样式，用逗号分隔
body, h1, h2, h3, h4, h5, h6, ul, ol, li {
margin: 0;
padding: 0;}
[ type="checkbox" ],[ type= "radio" ] {
box-sizing: border-box;
padding: 0;
}
2.颜色
  • RGB只能单独显现颜色不能与我们日常对颜色的一些特征（包括色相、饱和度、亮度）关联起来；
  • HSL
    • Hue色相(H)是色彩的基本属性,如红色、黄色等;取值范围是0-360。
    • 饱和度Saturation(S)是指色彩的鲜艳程度，越高约鲜艳;取值范围0-100%。
    • Lightness亮度(L)指颜色的明亮程度;越高颜色越亮;取值范围是0-100%。
  • 透明度 alpha 为1时完全不透明，两种颜色都可以跟上alpha，新版浏览器直接rgb可以不用跟a rgba（255，0，0，0.47） hsla（255，0，0，0.47）#ff000078
3.字体
1.使用font-family
  • 使用font-family来设置，一般设置成字体族，用逗号分隔，这样做的原因是不同设备不同浏览器安装的字体各不相同，当第一个（Optima）没有时，会一次找寻下一个（Georgia），如下代码所示：
<style>h1 {
font-family: Optima,Georgia, serif;}
body {
font-family: Helvetica,sans-serif;}
</style>
  • 当然都没有时，我们一般会加上serif（衬线体）或sans-serif（无衬线体）等这类通用字体族，他不是一个单独的字体。
  • 通常将英文字体写于中文字体前，原因：英文首先匹配，我们一般不将英文设置为中文字体，这样就可以是先英文用英文字体中文用中文字体
2.使用Web Fonts
  • css中可以通过font-family来设置字体，通过font-face来引入新的字体
@font-face {
      font-family: "my-font";
      src: url("./方正喵呜体.ttf");
    }
    .font2 {
      font-family: "my-font";
    }
3.使用font-size
  • 关键字
    • small、medium、large
  • 长度
    • px、em
  • 百分数
    • 相对于父元素字体的大小
4.font-style字体样式
  • normal、italic（斜体）
5.font-weight字重（粗细）
  • 100~900、normal表示400、bold表示700
  • 注意某些字体在设置时只有几种字重，可能你设置某种后不起作用就代表改字体没有该字重
6.line-height行高

默认html都是1.1、1.2不便于阅读的，我们一般都要更改行高：两行文字的基准线

  • 使用有单位的数字表示，直接表示行高
  • 当使用数字无单位表示时，表示行高是自身字体大小的多少倍，如下代码所示，实际行高20*1.6
<style>
  h1 {
    font-size: 30px;
    line-height: 45px;
  }

  p {
    font-size: 20px;
    line-height: 1.6;
  }
</style>
7.font快捷表示
  • font: style weight size/ height family
h1 {
/*―斜体粗细大小/行高字体族*/
font: bold 14px/1.7 Helvetica, sans-serif;}
p {
font: 14px serif;
}
8.其他
  • text-align：left、center、right、justify对齐：居中、居左、居右、两端对齐（中间空格拉大）
  • spacing间距：
    • letter-spacing:每个字符之间的间距
    • word-spacing:每个单词之间的间距
  • 首行缩进text-indent
  • 文本装饰text-decoration：none、underline、line-through、overline
  • 空白符white-space：html内多个空格或者连续的换行会被识别成一个
    • normal会将多个空格合并
    • nowrap：强制不换行
    • pre：保留所有的
    • pre-wrap：一行内显示不下时自动换行
    • pre-line：合并空格但是保留换行
  • 调试CSS
    • 右键点击页面，选择「检查」使用快捷键
    • ctrl+Shift+I(windows )
    • Cmd+Opt+I(Mac)
avatar
文章
阅读
粉丝