理解CSS | 青训营笔记

小崔迷路了
101 阅读2分钟

这是我参与第四届青训营-前端基础场笔记创作活动的第2天

1.CSS是什么？

Cascading Style S heets （层叠样式表）

用来定义页面元素的样式

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

基础代码样式：

9B2990AF4B9AE8B762B76074E3E17E26.jpg 选择器Selector → 元素

选择器Property → 属性

2.在页面中使用CSS

  • 外链 (存放在单独文件，用link标签将其引入页面)
<link rel="stylesheet" href="/assets/style.css">
  • 嵌入（将CSS代码嵌到HTML文件中）
<style>
  li { margin: 0; list-style: none; }
  p { margin: lem 0; }
</style>
  • 内联（直接写在HTML文件中元素的style属性中）
<p style="margin: lem 0">Example Content</p>

【为实现内容与样式分离，推荐使用外链】

3.CSS是如何工作的

F0A46F765516D0CB969F626D71C8135E.jpg

4.选择器Selector

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

4.1 通配选择器

可以匹配所有元素

<style>
*{
 color：颜色
 }
</style>

4.2 标签选择器

用标签来设置样式

<style>
h1{
color:颜色
}
p{
color:颜色
}
</style>

4.3 id选择器

给元素设置id，再利用id设置样式

<h1 id="cf">一级标题<h1>

<style>
  #cf {
  color=颜色
  }
</style>

4.4 类选择器

用class分类，自定义类名，再利用类名设置样式

<h1 class="cf">一级标题<h1>
<h2 class="cf">二级标题<h2>
<style>
.cf {
  color=颜色
}
</style>

4.5 属性选择器

属性选择器可以根据元素的属性及属性值来选择元素。如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器

/*选择属性*/
<p abc>1234567890</p>

<style>
   p[abc]{
   color:green}
</style>

/*选择属性及属性值*/
<p abc="123">1234567890</p>

<style>
   p[abc="123"]{
   color:green}
</style>

/*选择属性及属性值开头*/
<p abc="123456">1234567890</p>

<style>
   p[abc^="123"]{
   color:green}
</style>

/*选择属性及属性值结尾*/
<p abc="123456">1234567890</p>

<style>
   p[abc$="456"]{
   color:green}
</style>

/*选择属性且属性值中含有*/
<p abc="123agh456">1234567890</p>

<style>
   p[abc*="g"]{
   color:green}
</style>

4.6 伪类

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

链接中的四种状态伪类：

  • ：link--未访问的链接
  • : visited--己访问的链接
  • ：hover--鼠标悬停状态
  • ：active--激活的链接(按下鼠标后，放开鼠标前)

伪类: hover和: active也可以用于其他元素

1.:hover用于访问的鼠标经过某个元素时

2.: active用于一个元素被激活时。

5.组合

20220727201113.png

6.颜色

RGB和HSL是CSS常用的设置颜色属性值的方式

  • RGB(Red,Green,Blue)

用红绿蓝三种颜色相互混合形成不同颜色，每个颜色的值范围从0 ~ 255
表示方法: 1.color:rgb(0, 0, 0) 2.#000000(16进制表示)

  • HSL(Hue, Saturation, Lightness)

20220727214219.png

7.透明度 alpha

范围从0 ~ 1，1为不透明
使用方式rgba(0, 0, 0, 1) hsla(0, 50%, 50%, 1)

8.字体 font-family

8.1 通用字体族

0TF5E$MM_F)I`F~@AQTSF9G.png 使用建议：

  • 确保要有通用字体，并在字体列表最后写上通用字体族
  • 在中英混合页面中，英文字体放在中文字体前面

8.2 font-size

  • 关键字
    • small、medium、large
  • 长度
    • px、em
  • 百分数
    • 相对于父元素字体大小 字体粗细 font-weight
      范围从100 ~ 900 (400)为基准度

8.3 其他关键字

font-style：字体（斜体）
font-weight：字重
line-height：行高

9.调试CSS

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