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

一：CSS的理解

CSS是一种定义样式结构如字体、颜色、位置等的语言，被用于描述网页上的信息格式化和现实的方式。CSS样式可以直接存储于HTML网页或者单独的样式单文件。无论哪一种方式，样式单包含将样式应用到指定类型的元素的规则。样式规则是可应用于网页中元素，如文本段落或链接的格式化指令。样式规则由一个或多个样式属性及其值组成。内部样式单直接放在网页中，外部样式单保存在独立的文档中，网页通过一个特殊标签链接外部样式单。名称CSS中的“层叠（cascading）”表示样式单规则应用于HTML文档元素的方式。具体地说，CSS样式单中的样式形成一个层次结构，更具体的样式覆盖通用样式。样式规则的优先级由CSS根据这个层次结构决定，从而实现级联效果。

二：如何在页面中使用CSS

1.内联

直接在标签内添加style属性来控制该标签内容，不建议使用

<h2 style="color:red ;font-size:14px">使用CSS修饰二级标题的大小和颜色</h2>

2.嵌入

在<style></style>内添加代码来选择控制相应的内容

        p{
            font-size:26px;
            color: pink;
        }
</style>

3.外链

链接外部CSS文件来更改当前页面的内容的样式，简称外链。推荐使用

<link rel="stylesheet" href="../css/demo.css">

三：CSS选择器

CSS用选择器来选中要控制的内容，常用的有标签选择器、ID选择器、类选择器、通配选择器和属性选择器。并且选择器有优先级，优先级越高页面内容就会优先使用该选择器来控制页面内容。

1.id选择器

用#标记

   <style>
       #cs{
       font-size:50px;
       color:red;
       }
    </style>

2.类选择器

用.标记

<p class="demo">Learn CSS</p>
   <li class="done">hello</li>
<style>
   .demo{
   color:gray;
   text-decoration:line-through;  
</style>
}

3.标签选择器

直接对标签元素进行样式设置

html {color:black;}
p {color:gray;}
h2 {color:silver;}

4.属性选择器

a[target="_blank"] { 
  background-color: yellow;
}

5.伪类选择器

四：CSS深入

1.继承

SS的一个主要特征就是继承，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。

2.CSS布局

3.CSS学习建议

《理解CSS》|青训营笔记

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