2018-07-19 css总结

一、css是什么?作用是什么 层叠样式表(级联样式表) 实现网页外观样式二、css引入方式三种? 内联样式

内部样式表外部样式表  mystytle.css            h1{  color:red;}index.html      三、css语法    选择器{    属性名:属性值;    属性名:属性值;  }h1{    color:red;font-size:16px;}四、选择器    选中html元素的方式方法1.基本选择器  标签选择  ID选择器  Class选择器2.高级选择器      层级选择器          后代选择器  E F    .root p  子代选择器  E>F    .root>p  相邻兄弟选择器 E+F    .p1+p    通用兄弟选择器 E~F    .p1~p      结构伪类选择器            E F:nth-of-type(n)  F:first-of-type  F:last-of-typeE F:nth-child(n)            属性选择器    E[attr]        //属性attrE[attr=val]    //属性attr的值以等于valE[attr=^val]  //属性attr的值以val开头E[attr=$val]  //属性attr的值以val结束   

   

元素1

元素2

元素3

   

元素4

  五、各种常用样式学习    1.字体样式  font-size  字体大小  px    font-weight  字体粗细  bold    http://www.runoob.com/css/css-font.html   

   2.文本样式  color      字体颜色  值: red blue    #FFEFD5        text-align  文本的对齐方式        text-decoration  文本修饰  text-indent 文本缩进   

 3.背景样式  background-color 背景颜色  background-image  背景图片  url("image/1.jpg")      background-repeat      background-position

4.列表样式 

   
• 列表项1
• 列表项2
 

      list-style-type:  none

 5.链接样式链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。链接状态：a:link - 正常，未访问过的链接a:visited - 用户已访问过的链接a:hover - 当用户鼠标放在链接上时a:active - 链接被点击的那一刻6.表格样式    边框    折叠边框    例如:    table ,tr,th, td{            border: 1px solid black;            border-collapse: collapse;        } 鼠标移入表格选中    table tr:hover{            background: blue;            color: white;        }

六、盒子模式   

 1.所有的html元素都可以看作盒子

2.盒子有那些属性Border(边框) - 围绕在内边距和内容外的边框。Margin(外边距) - 清除边框外的区域，外边距是透明的。Padding(内边距) - 清除内容周围的区域，内边距是透明的。Content(内容) - 盒子的内容，显示文本和图像。

3.盒子模子宽高计算方式  默认情况  元素宽度=width+左内边距+右内边距+边框    box-sizing: border-box; 元素宽度=width=内容宽度+左内边距+右内边距+边框七、页页布局    

1.标准文档流2.浮动布局   

 1. 一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。        2. 浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。      

  3. 清除浮动    3.display属性  将块元素->行内元素->行块元素  行内元素->块元素->行块元素 

 

元素1

  //块元素特点: 独占一行，可以设置宽和高;  元素

2  //行内元素特点: 内容有多宽多高，元素就有多宽多高，width,height不起作用

4.定位布局  

 1.精确定位元素到指定位置,而不会影响其它元素 

 2. position: relative|abosolut|fixed                相对定位|绝对定位|固定定位      

  1>相对定位    position:relative;  //相对自身位置移动p{  position:relative;  top:10px  left:10px  }

2>绝对定位