CSS | 青训营笔记

柒天lucky
146 阅读9分钟

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

详细知识点介绍

1、CSS是什么？

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

2、在页面中使用CSS

  • 外链(推荐)
<link rel="stylesheet" href="style.css">
  • 嵌入
<style>
    li {margin: 0; list-style: none;}
    p {margin: lem 0;}
</style>
  • 内联
<p style="margin: lem 0">Example Content</p>

3、CSS是如何工作的？

image.png

  1. 浏览器载入 HTML 文件（比如从网络上获取）。
  2. 将 HTML 文件转化成一个 DOM（Document Object Model），DOM 是文件在计算机内存中的表现形式。
  3. 接下来，浏览器会拉取该 HTML 相关的大部分资源，比如嵌入到页面的图片、视频和 CSS 样式。JavaScript 则会稍后进行处理，简单起见，同时此节主讲 CSS，所以这里对如何加载 JavaScript 不会展开叙述。
  4. 浏览器拉取到 CSS 之后会进行解析，根据选择器的不同类型（比如 element、class、id 等等）把他们分到不同的“桶”中。浏览器基于它找到的不同的选择器，将不同的规则（基于选择器的规则，如元素选择器、类选择器、id 选择器等）应用在对应的 DOM 的节点中，并添加节点依赖的样式（这个中间步骤称为渲染树）。
  5. 上述的规则应用于渲染树之后，渲染树会依照应该出现的结构进行布局。
  6. 网页展示在屏幕上（这一步被称为着色）。

4、选择器

  • 找出页面中的元素，以便给他们设置样式
  • 使用多种方式选择元素
    • 按照标签名，类名或id
    • 按照属性
    • 按照DOM树中的位置
  • 通配选择器
<style>
    * {
        color: red;
        font-size: 20px;
       }
</style>

  1. 设置页面中所有标签为统一的样式

  2. 通配符选择器选中的是所有标签

  • 标签选择器
h1 {
    color: orange;
    }
  • id选择器 id的值在页面中要唯一
<h1 id="title">标题</h1>
<style>
    #title {
        color: blue;
        }
 </style>
  • 类选择器 可以出现多次
<ul>
    <li class="done">橙子</li>
    <li class="done">李子</li>
    <li>苹果</li>
</ul>
<style>
    .done {
        color:gray;
        text-decoration: line-through;
        }
</style>

①在标签class 属性中写 多个类名
②多个类名中间必须用空格分开
③这个标签就可以分别具有这些类名的样式

  • 属性选择器
<lable>用户名：</lable>
<input value="zhao" disabled />

<lable>密码：</lable>
<input value="123456" type="password" />

<style>
    [disabled] {
        background: #eee;
        }
    input[type="password"] {
        color: red;
        }
</style>

[disabled]表示具有disable属性的元素选中
[type="password"]表示具有type元素且属性值为password的选中
a[href^="#"]表示在a标签里以#开头的选中
a[href$=".jpg"]表示在a标签里以.jpg结尾的选中

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

(1)状态伪类

   <a herf="http://example.com">example.com</a>
   <lable>
       用户名：
       <input type="text">
   </lable>
   
   <style>
       a:link {
           color: black;
       }
       a:visited {
           color: gray;
       }
       a:hover {
           color: orange;
       }
       a:active {
           color: red;
       }
       :focus {
          outline: 2px solid orange; 
       }
   </style>

(2)结构性伪类

通过在父级节点的相对位置选中

    <ol>
       <li>阿凡达</li>
       <li>泰坦尼克号</li>
       <li>星球大战</li>
       <li>复仇者联盟</li>
       <li>侏罗纪世界</li>
   </ol>

   <style>
       li {
           border-bottom: 1px solid;
       }
       li:first-child {
           color: orange;
       }
       li:last-child {
           color: red;
           border-bottom: none;
       }
   </style>

image.png

  • 组合 | 名称 | 语法 | 说明 | 示例 | | --- | --- | --- | --- | | 直接组合 | AB | 满足A同时满足B | input:focus | | 后代组合 | A B | 选中B，如果他是A的子孙 | nav a | | 亲子组合 | A>B | 选中B，如果他是A的子元素 | section>p | |兄弟选择器 | AB | 选中B，如果他在A后且和A同级 | h2p | |相邻选择器 | A+B | 选中B，如果他紧跟A后面 | h2+p |

  • 选择器组 ---用逗号隔开选择器即可

5、颜色

  • RGB

image.png 用三个滑块分别表示 红绿蓝 三种颜色的数量

  • HSL

image.png 例：hsl(211, 66%, 22%)

  • 直接指定颜色

如white,blue...

  • 透明度 alpha

image.png 新版中可以直接写 rgb( 0, 0, 0, 1)

6、字体 font-family

若中英文混排建议把英文写前面

  • 使用Web Fonts
    <h1>Web fonts</h1>
    <style>
        @font-face {
            font-family: "Megrim";
            src: url(...)
            format('woff2');
        }
    
    h1 {
        font-family: Megrim, Cursive;
    }
    </style>
  • font-size
    • 关键字：small,medium,large
    • 长度：px,em
    • 百分数：相对于父元素字体大小
  • font-weight
    字重（粗细）100~900，(400-normal,700-bold)
  • font-style
    italic斜体，normal正常
  • font
    字体属性的顺序：字体风格→字体粗细→字体大小→字体类型
  • line-height
    行高
  • white-space
    定义元素内空白如何处理
    • normal---忽略多余空白，只保留一个（默认）
    • nowrap---只保留一个空白，文本不会换行，会在同一行上继续，直到br
    • pre---保留空白，输入几个空格就显示几个
    • pre-wrap---保留空白符序列，正常进行换行
    • pre-line---合并空白符序列，保留换行符

7、文本

  • 文本装饰
    text-decoration：none,underline,overline,line-through
  • 阴影： text-shadow:

image.png

8、设置鼠标形状

span{cursor:pointer;}

值说明
default默认光标
pointer超链接的指针
wait指示程序正在忙
help指示可用的帮助
text指示文本
crosshair鼠标呈现十字状

9、背景属性

div{ background:#C00 url(../image/pic.gif) 205px 10px no-repeat;}

  • 背景属性的顺序：背景颜色→背景图像→背景定位→背景重复

  • repeat（默认值）

    no-repeat（不平铺）

    repeat-x（只沿水平方向平铺）

    repeat-y（只垂直方向平铺）

10、渐变

linear-gradient ( position,  color1,  color2,…)

11、三大特性

  • 层叠性：
    标签必须使用同一类型的选择器，最后定义的样式会将前面定义的样式冲突部分覆盖掉。
  • 继承性：
    • 当一个元素并没有设置一个属性时，他会去父级找
    • 一般和字体相关的都是可以继承的，和盒模型相关的不可继承
    • 不可继承变可继承 用通配符选择器设置inherit关键字来实现
  • 优先级：
    越特殊优先级越高，高的可以对低的实现样式覆盖 image.png

初始值
（1）CSS中，每个属性都有一个初始值
background-color的初始值为transparent
margin-left的初始值为0
（2）可以使用initial关键字显式重置为初始值
background-color:initial

12、求值过程

13、css布局方式及相关技术

(1)布局是什么

  • 确定内容的大小和位置的算法
  • 依据元素，容器，兄弟节点和内容等信息来计算

(2)布局相关技术

  • 常规流（行级，块级，表格布局，FlexBox，Grid布局）
  • 浮动
  • 绝对定位

(3)盒模型

image.png

width
-指定content box宽度
-取值为长度，百分数，auto
-auto由浏览器根据其他属性确定
-百分数相对于容器的content box宽度
height
-指定content box高度
-取值为长度，百分数，auto
-auto由浏览器根据其他属性确定
-百分数相对于容器的content box高度
-容器有指定高度时，百分数才生效
padding
-指定元素四个方向的内边框
-百分数相对于容器宽度
image.png
border
-指定容器边框样式，粗细，颜色
-三种属性：border-width 、 border-style 、 border-color
-四个方向：border-top 、 border-bottom 、 border-left 、 border-right -当四条边框不同色时，可以通过不透明度调节，可以得到小三角形
margin
-指定元素四个方向的外边框
-取值可以是长度，百分数，auto
-百分数相对于容器宽度
-使用margin-auto水平居中
-margin collapse
box-sizing:border-box
image.png
overflow
visible展示
hidden隐藏
scroll滚动

(4)行级 VS 块级

  • 盒子
行级块级
和其他行级盒子一起放在一行或拆开成多行不和其他盒子并排摆放
盒模型中的width,height不适用适用所有的盒模型属性
  • 元素
行级块级
生成行级盒子生成块级盒子
内容分散在多个行盒中
span、em、strong、cite、code等body、article、div、main、section、h1-1、p、ul、li等
display:inlinedisplay:block

  • display属性

    • block---块级盒子
    • inline---行级盒子
    • inline-block---本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行
    • none---排版时完全被忽略

  • 行级排版上下文

    • Inline Fromatting Context(IFC)
    • 只包含行级盒子的容器会创建一个IFC
    • IFC内的排版规则
      • 盒子在一行内水平摆放
      • 一行放不下时，换行显示
      • text-align决定一行内盒子的水平对齐
      • vertical-align决定一个盒子在行内的垂直对齐
      • 避开浮动（float）元素

  • 块级排版上下文

    • Block Formatting Context(BFC)
    • 某些容器会创建一个BFC
      • 根元素
      • 浮动、绝对定位、inline-block
      • Flex子项和Grid子项
      • overflow值不是visible的块盒
      • display:flow-root;
    • BFC内的排版规则
      • 盒子从上到下摆放
      • 垂直margin合并
      • BFC内盒子的margin不会与外面的合并
      • BFC不会和浮动元素重叠

  • 行级和块级同在，会创建一个匿名盒子来包裹这两个元素

(5)Flex Box是什么？

  • 一种新的排版上下文
  • display: flex;
  • 他可以控制子级盒子的：
    • 摆放的流向（上，下，左，右）
    • 摆放的顺序
    • 盒子宽度和高度
    • 水平和垂直方向的对齐
    • 是否允许折行

image.png
justify-content

image.png
align-items

image.png

(6)Flexibility

  • 可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩
  • flex-grow有剩余空间时的伸展力
  • flex-shrink容器空间不足时的收缩力
  • flex-basis没有收缩或伸展时的基础长度

(7)Grid布局

  • 是一个二维布局
  • display: grid;使元素生成一个块级的Grid容器
  • 使用grid-template相关属性将容器划分为网格
  • 设置每一个子项占那些行/列
  • 划分网格：
grid-template-columns:100px 100px 200px;  //三列
grid-template-rows:100px 100px;  //两行
//（auto代表自动，1fr代表一份）
  • grid line 网格线

image.png

.a {
    grid-row-start:1;
    grid-column-start:1;
    grid-row-end:3;
    grid-column-end:3;
    }
    //等价于
.a {
    grid-area:1/1/1/1;
    }

(8)float浮动

(9)position属性

* static---默认值，非定位元素
* relative---相对自身原本位置偏移，不脱离文档流
* absolute---绝对定位，相对非static祖先元素定位
* fixed---相对于视口绝对定位
  • relative
    • 在常规流里面布局
    • 相对于自己本应该的位置进行偏移
    • 使用top,left,bottom,right设置偏移长度
    • 流内其他元素当它没有偏移一样布局
  • absolute
    • 脱离常规流
    • 相对于最近的非static祖先定位
    • 不会对流内元素布局造成影响

（10）z-index属性

指定定位元素的堆叠顺序
必须在position上才有效，可以负值，不同父元素的子元素之间进行显示时会根据父级元素的z-index进行渲染

参考：

HTML 简介 - 学习 Web 开发 | MDN (mozilla.org)

avatar
文章
阅读
粉丝