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

一、本堂课的重点

初识CSS
选择器的分类
常用样式的属性值
常用网页布局

二、初始css

2.1 CSS是什么？

定义：CSS 指层叠样式表 (Cascading Style Sheets)，是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。简单来说就是给HTML“穿衣服”，让他更加的漂亮。

2.2 CSS如何在页面中使用？

1. 外链 <link rel="stylesheet" href="文件的路径">书写一个css的文件，然后在HTML中进行外部引用。
2. 嵌入 <style> 选择器 </style>在HTML中书写样式。
3. 内联 <p style="样式"></p>在某一个标签中书写样式（记得加上style）。

在这些用法中，最常用的、最推荐的就是第一种了。使用第一种方法可以使HTML结构更加明了，组件分离。其他的方法在一些特殊的地方使用，是非常好的，可以说各有各的有缺点。

2.3 CSS是如何工作的？(了解)

三、选择器

3.1 类选择器和标签选择器

3.1.1 类选择器
选择类型中的一个来进行个性化样式
语法格式：. 类名 { 属性：属性值;}
3.1.2 标签选择器
用HTML中的标签作为选择器，其特点：一选全选，样式全改
例如：

<style>
    div {
        width:100px;
        height:100px;
    }/*这是一个标签选择器，选中的是HTML中所有的div盒子*/ 
    .red {
        color:red;
    }/*这是一个类选择器，要使用red这个选择器，要用class属性来调用*/
</style>
<body>
    <div class="red"></div>
</body>

3.2 id选择器：只能被一次调用

语法格式： # 名字 { 属性: 属性值;}
其用法跟类选择器差不多，将class属性改为id属性即可<div id="名字"></div>

3.3 通配符选择器

语法格式：* { 属性: 属性值;}这也是一个很特殊的选择器，它的作用是将网页中的所有元素都选中

<style>
    * {
        margin: 0;
        padding: 0;
   }/*我们通常将这行代码写在css文件中的开头，消除内外边距*/
</style>

3.4属性选择器：根据元素特定属性来选择元素

例如:

<style> 
    input[value] {
        color: red;
    }/*这个中括号里的内容是特殊的属性，就是input标签中别人没有的*/
    input[type="password"] {
        color: pink;
    }/*还可以是不同的值*/
     div[class^=icon] {
         color: blue;
    }/*根据属性值的开头的元素*/
    div[class$=date] {
        color: skyblue;
    }/*根据属性值的结尾的元素*/
</style>
<body>
    <input type="text" value="你好">
    <input type="text">
    <input type="password">
    <div class="icon1"></div>
    <div class="icon2"></div>
    <div class="icon1-date"></div>
    <div class="icon2-date"></div>
</body>

3.5结构伪类选择器：可以在父元素中指定选择一个或n个元素

例如：
ul li:first-child {属性值;}这行代码表示的是在ul中的第一个li被选中

除了frist-child还有last-child、nth-child(n)(表示第n个，n可以是数字、公式、关键字)、frist-of-type、last-of-type、nth-of-type(n)等。

3.6伪元素选择器：创建一个新的元素

::before 在元素内部前面插入内容 ::after 在元素内部后面插入内容

3.7复合选择器

3.7.1后代选择器:只能运用的子代上

<style>
    ol li {
        color: red;
    }
</style>
<body>
    <ol>
        <li>xxx</li>
    </ol>
</body>

3.7.2子选择器：就近原则

元素1>元素2 {属性: 属性值;}

3.7.3并集选择器

元素1,元素2 {属性: 属性值;}

四、常用样式的属性值

font属性 font-family（字体）,font-size,font-weight等
color属性 color: red;（单词）,rgb(0,0,0);hsl(0.50%,50%);
text属性 text-align,text-decoration,text-indent,line-height等
内外边距 margin padding
bckground属性 background-color、image、repeat、position

五、布局

标准流,浮动,flex等

深入了解CSS | 青训营笔记