CSS基础知识（二）

块和内联

块元素：独占一行的元素。无论内容多少，独占一行。

p h1  h2 h3 

div:没有任何语意，就一个块元素并且不会为里面的元素设置默认样式。主要对页面进行布局

 内联元素：（行内元素）

只占用自身大小的元素，不会独占一行。会自动换行

span：没有任何语意，专门用来选中文字为文字来设置样式

img   a 超链接（可以包含任意元素，除了a本身）

p元素中不能包含其他任何块元素，只能放内联元素。

一般情况下只用块元素去包含内联元素，而不会使用内联元素去包含一个块元素。

 

元素选择器：

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

语法：标签选择器

p{color: red;
       	}

id选择器：通过元素的ID属性值，来选中唯一的一个元素。

	#p1{
       		font-size: 10px;
       	}

可以为元素设置class属性：和id属性类似。但是可以重复。拥有相同class值得元素，是一组元素。

类选择器：通过元素的class属性值，选中一组元素

语法

p class = "p2">hsishisi</p>




.p2{
       		font-size: 50px;
       	}

可以同时唯一元素设置多个class值，多个值之前用空格隔开

 

<p class = "p2 hello">hsishisi</p>

.hello{
       		font-size: 5px;
       	}

选择器分组

同时选择多个选择器对应的元素：

	p,p2,h1{
       		background-color: aquamarine;
       	}

通配选择器

*{
       		color: red;
       	}

伪类选择器

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

浏览器是通过历史记录来判断是否访问过。

a:link{
				color: forestgreen;/*没访问过的*/
				font-size: 90px;
			}
a:visited{
				color: beige;/*访问过的 ,由于涉及到用户隐私问题，visited伪类只能设置字体颜色*/
			}

为没访问过的链接设置颜色为绿色

鼠标移入

a:hover   

a:hover{
				color: chartreuse;
			}

 点击的一个状态

a:active{
				color: black;
			}

hover和active也可以为其他元素设置

IE6中不支持对超链接以外的元素设置hover和active

使用input可以创建一个文本输入框

<input type="text" />

获取焦点  ：focus

文本框获取点击后变色

input:focus{
				background-color: #7FFFD4;
			}

为选中的文字设置样式：：selection

p::selection{
				background-color: aqua;
			}

在火狐中

p::-moz-selection{
				background-color: aqua;
			}

 

伪元素选择器

标签就是元素，元素就是标签。

使用伪元素来表示元素中的一些特殊的位置。

为p中的第一个字符设置特殊样式，首行设置

p:first-letter{
				color: red;
				font-size: 40px;
			}
p:first-line{
				color: gray;
			}

before都需要结合content这个样式一起使用，通过content可以向before或after的位置添加一些元素。不可选中。

p:before{
				content: "wohuichuxainzais";
                color：red；    
    	    }
p:after{
				content: "wohuichuxainzais";
			}

属性选择器

属性：

title属性可以给任意标签指定。

当鼠标移入到元素上时，元素中title属性的提示，将会作为提示文字显示。

 

可以根据元素的属性或者属性值来选取元素。

选取含有指定属性的元素，

p[title]{
				background-color: aqua;
			}

为title属性值是hello的元素设置一个背景颜色为黄色

p[title = "hello"]{
				background-color: aqua;
			}

属性名=属性值：选取含有指定属性值得元素

p[title^="a"]{
				background-color: aqua;
			}

以c结尾的元素

p[title$="c"]{
				background-color: aqua;
			}

属性名*=属性值    选取属性值以包含指定内容的标签

p[title*="c"]{
				background-color: aqua;
			}

子元素选择器

第一个子元素

body>p:first-child{
				background-color: aquamarine;
			}

最后一个子元素：

p:last-child{
			background-color: #7FFFD4;
		}

d选中任意位置的子元素（该选择器后边可以指定一个参数，指定要选中第几个元素）

p:nth-child(3){
			color: azure;
		}

偶数even

p:nth-child(even){
			color: azure;
		}

基数odd

p:nth-child(odd){
			color: azure;
		}

first-of-type

last-of-type

nth-of-type

是在当前类型的子元素当中排列

p:first-of-type{
			color: rosybrown;
		}

兄弟元素选择器

后一个兄弟元素选择器：可以选中后一个兄弟元素的第一个元素

+

span+p{
				background-color:red ;
			}

选中后面的所有兄弟元素

span~p{
				background-color:red ;
			}

否定伪类

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

p:not(.hello){
						background-color: red;
			}