了解CSS ｜青训营笔记这是我参与「第四届青训营」笔记创作活动的的第2天这两天我们小组开会，主要讨论了一下最后三个

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

这两天我们小组开会，主要讨论了一下最后三个项目选哪个，第三个最简单，感觉还是可以的，我们小组激烈的经过讨论最终决定先试一下第一个项目，很多人都不会，需要时间去学习。我们的办法是，先去搜索相关资料，研究2天左右时间，看看有没有思路，然后明天再开会讨论，看看难易程度，最终再定下来。

因为最后是7月29号截止选项目，所以我们先在可以先尝试一下，如果都还是不会，那么就选第二个或者第三个，我们全组成员都认为是个不错的方案。

下面进入正题：CSS相关知识

CSS 全拼为：Cascading Style Sheets

主要是选择器定义样式，可以设置相关属性，例如color 或者 font-size进行value的设置，就能达到想要的效果。

CSS可以直接外链、嵌入和内联，为了方便程序员更轻松的使用。

CSS是如何工作的：

选择器可以有很多种方式

1.按照标签名、类名、id

标签选择器

<style>
    h1{
        color:gray
    }
</style>

类选择器

<style>
    .done{
        color:gray
    }
</style>

id：

<style>
    #logo{
        font-size:60px
    }
</style>

2.按照属性

<input value ="zhao" disabled> 
<style>
    [disabled]{
        background:#eee
    }
</style>

4.* 全局起作用

<h1>题目</h1>
<style>
    *{
        color:red
    }
</style>

伪类（pseudo-classes）

/*默认状态下*/
a:link {
    color: black;
}
/*已访问过的链接*/
a:visited {
    color: gray;
}
/*当用户鼠标放在链接上时*/
a:hover {
    color: orange;
}
/*链接被点击那一刻*/
a:active {
    color: red;
}
/*选择元素输入后具有焦点*/
input:focus {
    outline: 2px solid orange;
}

组合（Combinators）

选择器组

body, h1, h2, h3, h4, h5, h6, ul, ol, li {
    margin: 1;
    padding: 2;
}
[type="checkbox"],[type="radio"] {
    box-sizing: border-box;
    padding: 1;
}

合法颜色值

1.十六进制颜色

2.RGB 颜色

3.HSL 颜色

字体

关键字 small,medium,large
长度 px,em
百分数相对于父元素字体大小

主要内容就这些，感谢大家的阅读，剩下的我再自己记录一下！

了解CSS ｜ 青训营笔记