理解CSS | 青训营笔记

用户61944488878
69 阅读3分钟

这是我参与【第四届青训营】笔记创作活动的第二天。 今天的课使我牢固了之前的知识并解决了之前在知识上的小小问题，同时也给我带来了新的知识，让我对CSS有了更多的了解。

了解CSS

CSS是什么

CSS（样式）

  • Cascading Style Sheets
  • 用来定义页面元素样式，如字体，颜色，位置，大小，以及添加动画效果。

接下的笔记几乎都围绕页面元素样式。

CSS的基本样式

image.png

CSS在页面使用的三种方式

  • 外链:CSS的定义（要设置的样式）放在外面。
<link rel ="stylesheet" href="/assets/style.css">
复制代码
  • 嵌入:CSS的代码嵌入在里面。
<style>
li {margin: 0;list-style:nome;}
p {margin: len 0;}
</style>
复制代码
  • 内联:把样式元素写在style里面，就不用写选择器(不建议使用)。
<p style ="margin: len 0">Example Content</p>
复制代码

CSS工作过程

image.png

选择器

  • 目的：找出页面元素，设置样式。
  • 有以下选择器选择元素：
  1. 通配
<h1>a b c</h1>
<p>D</p>
<style>
*{
coloe: red;
font-size: 20px;
}
</style>
复制代码
  1. 标签
<h1>a b c</h1>
<p>D</p>
<style>
h1{
coloe: orange;
font-size: 20px;
}
p{
coloe: red;
font-size: 20px;
}
</style>
复制代码
  1. id（id属性，唯一）
<h1 id="a">
<style>
#a{
coloe: orange;
font-size: 20px;
}
复制代码
  1. 类
<ul>
<li class="done">a</li>
<li>b</li>
</ul>
<style>
.done{
color: gray;
text-decoration: line-through;
}
</style>
复制代码
  1. 属性
<label>用户名：</label>
<input value="zhao" disabled />
<style>
[disabled]{
background: #eee;
color:#999
}
</style>
复制代码

相关选择器组image.png

CSS颜色，色相，饱和度，透明度，亮度

  • 颜色RGB（0 ，0，0）白
  • hsl(18,91%,84%)h:色相，s:饱和度，l:亮度。
  • alpha：0~1，透明度。

CSS字体相关知识

  • font-family（字体）建议：
    • 字体列表最后写通用字体。
    • 先英文字体后中文字体。
  • font-size(字体大小)：

image.png-font-size(行高)

  • 小结

font-family，font-size，font-size可以把元素写成一个元素font

image.png

CSS文本相关知识

text-align：设置文本对齐方式。 spacing：间距。 text-indent：设置段落的行缩进。 text-decoration：文本修饰。 white-space：设置元素中的空白。

深入CSS

选择器的特异度

  • id>伪类>标签

image.png

  • 继承（在不显示指定一个值时，有些属性会继承父元素的设定）

初始值

image.png

CSS布局知识

  • 含义：内容大小，位置的设置。
  • 相关技术：常规流（行级，块级，表格布局，FlexBox,Geid布局）浮动，绝对定位。

image.png

  1. width：宽度，三种设置方式（长度，百分数，auto）
  2. height：高度，三种设置方式（长度，百分数，auto）
  3. padding：内边距。
  4. border：边框样式（颜色，粗细）
  • 三种属性：border-width,border-style，border-color；
  • 四个方向：border-top，border-right，border-bottom，border-left。
  1. margin：外边距，三种设置方式（长度，百分数，auto）margin：auto 水平居中

行级，块级

  • 行级：
  1. 和其他行级盒子放一起或拆开放在几行，
  2. 不适用width，height（盒模型）；
  3. 生成行级盒子
  4. display：block
  • 块级：
  1. 和其他盒子放一起，
  2. 适用盒模型属性，
  3. 生成块级盒子
  4. display：inline

FlexBox

  • 一种新的排版上下文。
  • 控制子级盒子摆放流向及顺序，盒子宽高，水平垂直对齐，是否允许折行。

image.png

image.png

Geid布局

  • display：grid 一个元素生成一个块级的Geid容器
  • 再使用grid-template相关属性将容器划分为网格
  • 设置子项站的行列
position属性

image.png

总结

今天的知识主要说了CSS字体，颜色，位置，大小的布局以及添加动画效果。还有对特定的文字，框在字体，颜色，大小上的特定设置。以及CSS的布局知识。

avatar
文章
阅读
粉丝