Web前端HTML5+CSS3知识点（6）css入门和基本语法（一）

1. CSS简介

结构(html)

表现(css) 

行为（js）

CSS:

层叠样式  层叠：蛋糕、化妆.网页实际是一个多层的结构，通过 css为每一层设置样式。

但我们最终能看到网页最上边的一层。

使用CSS来修改样式：

第一种：style属性。名字：value .内联样式，缺点不方便维护。耦合太紧。

<p style="color:red;font-size: 60px;"> codest</>

第二种：样式写到的head的style标签。内部样式表。 通过css选择器选中并设置样式，可以为多个标签设置，修改一次全都修改。缺点：只能对一个网页起作用，不能跨页面使用。

<style>
p {color:green;font-size:50px}
</style>

第三种：外部样式表，创建css文件，通过link标签引入（解耦） 优点：跨页面，可以利用浏览器的缓存机制、加快速度。

<link rel='stylesheet" href="./style.css">

2 基本语法：

选择器 声明块

选择器：通过选择器可以选中页面中的元素 。

声明块：通过声明块来指定要为元素设置的样式。

        声明块有一个个的声明组成。

        声明是一个名值对结构。通过：连接。已；结尾。

<style>

p{
  color:red;
  font-size:40px
}
h1{
    color:green;
}
</style>
<p>test</p>

3 选择器

1.常用选择器
元素选择器：可以根据标签名选择指定的元素，语法就是标签名+声明块如p{}。
id选择器：可以根据元素的id属性值，选中一个元素，id值唯一）。语法为#id属性值{}。
class标签属性：和id类似，但不同的是，class可以重复使用。可以通过class属性，为元素分组。
类选择器（开发当中主要使用）：可以根据元素的class属性选中一组元素，语法为.class属性值{}。可以同时为一个元素指定多个class。
通配选择器：选中页面中的所有元素，语法为*{}。

4. 复合选择器

1.交集选择器

同时选择符合多个条件的元素，语法：选择器1选择器2选择器3{}。 如：div .red {} 选中div且class=red.

【特别注意】： 交集选择器中如果有元素选择器，必须使用元素选择器开头。div#box1 不建议使用。

2.选择器分组/并集选择器

同时选择多个选择器对应的元素 如h1,span{}。

5、关系选择器

父元素
        直接包含子元素的元素叫做父元素
子元素
        接被父元素包含的元素是子元素
祖先元素
        直接或间接包含后代元素的元素叫做祖先元素， 一个元素的父元素也是它的祖先元素
后代元素
        直接或间接被祖先元素包含的元素叫做后代元素
子元素也是后代元素
兄弟元素
        拥有相同父元素的元素叫兄弟元素
子元素选择器
        作用：选中指定父元素的子元素
        语法：父元素 > 子元素{}。
后代元素选择器
        作用：可以选中指定祖先元素内的指定后代元素
        语法：祖先 后代{}。
兄弟元素选择器（注意单兄弟和多兄弟）
        选择下一个兄弟，语法：前一个+下一个
        选择下面所有兄弟，语法：兄~弟

交集选择器：获取的是同级中的某一个p.roe{   }两个选择器之间没有空格

后代选择器:获取的是父级下的所有子孙 .rod p{ } 两个选择器之间有一个空格

6. 属性选择器

1.【属性名】
        选择含有指定属性的元素
2.【属性名=属性值】
        选择含有指定属性名和属性值的元素
3.【属性名^=属性值】
        选择属性值以指定值开头的元素
4.【属性名$=属性值】
        选择属性值以指定值结尾的元素
5.【属性名*=属性值】
        选择属性值中含有某值的元素

7. 伪类选择器

伪类
        伪类是不存在的类，特殊的类
        作用是用来描述一个元素的特殊状态（如被鼠标点击的元素、第一个元素、被移入的元素）
        伪类一般情况下都是使用：开头：
        :first-child，选中第一个子元素
        :last-child，选中最后一个子元素
        nth-child()，选中第n个子元素：1,2,3,4
                特殊值： 第n个，n的范围0到正无穷，2n 或 even 表示选中偶数位的元素，2n+1 或 odd                 表示选中奇数位的元素
以上所有的伪元素都是根据所有的子元素进行排序的：
-first-of-type，last-of-type，nth-of-type（），这几个伪类的功能和上述类似，不同点在于他们是在同类型元素中进行排序。
：not（）表示否定伪类，将符合条件的元素从选择器中去除

8. 超链接的伪类

1.:link一般用来表示没被访问过的链接（正常的链接）
2.:visited一般用来表示被访问过的链接，由于隐私的原因，所以visited这个伪类只能修改链接的颜色。
3.:hover用来表示鼠标移入的样式
4.:active用来表示鼠标点击的状态

9. 伪元素选择器

伪元素

伪元素表示页面中一些特殊的并不真实存在的元素（特殊位置）
伪元素使用：：开头（双冒号）
：：first-letter（表示第一个字母）
-：：first-line（表示第一行）
-：：selection（表示选中的内容）网上的选中效果。
-：：before（表示元素的起始位置）
-：：after(表示元素的结束位置）
-：：before和：：after必须结合到content属性来用