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

学习笔记

对CSS的认识

CSS称为层叠样式表，全称为Cascading Style Sheets，主要用于设置HTML页面中文本的内容（主要包括有字体，大小，位置等），还能设置图片的宽高以及版面的整体布局（内外边距，边距和对齐方式）。

CSS的语法

CSS中的选择器

基础选择器

基础选择器是由单个选择器组成的

1.标签选择器（元素选择器）
p h1 div

<p>这是一个p</p>
p {
    color: red;
}

2.id选择器
#main

<div id="main">这是一个div</div>
#main {
    color: red;
}

3.类选择器 .select

<div class="select">这是一个div</div>
.select {
    color: red;
}

4.多类名选择器
通过给元素添加多个不同的选择器，来实现多种效果。

<div class="font20 red fontWeight">青训营笔记02</div> 
<style>
    .font20 {
        font-size: 20px;
    }
    .red {
        color: red;
    }
</style>

CSS当中主要由两个主要的部分来组成：一个是选择器，另外一个是选择器中包含的属性及相关值。

div {
        color: green;
        font-size: 14px;
    }

注：声明当中若只有一个，则可以将分号省略。

其他选择器

1.通配符选择器

* {
    margin: 0;  /*定义外边距*/
    padding: 0; /*定义内边距*/
}

这个选择器的权重大小很低。 2.伪类选择器有关链接相关，需要有一定的顺序，lvha。

    a:link {        /*未访问*/
        color: grey;
    }
    a:visited {     /*已访问*/
        color: orange;
    }
    a:hover {       /*鼠标移动链接*/
        color: red;
    }
    a:active {      /*鼠标选定链接不松开*/
        color: blue;
    }

有关位置相关，实现不同位置不同效果。
:first-child 第一个子元素。
:last-child 获取最后一个子元素。
:nth-child(n) 选取某个子元素或者某些元素，能用很多方式，可以用公式：2n+1。
:nth-last-child(n) 和上一个效果差不多，但是是从最后一个子元素开始。

先选中类型再选择子元素的位置。以span标签为例子。其余效果与xxxx-child类似。
span:first-of-type
span:last-of-type
span:nth-of-type(n)
span:nth-last-of-type(n)

before和after伪类选择器
以前这两个可以用于清除浮动。

.clearfix:after{
  content:'';
  visibility:hidden;
  display:block;
  width:0;
  height:0;
  clear:both;
}

前端学习02|青训营笔记