web基础——CSS层叠样式表

CSS的作用：

实现了样式和html的代码分离
弥补html对属性的控制不足
精确的控制页面的布局
可以提高页面的执行效率
css有特殊的功能

特性：继承性，层叠性

基本语法

选择器

1.类选择器
2.id选择器
3.标记选择器
4.包含选择器
5.伪类

1.类选择器

标签后面加上class，双引号里面的内容就是类选择器值
.p1{ color:red }——点后面的括号{}里面可以定义具体的样式

 
  
  
 
 
    
查看文字内容
	 
查看文字内容
	  
查看文字内容
	   
查看文字内容
	    
查看文字内容
 

2.id选择器

标签后面加上id并赋值，在内联样式style里面或者css文件里面可以给对应的标签添加样式

 
  
  
 
 
    
查看文字内容
	 
查看文字内容
	  
查看文字内容
	   
查看文字内容
	    
查看文字内容
 

3.标签选择器

在css样式里面直接标签名

 
  
  
 
 
    
查看css的效果
	
查看css的效果
	
查看css的效果
 

4.包含选择器

 
  
  
 
 
    

	
zhangsan
	
23
	

     
lisi
	 
 
	
 

5.伪类

1.未连接     a:link
 2.已经访问链接  a:visited
 3.进入链接  a:hover
 4.激活（按下）状态  a:active
其中的hover 和active 可以用于其他控价

 
  
  
 
 
    我的链接
 

选择器的优先级

在页面中同一个html元素有不同的选择器定义样式的。
1、id选择器最高
2、类选择器
3、标记选择器

!important>内联样式>id选则器>class选则器>标签选择器

优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

子选择器

div >p{
意思是 div 里面所有的子标签p 都被会选中 注意对孙子标签是不起作用的
}

相邻选择器 div +p

div +p{

意思是选择跟我 div 同级的下一个挨着的p元素(单个的p 后面在跟p是选不中的) 如果在div 和p
之间隔着一个元素 那是选不中的
}

相邻所有选择器 div ~p

div ~p{
意思是 选中 div 后面所有同级的p元素 即使多个p 元素 之间有隔着的其他元素 也是能选中p元素
}

属性选择器 input[type=“password”]

a[title] {
意思是选中 a标签 里面只要有 title 这个属性的 都会选中
}
a[title=num1] 意思是选中 属性title=num1 的a 标签
a[title^=num] 选中title的属性值以num 开头的a标签
a[title$=num]选中title的属性值以num 结尾的a标签a[title|=num] 选中title的属性值以num-连接的a标签 如
a[title~=num] 选中title的多个属性值以 空格隔开的 有其中一个属性值都能选中 例如 三个属性值你任意选一个都能选中
比如a[title~=num2] 和 a[title~=num3] 选中的其实是同一个标签]

a[title*=num] 选中title属性值 包含num的都能选中 例如
a[title=num][name=lisi] 多个属性选择 意思 是选中 title=num 并且 name=lisi 的这个a标签  

过滤选择器

:last-child    p:last-child 选择属于其父元素最后一个子元素 
 元素。
:not(selector)    li:not(#my) 选择id不是my的所有li元素。
::selection  当鼠标左键选中文本时  这里注意是两个冒号 前面不加任何标签
:root 选择文档的根元素。  跟* 这个选择器很相似
:empty      p:empty 选择没有子元素的每个 
 元素（包括文本节点）。
例如
 这里面没有任何子标签和文本 就会被选中