走进前端技术栈-CSS | 青训营笔记这是我参与「第五届青训营」伴学笔记创作活动的第 2 天，天才都是99%的努力加上

这是我参与「第五届青训营」伴学笔记创作活动的第 2 天，天才都是99%的努力加上1%的汗水，加油！

CSS 是什么

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

/*这是一条样式规则---选择器 + 大括号*/
h1 {
    color: red;
}

h1-----------选择器Selector----给页面所有 h1 添加样式 color--------属性Property-----设置元素 red----------属性值value-------红色 color:red;---声明declaration

在页面中使用CSS

外链(推荐使用)


<link rel="stylesheet" href="">

嵌入


<style>

</style>

内联

<p style="margin: auto"></p>

CSS是如何工作的

02走进前端技术栈-css_01.png

选择器Selector

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

匹配所有

* {
    color: red;
}

标签选择器
id 选择器(唯一)

页面唯一的


<div class="logo">
    <img src="" alt="">
</div>

<style>
    #logo {
        width: 200px;
        font-size: 15px;
    }
</style>

类选择器(可重复)

同一类型


<div class="list">learn HTML</div>
<div class="list">learn CSS</div>
<style>
    .list {
        font-size: 15px;
    }
</style>

属性选择器

通过元素的属性或者属性值去选择元素

<label>用户名：</label>
<input value="zhao" disabled>

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

<style>
    /*只要元素有这个属性就选中它*/
    [disabled] {
        background-color: red;
        color: #fff;
    }

    /*选中所有input带有type="password"中这个属性的元素*/
    input[type="password"] {
        border: 1px solid red;
    }
</style>

属性的值的匹配

<p><a href="#top">回到顶部</a></p>
<p><a href="a.jpg">查看图片</a></p>

<style>
    /*匹配a标签的href属性以#开头的*/
    a[href^="#"] {
        color: aquamarine;
        background: 0 center/1em url("https://photo.jpg") no-repeat;
    }

    /*匹配a标签的href属性以.jpg结尾的*/
    a[href$=".jpg"] {
        color: deeppink;
        background: 0 center/1em url("https://") no-repeat;
    }
</style>

伪类(pseudo-classes)
不基于便签和属性定位元素
- 状态伪类---元素处于某种特定的状态才会触发

<a href="">example</a>

<label for="">
    用户名：
    <input type="text">
</label>

<style>
    /*默认状态*/
    a:link {
        color: black;
    }

    /*访问过*/
    a:visited {
        color: gray;
    }

    /*鼠标悬浮在这个元素上面*/
    a:hover {
        color: orange;
    }

    /*鼠标按下的时候*/
    a:active {
        color: red;
    }

    /*聚焦*/
    :focus {
        outline: 2px solid orange;
    }
</style>

结构伪类


<ol>
    <li>飞驰人生</li>
    <li>泰坦尼克号</li>
    <li>老师，你好</li>
    <li>这个杀手不太冷</li>
    <li>侏罗纪世界</li>
</ol>

<style>
    li {
        list-style-position: inside;
        border-bottom: 1px solid;
        padding: 0.5em;
    }

    /*选中li父级元素的第一个子元素*/
    li:first-child {
        color: coral;
    }

    /*选中li父级元素的最后一个子元素*/
    li:last-child {
        border-bottom: none;
    }
</style>

组合(Combinators)

<label for="">
    用户名：
    <input type="text" class="error" value="aa">
</label>
<span class="error">最少3个字符</span>

<style>
    .error {
        color: coral;
    }

    /*选中input中类名为error的元素*/
    input.error {
        border-bottom-color: coral;
    }
</style>

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

选择器组

同时对多个选择器选择相同的样式

body, h1 {
    margin: 0;
}

颜色 - RGB

都是通过三原色(红蓝绿)混合

十六进制
rgb()--- 0 ~ 255

颜色-HSL

Hue

色相(H)是色彩的基本属性，如红色、黄色等，取值范围为 0 ~ 360
Saturation(鲜艳度) 饱和度(S)是指色彩的鲜艳程度，越高越鲜艳，取值范围为 0~100%
Lightness(亮度) 亮度(L)指颜色的明亮程度越高，取值范围为 0 ~ 100%

h1 {
    color: hsl(211, 66%, 50%);
}

alpha透明度(0 - 1)

1 的时候是不透明的，0的时候是透明的

十六进制
rgba()

字体 font-family

通用字体族
- 衬线体
- 无衬线体
- 手写体
- Fantasy
- 等宽字体
使用Web Font
使用font-size
使用font-weight(100-900)
- 使用line-height
两行文字的基准线
white-space：处理空白符

调试CSS

浏览器F12