Eternity_y
Eternity_y

Web前端之css

#css (层叠样式表）
###行内样式：
<标签 style="多个样式">
display:设置组件是块还是行内或者行内块

block:块
inline:行内元素
inline-block:行内块元素

color:颜色
background-color:背景色
font-size:字体大小
font-family:字体名称
font-style:italic 斜体
font-weight:bold 粗体
text-align:center居中
background-image: url(背景图片路径)
background-repeat: 控制背景图片如何重复 no-repeat(不重复) repeat-x repeat-y repeat(xy方向上都重复)
background-size: 110px 缩放背景图大小
border 边框颜色 线条样式 线条宽度;

border-color: 边框颜色
border-style: 线条样式( solid 实心线)
border-width: 线条宽度
border-top 上边框
border-right 右边框
border-bottom 下边框
border-left 左边框

#####div容器标签：


	

	

	...

###内部样式表

	
		
	


###外部样式表
 将样式信息单独定义在*.css文件中，然后使用如下：

	
		
	


###内间距:
 padding：top上 right右 botton下 left左
 ###外间距：
 margin : top上 right右 botton下 left左
 ###盒子模型
 外间距—》边框—》内间距—》内容
 ###z-index
 position:absolute（绝对定位）; left:x坐标（向右）; top:y坐标(向下)
 ###重用样式：

	
		
	


#选择器{样式}
 1.元素：使用标签
、
匹配
 2.class：根据class属性值匹配
 
  

.值{样式}

 
  
3.id:根据id属性值匹配----id取值唯一
 
  

#值{样式}

 
  
4.父子选择器：父选择器>子选择器
 5.后代选择器：祖先选择器 后代选择器
 6.伪类选择器
 
  
:hover  当鼠标悬浮在标签之上，算匹配 
:nth-child 当作为第n个孩子元素, n从1开始
:last-child 当作为最后一个孩子元素

 
  
###选择器的优先级
 ！important > style > #id > .class > 元素
 注：！important 提升样式优先级
 
  
子标签可以继承父标签样式，也可以覆盖父标签同名样式
 
 

                    
                

        
你可能感兴趣的:(web前端)