css笔记01

css笔记01

1. css样式

1.1 内联样式
（1）可以将css样式编写到元素的style属性中
将样式直接编写到style属性中，这种样式我们称为内敛样式
内联样式只对当前的元素中的内容起作用，内联样式不方便复用
内联样式属于结构与表现耦合，不方便后期维护，不推荐使用

             <p style="color:red; font-size:40px;">锄禾日当午，汗滴禾下土</p>

1.2 写在head标签中
也可以将css编写到head中的style标签里
将样式编写的style标签中，然后通过css选择器中指定元素
然后可以同时为这些元素一起设置样式，这样可以使样式进一步复用
将样式编写到style标签中，也可以使表现和结构进一步分离它，也是推荐的使用方式

            <style type="text/css">
                p{
                    color:red;
                    font-size:40px;
                }
        
            </style>

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

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

2.css注释
作用和html注释类似，只不过它必须编写在style标签中，或者在css文件中

            css语法：
                选择器 声明块

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

            声明块：
                - 声明块紧跟在选择器的后边，使用一对{}括起来
                    声明块中实际上就是一组一组的名值对结构
                        这一组一组的名值对我们称为声明
                    在一个声明块中可以写多个声明，多个声明之间用;隔开
                    声明的样式名和样式值之间使用:来连接
       p{
            color:red;
            font-size:40px;
        }

3.块元素和内联元素

    	div就是一个块元素
    		所谓的块元素就是会独占一行的元素,无论他的内容有多少
    			他都会独占一行
    		p h1 h2 h3...
    		div这个标签没有任何语义，就是一个纯粹的块元素
    			并且不会为它里边的元素设置任何的默认样式
    		div元素主要用来对页面进行布局
    	
    	span是一个内联元素（行内元素）
    		所谓的行内元素，指的是只有自身大小的元素，不会占用一行
    		常见的内联元素：
    			a img iframe span
    		span 没有任何的意义，span标签专门用来选中文字，
    		  然后为文字设置样式

（1） 块元素主要用来做页面中的布局，内联元素主要用来选中文本设置样式
（2） 一般情况下只使用块元素去包含内联元素，而不使用内联元素去包含一个块元素
（3）a 元素可以包含任意元素
（4）p 元素不可以包含任何其他的块元素

4.常用选择器
4.1元素选择器
- 作用：通过元素选择器可以选择页面中的所有指定元素
- 语法：标签名{}

   为页面中所有p元素，设置一个字体颜色为红色
     p{
			color:red;
		}

4.2 id选择器
- 通过元素的id属性值选中唯一的一个元素
- 语法： #id属性值{}

		#p1{
			font-size: 20px;
		}

4.3 类选择器
- 通过元素的class属性值选中一组元素
- 语法：.class属性值{}

		.p2{
			color: yellow;
		}

4.4 通配选择器
- 它可以用来选中页面中的所有元素
- 语法： *{}

       *{
			color: red;
		}

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

 为id为p1的元素，class为p2的元素，还有h1同时设置一个背景颜色为绿色
 #p1, .p2, h1{
			background-color: green;
}

4.6 复合选择器（交集选择器）
- 作用：可以选中同时满足多个选择器的元素
- 语法：选择器1选择器2选择器N{}

为拥有class p3 的span 元素设置一个背景颜色为黄色
span.p3{
			background-color: red;
}

• 对于id选择器来说，不建议使用复合选择器

4.7 元素之间的关系

• 父元素：直接包含子元素的元素
• 子元素：直接被父元素包含的元素
• 祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素
• 后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素
• 兄弟元素：拥有相同父元素的元素叫兄弟元素

4.8 后代元素选择器
- 作用：
- 选中指定元素的指定后代元素
- 语法： 祖先元素 后代元素{}

 为id为d1的div中的span设置一个颜色为绿色
 #d1 span{
	   color: greenyellow;
 }

4.9 子元素选择器
- 作用：
- 选中指定父元素的指定子元素
- 语法：父元素 > 子元素

• IE6 及以下的浏览器不支持子元素选择器

  div的子元素span设置一个背景颜色为黄色
    div > span{
    		background-color:yellow;
    }
  

2020.1.16

:first-child 可以选中第一个子元素
:last-child 可以选中最后一个子元素
:nth-child 可以选中任意位置的子元素
 - 该选择器后边可以指定一个参数，指定要选中第几个子元素

• even 表示偶数

• odd 表示奇数

        为第一个p标签设置一个背景颜色为黄色
        body > p:first-child{
    		background-color: yellow;
    	}
    	
    	为最后一个p标签设置一个背景颜色为黄色
    	p:last-child{
    		background-color: yellow;
    	}
    	p:nth-child(even){
    		background-color:yellow;
    	}
  

:first-of-type
:last-of-type
:nth-of-type

• 和:first-child这些非常相似，而type是在当前类型的子元素中排列

      p:first-of-type{
    		background-color:yellow;
    	}
  

4.10 兄弟选择器
（1）为span后的一个p元素设置一个背景颜色为黄色
后一个兄弟元素选择器

• 作用：可以选中一个元素后紧挨着的指定的兄弟元素

• 语法：前一个 + 后一个

    span + p{
   		background-color:yellow;
   }
  

（2）选中后边的所有兄弟元素

• 语法：前一个 + 后面所有

      span ~ p{
   		background-color:yellow;
   	}
  

4.11 否定伪类
（1）否定伪类：

• 作用：可以从已选中的元素中剔除某些元素

• 语法：
  :not(选择器)

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

2020.1.20