标签：并集   奇数   link   统一   多层   渲染   访问   基础   第一个字符   

CSS基础

定义:

• ss是层叠样式表.css可以用来为网页创建样式表，通过样式表可以对网页进行装饰。
• 层叠：可以将整个网页想象成是一层一层的结构，层次高的将会覆盖层次低的。
• css可以分别为网页的各个层次设置样式。

作用 :

• 渲染页面
• 提高工作效率

后缀名:

• .css 独立的css(样式)文件

注释:/**/

• CSS的注释，作用和HTML注释类似，只不过它必须编写在style标签中，或者是css文件中

样式位置:

• 内联样式表通过标签的style属性设置样式（直接在标签上,不建议使用）
  

  天佑中华-内联

• 内部样式表 在当前页面中使用的样式;通过head标签的style子标签导入
  

• 外部样式表 有独立的css文件（最推荐）
  

  将CSS样式统一编写到外部的样式表中，完全使结构和表现分离，可以使样式表可以在不同的页面中使用，最大限度的使样式可以进行复用，将样式统一写在样式表中，然后通过link标签引入，可以利用浏览器的缓存，加快用户访问的速度提高了用户体验，所以在开发中我们最推荐使用的方式就是外部的CSS文件

  1.创建以css结尾的文件;
  

基本语法

CSS的样式表由一个一个的样式构成，一个样式又由选择器和声明块构成。

• 选择器
  

  通过选择器可以选中页面中指定的元素，并且将声明块中的样式应用到选择器对应的元素上

• 声明块：
  

  声明块紧跟在选择器的后边，使用一对{}括起来，

  声明块中实际上就是一组一组的名值对结构，

  在一个声明块中可以写多个声明，多个声明之间使用;隔开，

  声明的样式名和样式值之间使用:来连接

选择器

注意：

• 若多个样式作用于一个元素的时候
  • 不同的样式,会叠加
  • 相同的样式,最近原则（在下方的实现）
• 若多个选择器作用于一个元素的时候
• 越特殊优先级越高 id>class>属性>标签

id选择器：

通过元素的id属性值选中唯一的一个元素
语法：

#id属性值 {}

例如:

#id1{...}

class选择器：

通过元素的class属性值选中一组元素

可以同时为一个元素设置多个class属性值，多个值之间使用空格隔开，只要满足的class都会实现

语法：

.class属性值{}

例如:

.cls1{...}
锄禾日当午

元素选择器(标签)

通过元素选择器可以选则页面中的所有指定元素

p{
    color: red;
}
锄禾日当午

选择器分组(并集选择器)：同时设置多个选择器

通过选择器分组可以同时选中多个选择器对应的元素
语法：选择器1,选择器2,选择器N{}

#p1 , .p2 , h1{
    background-color: yellow;
}
拥有这三个选择器中的任意一个都会调用这个选择器

通配选择器 *

可以用来选中页面中的所有的元素

语法：*{}

*{
    color: red;
}
所有的文字都会变成红色

复合选择器（交集选择器）（同时满足）

可以选中同时满足多个选择器的元素，只有同时拥有这几个选择器的元素才调用这个

对于id选择器来说，不建议使用复合选择器（id已经能够唯一确定了）

语法：选择器1选择器2选择器N{} 中间没有空格(没有空格严格是下一级,有空格,可以是下n级)

span元素，同时class为p3的元素，设置
span.p3{
    background-color: yellow;
}

属性选择器：元素选择器的特殊用法

要求: html元素必须有一个属性,不论属性是什么,且有值 （初始化）

作用：可以根据元素中的属性或属性值来选取指定元素

语法1： 不用元素、引号

案例:

[title~=flower]{
    border:5px solid yellow;
}

语法2：有元素名

span[att="val"]{    /*属性选择器，att="val"是随便写*/
      background-color: #ff0;
}
调用： 
天佑中华
/*---------------------------------*/
p[title^="ab"]{         /*包含开头*/
    background-color: yellow;
}
调用：
我是一个段落

后代选择器（空格）

选中指定元素的指定后代元素，在祖先元素中的后代选择器添加样式；

语法： 祖先元素 后代元素{} （使用空格）

可以多层设置 ：元素1 元素2 元素3 。。。{}

注意：祖先元素中的所有后代元素都会添加这个样式---多层的也会添加（直接或间接包含）；

#d1 span{
    color: greenyellow;
}
---------------

    我是div标签中的span      直接包含：调用
    
我是p标签中的span
    间接包含：调用


-------多层设置-----------
#d1 p span{
    font-size: 50px;
}

子元素选择器 >

选中指定父元素的指定子元素(孙元素不会)
IE6及以下的浏览器不支持子元素选择器

语法：父元素 > 子元素

div > span{
    background-color: yellow;
}      
----div下的span添加样式，孙元素不会调用

兄弟选择器

语法:

为span后的一个p元素设置一个背景颜色为黄色
span + p{    background-color: yellow;}

伪类选择器：

有时候，你需要选择本身没有标签，但是仍然异于识别的网页部位，比如段落首行或鼠标滑过的连接。CSS为他们提供一些选择器：伪类和伪元素。

伪类：专门用来表示元素的一种的特殊的状态，比如：访问过的超链接，比如普通的超链接，比如获取焦点的文本框；当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类

伪类的顺序：

涉及到a的伪类一共有四个，而这四个选择器的优先级是一样的。

input:focus{
   background-color: yellow;
}
p:before{
    content: "我会出现在整个段落的最前边";
    color: red;
}
,可以看

content中的内容出现在最前面，无法选中

锚伪类选择器（超链接常用）

有四个伪类可以让你根据访问者与该链接的交互方式，将链接设置成4种不同的状态。

浏览器是通过历史记录来判断一个链接是否访问过,由于涉及到用户的隐私问题，

visited伪类只能设置字体的颜色；

hover和:active也可以为其他元素设置；IE6中，不支持对超链接以外的元素设置:hover和:active

否定伪类

可以从已选中的元素中剔除出某些元素

语法： :not(选择器)

为所有的p元素设置一个背景颜色为黄色，除了class值为hello的
p:not(.hello){   background-color: yellow;}

2001CSS基础

标签：并集   奇数   link   统一   多层   渲染   访问   基础   第一个字符   

原文地址：https://www.cnblogs.com/ziyue7575/p/12218945.html