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

一、重点内容：

css在页面中负责定义元素样式
3种css：Inline > Document > External
选择器的优先级

二、详细知识点：

css由选择器、属性、属性值构成。选择器用来选择页面中的元素。声明与声明之间用; 隔开
通配选择器：*
```
<style>
* {
   color:red;
}
</style>
```

id选择器：#, id需要唯一

<p id="lizi">内容</p>
<style>
#lizi {
   color:red;
}
</style>

class选择器： .

<ul class="tab">
    <li>1</li>
     <li>2</li>
</ul>
<input class="tab" value="n">
<style>
.tab {
    color: red;
}
input.tab {
    color: blue;
}
</style>

属性选择器：例如在input中具有属性disabled

<input value="p" disabled />
<input value="x" type="password" />
<style>
    <!--若要对disabled的input限制样式-->
    [disabled] {
        color: blue;
    }
    <!--若要对具有特殊属性值的input限制样式-->
    input[type="password"] {
        color: red;
    }
</style>

css工作原理：

外链css

<link rel="stylesheet" href="css文件的路径">

嵌入document css

<style>
   <!--css文件内容 -->
</style>

内联css

<p style="color:blue;">内容</p>

伪类

状态伪类

当元素位于某种状态下，才会被选择

<a href="www.biadu.com">baidu</a>
<style>
    <!--默认状态-->
    <!--在css中顺序必须是link、visited、hover、active-->
    a:link{
        color: red;
    }
    <!--访问过状态-->
    a:visited {
        color: blue;
    }
    <!--鼠标移在连接上的状态-->
    a:hover {
        color: yellow;
    }
    <!--鼠标按下去的状态-->
    a:active {
        color: green;
    }
</style>

结构性伪类

根据dom节点在dom树中出现的位置决定元素选中

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<style>
    li:first-child {
        color: red;
        <!--1的颜色是red-->
    }
    li:last-child {
        color: blue;
        <!--3的颜色是red-->
    }
</style>

css属性

color

h1 {
    color: rgba(255, 255, 255, 0.7);
    <!--alpha为1是完全不透明-->
}
h2{
    color: #02a6b5ff;
    <!--#前六位为颜色，后两位为透明度-->
}
h3{
    color: hsl(18,91%,82%);
    <!--hsl(色相，饱和度，亮度)-->    
    <!--色相：0-30，饱和度：0-100%，亮度：0-100%)-->
}

字体 font-family

在W3时，不能使用font设定字体

<!--需指定多个字体，浏览器依次匹配库内存在的字体-->
<!--在最后需要设定一个通用字体簇--> 
<!--英文字体写在中文字体前--> 
h1 {
    font-family: Optima, serif, Monospace;
}
h2{
    font-family: f1, serif;
}
<!--或使用web fonts将字体放在服务器上-->
<style>
    @font-face {
        font-family: "Megrim";
        src:
        url(字体文件所在位置)
    }
    <!--为了减小开销，可以用format对字体进行裁切，只选择需要的那一部分-->
    @font-face {
        font-family: f1;
        src:
        url("//s2.ssl.qhimg.com/static/ff00cb8151eeecd2.woff2") format("woff2");
      
  }
</style>

font-size

长度：px、em（相对单位）
百分数：相对于父元素字体大小
斜体：font-style: italic；
字体粗细是 font-weight范围是 100-900

line-height

行高若不写单位eg1.6，就是字体的1.6倍

text-align

left、right、center、justiify

white-space

规定段落中的文本不进行换行

css调试

cmd+option+i

选择器的优先级

根据选择器的特异度判断，id# > (pseudo)class. >标签

截屏2023-01-17 12.48.18.png 122>022,so 第一个优先级高
某些属性会自动继承其父元素的计算值。对于不可继承的属性，若想继承父元素，则需要 * { 属性: inherit;}

布局Layout

content box： width与height都指的是content box的宽高
width取值为长度、百分数、auto。auto取决于浏览器
height取值为长度、百分数、auto。百分数需要依赖容器的content box高度，auto取决于计算值。

padding取百分数时相当于content宽度 10px：上下左右都是10；10px 20px：上下10，左右20；10px 20px 30px 40px:上10，右20，下30，左40（顺时针）
border边框3种属性:border-width, border-style, border-color
border四个方向：border-top, border-rigth, border-bottom, border-left.
eg. border-top-color: #fff; border-style: solid; margin外边。margin: auto;是水平居中
当固定了大小后，使用overflow处理超出边框范围的内容，overflow具有三种模式，visible（超出部分显示在边框外）、hidden、scroll。

常规流

行级与块级
block level box块级不和其他盒子并列摆放。
inline level box和其他行纪盒子一起放在一行或拆开成多行，不适用盒模型的width、height属性
display属性：block（块级盒子）、inline（行级盒子）、inline-block（本身是行级，可以放在行盒中；可以设置宽高；作为整体不会被拆成多行）、none（排版时会被忽略）

行级排版上下文IFC

只包含行级盒子的容器会创建一个IFC
text-align决定一行内盒子的水平对齐
vertical-align决定一个盒子在行内的垂直对齐

块级排版上下文BFC

根元素、浮动、绝对定位、inline-block、flex子项和grid子项、overflow不是visible的块盒、display：flow-root；会创建一个BFC
垂直margin排版
BFC内的盒子margin不会与外面的合并

Flex Box

display：flex 控制子级盒子的摆放流向、摆放顺序、盒子高宽度、水平垂直方向的对齐
Flexibility: flex-grow有剩余空间时的伸展能力，flex-shrink容器空间不足时收缩的能力，flex-basis没有伸展或收缩时的基础长度

grid

dispaly: grid; 生成块级容器
使用grid-template相关属性将容器划分为网格

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

浮动float

为了实现文字环绕 ``` img{ float:lefy; } ```

绝对定位

position: static(非定位元素)、relative、absolute(相对于最近的非static祖先定位)、fixed

三、练习：

当边框宽高都为0时，只剩下border，可根据需要保留三角形（其他设为透明）

截屏2023-01-19 18.24.12.png 截屏2023-01-19 18.25.52.png

<style>
    p{
        width: 0;
        height: 0;
        border-right-color: yellow;
        border-bottom-color: red;
        border-left-color: burlywood;
        border-top-color:black;
        border-style: solid;
    }
</style>

四、参考：

css属性： www.runoob.com/cssref/pr-t…

CSS | 青训营笔记