前端学习笔记(二)

css之外链式写法

<link rel = "stylesheet" href = "1.css">

块元素转换为行内元素

display : inline ;

行内元素转块元素

display : block;

块和行内元素转行内块元素

display : inline block;

优先级

默认样式 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
0             1        10        100       1000        1000以上

链接伪类

a : link { 属性 : 值 }

a : link {属性 : 值}   链接默认状态
a : visited {属性 : 值} 链接访问之后的状态
a : hover {属性 : 值}  鼠标放到链接上显示的状态
a : active {属性 : 值} 链接激活的状态
  : focus {属性 : 值} 获取焦点

//链接文本修饰  下划线
//line-through 中间线  none 没有下划线
text-decoration : none | underline |line-through

背景属性

background-repeat : repeat(默认平铺)
background-repeat : no-repeat(不平铺)
background-repeat : repeat-x(水平方向平铺)
background-repeat : repeat-y(竖直方向平铺)

//*-------------------------------
方位值只写一个的时候,另外一个值默认是居中的
background-position : left | right | center | top | bottom

//*-------------------------------
background-attachment : scroll   背景滚动  fixed 不滚动

//背景属性连写 (连写没有顺序要求,但是url是必写的)
background : red url("1.png") no-repeat bottom scroll 

列表背景

// li 清楚列表项符号
list - style : none
// li加背景图片
background : url("li.gif") no-repeat left center

盒子模型之边框

border-top-color : red    //边框颜色
border-top-width : 5px
border-bottom-style : solid   //实线
border-bottom-style : dotted  //点线
border-bottom-style : dashed  //虚线

//边框属性连写 (没有顺序要求,但是线型为必写项)
border-top : red solid 5px

input 取消边框

//去掉边框线
border : 0 none
//去掉轮廓线
outline - style : none 
//获取光标焦点
label for id