css.day03

css的分类(位置):

   css层叠样式表

   1.内嵌 样式表

   2.行内样式表

   3. 外连

css选择器分类

   基础选择器 

       标签

       id选择器

       类选择器

   复合选择器

      交集选择器(标签指定式)  span.one

      后代选择器                .one  .two

      并集选择器 (集体声明)    .one,.two   

   通配符选择器  *   所有标签    

body, h1{font-size:12px;}

  <body>

     <div></div>

     <span></span>

     <h1></h1>

  </body>

   伪类选择器   

   a:link

   a:visited  

   a:hover   

   a:active  

lv h a 

背景:

背景颜色  

背景图片 background-image:url(xxx.jpg);

背景平铺          -repeat: no-repeat  

背景位置:       -position:

background-position: top  left center 方位名词

background-position:3px 10px;  精确像素 

background-position:10px center;  这个背景图片 离横坐标是10像素的距离

fixed  

边框:

border-color  

border-width

border-style  样式  solid  实线

一个属性里面有多个值 :  复合属性

border:1px solid #f00;  

border-top

 

1.盒子模型(box

盒子模型是我们css+div 的入门门槛 .

盒子模型的重要参数:  

  border  盒子边框

  内部距离 内边距 内补白   padding

  外边距                   margin 

  方位                    top  left  right  bottom

2.margin 复合属性 (参数个数的写法)

这种写法同样适合于 padding

这样要求: 

盒子距离上边距是 100px  下 是 200px  左边是0px  右边是20px

 margin-top:100px;
 margin-bottom:200px;
 margin-left:0;
 margin-right:20px;

简写: margin:100px 20px 200px 0;

margin:100px;  (一个参数)  

表示 上下左右都是100像素。 

margin: 100px  30px; (两个参数)

表示  上下是100  左右是30 

margin: 100px 30px 10px; (三个参数)

表示  上是100  左右是30  下是10

margin: 10px 20px 30px 40px;(四个参数)

表示 上是10  右是20  下是30  左是40  (顺时针)

3.关于padding的问题(盒子的实际大小)

padding会影响盒子大小.

盒子实际大小:  盒子本身大小+border+padding 

例如: 一个盒子宽度 100  边框 是 10  内边距是20  问这个盒子实际大小是:

盒子=100+10*2+20*2    160 像素

152   

100  +40  +12 

100  =  padding +border 

88   +     5       +    1  =100

最终的大小240 =  盒子本身宽 +border + padding

 240= 220  + 2+    12+6 

特别注意:

不是所有的padding都会影响盒子的大小。

如果这个盒子没有高和宽就不会影响盒子大小。

4.几个小点

  4.1firebug  的使用    ctrl+shfit+c   测试元素   f12 调出

  4.2稳定性:

  盒子本身的宽和高是最稳定的 (高度剩余法)

  其次是padding 值  

  最后margin值。

  所以,我们本着的原则是:能用padding的地方就不要用margin

  其实,padding 也可以看做是盒子本身的宽度和高度。

  4.3清除浏览器内外边距

  这个是我们写网站css 的第一句话。(必须写)

html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; } 

  4.4让盒子居中对齐

  margin:0 auto;

  注意: 让盒子内部的文字或者图片居中对齐: text-align:center;

  但是让盒子居中对齐: margin0  auto;

  margin:auto 也行,最常用的还是margin0  auto;

  注意:这个盒子应该是块级元素。而且必须有宽。

  4.5代码的书写顺序

    1. 先集体声明清除浏览器样式

    2. 声明body 字体大小  颜色   字体

    3. 声明a 链接样式。

resize:none  不让火狐拖动文本域

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>评论页面</title>
<style type="text/css">
body,div,ul,li,h1,h3,h4,h2,textarea,input,p{margin:0; padding:0;}
body{font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#3c3c3c;}
a{color:#000; text-decoration:none;}
a:hover{color:#F00; text-decoration:underline;}
.box{ width:725px; height:220px; border:1px solid #abc; margin:0 auto; margin-top:100px; padding-left:25px; padding-top:30px;}
.box h3 a{font-weight:normal; color:#F00; text-decoration:underline; margin-left:10px;}
textarea{ width:670px; height:80px; border:1px solid #abc; margin:15px 0; padding:10px; font-size:12px; color:#CCC; resize:none;}
p{margin-top:15px; color:red;}
</style>
</head>
<body>
<div class="box">
        <h3>评论     <img src="images/110.jpg" /><a href="#">俺要打分</a></h3>
        <textarea>请输入您对的意见或者建议!!</textarea>
        <input type="image" src="images/tj.jpg" />
       <p>暂时没有评论</p>
</div>
</body>
</html>

 

5.<label></label> 标签

  for   id  来使用

<style type="text/css">
*{margin:0; padding:0;}
.box{width:300px; margin:100px auto;}
.search{width:175px; height:20px; border:1px solid #ccc; color:#CCC; background:url(search_03.png) no-repeat 5px center; padding-left:25px;}
label{color:#3c3c3c; font-size:14px;}
</style>
</head>
<body>
<div class="box">
<label for="sear">搜索一下:</label><input type="text" value="请输入搜索内容..." class="search" id="sear" /></div>
</body>
</html>

  

1.  Background:red;  除了颜色之外没有其他样式

Background-color:red;  只针对于颜色

           -image    repeat

Background-position : x   y ;  

a:link    a:visited   a:hover   a:active 

边框   上下左右  top  right  left  bottom  

内边距   padding  

外边距   margin  

盒子大小:

   1. 盒子实体大小: 盒子本身宽和高+padding+border

   2. 盒子的最终大小: 盒子本身的宽和高+padding+border+margin

Margin10px  20px  30px  40px  

 *{margin:0; padding:0;}

设计网页代码写法:

   (1) 清除浏览器样式   *{margin:0; padding:0;}

   (2) 页面的整体声明:  body { font-size:12px; c} ul ol  

   (3)  链接    a{color:blue;} a:hover{color:red;}

 

1.如果让斜体(em i)   变成正常字体:  font-style:normal;

如果让加粗的字体  变成正常字体 :  font-weight:normal;

  em{font-style:normal;}

 

盒子模型    边框

Textarea  Resize  设置是否可以拖动  火狐默认是可以拖动的    resize:none; 不允许拖动

firefox   火狐浏览器

Firebug   火狐浏览器插件  

Fireworks  图像处理软件(ps)  

Fw    dw    ps    flash   网页四剑客    

Ps  装饰装潢    平面    网页  

Fw  创造出来就是为了网页

 

外边距塌陷的规则

 

刚开始 人们觉得margin 塌陷是个bug   后来才发现,所有的浏览器都这样。

所以就不算bug 

2. 外边距 只会在垂直之间产生塌陷;水平之间不受影响;

3.垂直之间塌陷的原则是以两方最大的外边距为准;50   100   

4.只有两个盒子的垂直外边距完全接触才会触发。 

 

一般情况下,垂直两个盒子出现这种情况下,比较少(并列)

出现情况比较多的是,嵌套关系的盒子。急需要我们去解决。

 

解决方法:

  1. 给大盒子指定一个边框。可以解决 ,如果不希望看到边框,可以改成白色。

  2. 溢出  overflow:hidden   大盒子加

 

overflow   溢出

visible| auto| hidden| scroll

 

Auto   内容如果超出,则显示滚动条  否则  不显示滚动条

Scroll    不管超不超出,则都显示滚动条。

hidden  超出的部分,不显示。

 

white-space

white-spacenowrap  强制一行内显示直到文本结束或者碰到<br/>

 

cursor  鼠标

 .ani        .cur   

cursor:url(mao.ani);  设置鼠标样式    

Cursor:pointer; 所有的浏览器都能识别

 

word-break:break-all;

适合长英文句自动换行。

 

浮动

3.1.标准流

标准流实际上就是一个网页内标签元素正常排列的顺序的意思;比如块级元素会独占一行,行内元素会按顺序依次前后排列;按照这种大前提的布局排列之下绝对不会出现列外的情况叫做标准流布局;

3.2. 浮动  

Float left  right  

浮动是我们学习的第一种脱离标准流的方式;也就是说它不受文档流的限制,按照另外的一种方式去布局;

记住!学习浮动,浮动有一个主要的作用是可以让多个盒子水平排列,并且他是一种严格的对齐方式!

浮动找浮动, 不浮动找不浮动

 

一列固定宽度且居中

两列固定宽度且居中

 

 

 

 

 

 

转载请备注。 

 

posted @ 2015-09-23 22:21  sunnyJun  阅读(187)  评论(0编辑  收藏  举报