div+css基础一

外部样式的引用：

<link  rel="stylesheet" type="text/css" href="css/content.css" />

                rel:关系                     type资源类型         href资源地址

标签类名的指定：

<div class="content">

      class类名可以重复定义，在css样式中常用class指定标签，在js常用id指定标签的唯一

页面的重置样式：

       边距
字体大小
背景颜色
字体风格样式

/*margin、padding*/
html,body,div,h2,ul,li,a,h3{margin:0px;padding:0px;}
body{font-size:14px;color:#666;font-family:"微软雅黑";}
ul li{list-style:none;}
img{display:block;border:0px;}
a{color:#ddd;text-decoration:none;font-size:14px;font-family:"黑体";}

标签特点：

  1、h1/h2/h3 和 ul标签都是块级标签，会单独占一行的距离

  2、h标签有font-weight属性描述字体大小

  3、元素高度由边框+填充+内容高度

  4、为了避免当前div因为之前元素所用浮动影响，可以在当前div外层嵌套一个清除浮动的div，假设清除浮动div的类名是clearfix

/*单独通过盒子-样式伪类清除浮动*/
div.clearfix:after{
content:"";
width:0;
height:0;
font-size:0;
line-height:0;
clear:both;/*both 不允许左边和右边出现浮动区域*/
visibility:hidden;/*隐藏*/
display:block;
}

 5、a标签里面嵌套img标签可以让图片点击跳转

 6、css3动画和盒子阴影

    盒子阴影：
box-shadow:0px    0px     0px     颜色（十六进制、英文名、三原色）;
  x轴    y轴    模糊度
Css3-动画：
transform:translate(x,y); translate：元素偏移 xy位置

 

.c_center ul li:hover{
box-shadow:0px 0px 23px rgba(0,0,0,0.3);
transform:translate(0,1px);
}

 7、对超出布局宽高部分的处理: 在css样式文件添加overflow:hidden

 8、li标签里面可嵌套多个div标签

 9、标签(比如div，h)文字水平居中可以使用text-align：center实现

10、span标签因为是一个行内标签，需要加一个display:block变成块级标签才能使用float在页面上浮动,color就是字体颜色

11、超出宽度的文本使用省略号，必备三个条件——>1、文本不能换行 white-sapce:nowrap

                                                                                               2、溢出隐藏  overflow:hidden

                                                                                               3、text-overflow:ellipsis

12、width:100% height:100%宽高自适应父元素

13、替代float元素的方法可以使用dispaly:inline-block可以将一个div里面的平级的内容比如a,span显示在同一行，再使用vertical-align:top将span和a标签垂直对齐

14、display:none可以将元素内容隐藏

 15、a标签想要有鼠标移动上去字体颜色改变而且过渡的效果，可以在css文件里面添加a标签transition:all 0.3s;