首页 > > 网页制作 > css >

Web前端基础——CSS

2018-06-24 01:40:14来源：未知阅读 ()

一、CSS概述

css ( cascading style sheets ) 层叠样式表,可以轻松设置网页元素的显示、位置和格式外,甚至还能产生滤镜,图像淡化,网页淡入淡出的渐变效果,简而言之,css就是要对网页的显示效果实现与word 一样的排版控制。

DIV+CSS 标准的叫法 xhtml+css //XHTML 指扩展超文本标签语言（EXtensible HyperText Markup Language）。

CSS的好处

1.提高网页的浏览速度,至少50% 的文件尺寸；

2.缩短改版时间将表现与内容分离,只要改几个css就能修改成千上万个网页；

3.将底网站流量,减少带宽占用；

4.更容易被搜索引擎搜到；

5.内容能被更广泛的设备访问；

web 标准

web 标准主要有几部分组成

1.结构（结构标准主要对应的语言是 xhtml）

2.表现（表现标准对应的主要语言是 css）

3.行为（行为标准主要对应的语言是 javascript）

二、CSS的几种设置方式

1.内联样式表 (inline styles)

如果使用内联样式表,建议加上

<meta http-equiv="Content-Style-Type" content="text/css">

//直接把样式写在了元素上

例子：

<div style="color:blue; width:300px;height:90px"  >这是div中的内容</div>

2.嵌入样式表

<style type="text/css">
  div{
        background-color:red;
        color:blue;
        width:300px;
        height:90px;   
       }
                                
    p{ 
        font-size:20pt;color:red;font-family:宋体;
        text-decoration:underline;
      }    
</style>

3.外部样式表

把样式写在一个单独的文件中,然后引入

-- style.css 文件 --

h1 {color: green;}
p {margin-left: 200px;}  /*注意,20 和 px之间千万别有空格 */
body{
background-image: url("image/lengtu.jpg")
}

-- 在页面中引入 --

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

-- 输入样式表 //自己试一下

可以使用@import声明将一个外部样式文件,输入到另一个css文件中,被输入的css文件就成了输入到的文件的一部分，也可以用@import将一个css文件输入到网页文件的<style></style>标签对中，则输入的文件中的样式规则语句就成了<style></style>标签对中的语句

<style type=text/css>
   @import url(http://xxx.com/style1.css);
   @import url(stylesheets/style2.css);
    p{background:green;color:red}
</style>

css 样式的特点

继承 : 网页中的子元素,将继承父元素的样式

层叠: 子元素中的样式会覆盖父元素中的同名样式, 后面的会覆盖前面的

三、样式规则的选择器

1) * 号选择器

* 可以选择全部

// * {margin 0, padding:0 } //所有的边距都为 0，在特定的时候很有用

// table * {margin 0, padding:0 } margin 指的是外边距

/* margin 的说明:*/

margin: 0px 0px 0px 0px 它的顺序是上, 右下左

margin: 0px 0px 顺序是上下和左右

margin: 0px 10px 10px ,三个参数,第一个用于上,第二个用于左右,第三个用于下

body {....} 这个选择器,如里面有 h1 什么的,它还控制不了这些东西的字体.但 * 可以

*{ color:blue }

2) html 标签选择器

div{color:red}

h1{...}

table{...}

3) id 选择器

 #userName {

color:pink;

font-size:30px;
}

4) class 选择器

将一组css样式写在一起,起个名字(就是class名称),然后在元素上引用

.cry{
     background-color:silver;
     border-style:double;
     font-size:40px;
     border-color:blue;
     }
<p class="cry">   //注意,引入的时候,名称前面不要加 .
这是断落中的内容
</p>
<div class="cry">
 这是div中的内容
</div>

例子: css 的一种常见写法

 p.stop{
          color:red;
          }
                                
          p.warning{
          color:yellow;
                        }
                                
          p.normal{
          color:green;
                       }
                                
                                
          div.glad{
          background-color:red;
                     }
                                
           <p class="stop">aaa</p>
           <p class="warning">bbb</p>
           <p class =normal>ccc</p>
                  
           <div class="glad">这是div</div>

例子,同一个元素,有多个class

.blueone{
   color:blue;
   font-size:5px
   }
                            
   .bigone{
   font-size:90px;  --如果有冲突,以这个(后面写的)为准
   }
   <p class="bigone blueone"> //注意,中间用空格分开,如果两个类中有冲突的地方,以css文件中,后面写的那个为准
   这个断落有多个class
</p>

经验:css命名 ,尽量按功能命名,不要按具体内容命名选择器的优先级 id > class > html

5) 属性选择器

只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择

例子

[title]  //所有带title 属性的都被选中
{
 color:green;
}
<a href="x" title="这是title" >test</a>  //只有它被选中
<a href="x" >test</a>

例子

a[href] {color:red;}  //只有带 href的a 标签被选中

例子

[title=W3School]   //可以有多种写法 title~=hello
{
  border:5px solid blue;
}

例子,控制表单中的按钮和text文本框

input[type="text"] {
       width: 150px;
        display: block;
        margin-bottom: 10px;
        background-color: yellow;
        font-family: Verdana, Arial;
         }
                            
        input[type="button"] {
        width: 120px;
        margin-left: 35px;
        display: block;
        font-family: Verdana, Arial;
        }

        <form>
        <input type="text" name="Name" value="Bill" size="20" />
        <input    type="text" name="Name" value="Gates" size="20" />
        <input    type="button" value="提交" />
        </form>

在上面的基础上扩充

=== 关联选择器

1) 后迭代选择器

p em{
        color:red;
        }
        ul li  a{  /*不管后面的内容在第几级,都会被选中 */
        font-size:50px;
        }
                          
<p>
      刚才幸运抽大奖中奖者是 <em> 贵</em>
</p>
      <em> 贵</em>  //这个em不会被选中
      <ul>
      <li><a href="" >这是a标签</a></li>
      <li><a href="" >这是a标签</a>    </li>
      </ul>

2) 子元素选择器

不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素

h1 > strong {color:red;} //选择直属于父级的

<h1> 这是<strong>very</strong> <strong>very</strong> 重要内容</h1> //这两个strong中的内容变红

<h1>这是<em>really <strong>very</strong></em> 重要内容</h1> //由于这里的两个 strong 属于emp内的,所以不变红

附:本例在 ie 6 下无效,ie8有效

3) 选择相邻兄弟

例子

h1 + p {margin-top:50px; color:red}
    
   <h1>我是h1</h1>
   <p>我是h1的兄弟</p>  //这一行将被选中
   <p>我是打酱油的</p>
   <p>我是打酱油的</p>
   <p>我是打酱油的</p>

例子

li + li {font-weight:bold;}
<ul>
<li>List item 1</li>
<li>List item 2</li>  //被选中
<li>List item 3</li>  //被选中
</ul>
 <ol>
<li>List item 1</li>  //它不会被选中,因为它不是上面li 的相邻兄弟
<li>List item 2</li>  //被选中
<li>List item 3</li>  //被选中
</ol>

组合选择器 (最大特点,逗号分开)

可以在一条规则样式语句中组合若干个选择器,每个选择器之间用逗号分开，例如 H1,H2,H3,H4,H5,H6,TD{color:red} //将所有的标题,和td 内容的颜色都定义为红色。

p,div,.waring{属性名:属性值}

h1,h2,h3, #divContent strong {color:red}

h1.waring ,#content h1{...}

如果有多个类 /id 选择器,它们有相同的部分,可以把相同的css放在一起
例子：

.redone{
           border-color: red;
           border-style: solid;
}
                            
.blueone{
           border-color: blue;
           border-style: solid;
}
                            
.redone,.blueone,#p1{
            font-size: 50px; //所以有字体都变成大的
}
                                  
<div class="redone">bigone</div>
             <div class="blueone">bigone</div>
             <p id="p1">p1</p>

伪元素选择器

对同一个HTML 元素的各种状态和其所包括的部分内容的一种定义方式。

例如: 对超链接的正常状态,访问过的,选中状态,当标滑过的状态 ,对段落的首字母和首行,都可以使用伪元素选择器

格式

HTML 元素伪元素 {属性:值}

常用的伪元素

a:active 选中超链接时的状态

a:hover 光标移到超链接上的状态

a:link 正常状态

a:visited 访问过的超链接的状态

P:first-line 段落中的第一行文本

P:first-letter 段落中的第一个字母

//块级元素的都有效

//一个普通html元素,只要设置了with height 则就成为块级元素

//最容易让人想到的是div

a:link {color: #FF0000} /* 未访问的链接 */

a:visited {color: #00FF00} /* 已访问的链接 */

a:hover {color: #FF00FF text-decoration: underline;} /* 鼠标移动到链接上 */

a:active {color: #0000FF text-decoration: underline;} /* 选定的链接 */

L-V-H-A 这个顺序一定要保证

例子创建链接框

a:link,a:visited {
                      font-weight: bold;
                      font-size: 14px;
                      font-family: Verdana, Arial, Helvetica, sans-serif;
                      color: #FFFFFF;
                      background-color: #98bf21;
                      width: 120px;
                      text-align: center;
                      padding: 4px;
                      text-decoration: none;
                      }
                                        
a:hover,a:active {
                     background-color: #7A991A;
                     }
<a href="/index.html" target="_blank">W3School</a>

例子:

给文本框得到焦点的时候,设置背景 (这个例子对IE6,IE7无效,火狐好使)，如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 :focus 伪类。

<label>姓名<input type=text /></label>
<label>密码<input type=text /></label>
                                
          input{     
                  width:200px;
                  height:50px;
                  border:solid gold;
                  vertical-align:middle;
                  padding-left:20px;  //里面的文字不要顶格
                  }
                                    
                  nput:focus{  //这是一个伪类
                                  background:pink;
                  }

四、样式规则的注释和有效范围

1.样式规则的注释

/* */ 不能嵌套

2.样式规则的继承

所有嵌套在某个HTML标签中的HTML 标签都会继承外层标签设置的样式规则

比如body 标签的字体颜色,会被里面的继承,但有一些也不继承

3.样式规则的优先级

从上到下,从整体到局部,从外屋到里层

ID 覆盖 class ,class 覆盖 Html元素选择器

内联样式表>嵌入样式表>外部样式表

五、样式属性详解-背景

Css 样式属性非常多大体可以分为以下几类

背景文本字体链接列表表格轮廓

1.background-color 可以设置颜色外,还可以设置 transparent //透明

例子

body {background-color: yellow}
        h1 {background-color: #00ff00}
        h2 {background-color: transparent}  /* 透明 */
        p {background-color: rgb(250,0,255)}
                                
        p.no2 {background-color: gray; padding: 20px;}
                                
        <h1>这是标题 1</h1>
        <h2>这是标题 2</h2>
        <p>这是段落</p>
        <p class="no2">这个段落设置了内边距。</p>

2.backbround-image

body{
        background-image:url(image/lengtu.jpg) /*可以是网络地址*/        
       }
       p.flower {background-image: url(dog.gif); padding: 20px;}
       a.radio {background-image: url(/i/eg_bg_07.gif);  padding: 20px;}

3.background-repeat //设置背景图象是否重复,及重复方式

no-repeat //背景图象只出现一次,不重复

repeat //水平和垂直重复,这是默认值

repeat-x

repeat-y

4.background-attachment:用于确定背景图象是否跟随内容的滚动而滚动

fixed:固定

scroll:图象跟随内容的移动而移动 (默认)

例子

background-image:url(lengtu.jpg);
background-repeat:no-repeat;
background-attachment:fixed
                
<body>
    <p>图像不会随页面的其余部分滚动。</p>
     .... 很多行
    <p>图像不会随页面的其余部分滚动。</p>

5.background-position : 背景图象的水平位置和垂直位置

取值:

center

top

bottom

right

left

也可以用百分比：

background-position:50% 50%;

background-position-x:50px

background-position-y:50px

也可以用象素值 // background-position: 50px 100px; (实测ie6 不支持)

例子

background-image:url(image/lengtu.jpg);
background-repeat:no-repeat;
background-attachment:fixed; //对于火狐,或 Opera 必须要加这个属性,下面的这句才好用
background-position:center

6.background: 是前面几个background 的综合

TABLE{ background:red url(logo.jpg) no-repeat bottom right }

background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;

六、样式属性详解-文本

word-spacing 设置单词之间的间距,设置值可以是前面表示字体大小的那些单位

例子

p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;} //可以是负值
                            
<p class="spread">This is some text. This is some text.</p>
<p class="tight">This is some text. This is some text.</p>

letter-spacing 设置每个字符之间的间距

例 :

letter-spacing:20px   也可以用 em等

vertical-align 指定文本的垂直对齐方式

取值可以是:

sub 下标

super 上标

top 顶端对齐

middle 居中

bottom

相对于行高属性的百分比

--text-align 属性规定元素中的文本的水平对齐方式 ,取值:left center right justify

例子:

h1 {text-align: center}
h2 {text-align: left}
h3 {text-align: right}
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>

例子 justify 两端对应

 .box1 {
         width: 500px;
         line-height: 20px;
         margin: 10px auto;
         background-color: #cdd;
         text-align: justify
         }
                                                
.box2 {
         width: 500px;
         line-height: 20px;
         margin: 10px auto;
         backgrsound-color: #cdd;
         text-align: left;
         }
                                            
<div class="box1">There is clearly a need for CSS to be taken 好多好多行.. 好多行    </div>
<div class="box2"> ... </div>

text-ident 设置文本的第一行的缩进值,如果设置为负值,就是将文本的第一行拉出

// p {text-indent: 1cm} 就是首行缩进, 也可以用 px,可以用 %

//一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素(实测ie可以,火狐不可以)

white-space 设置如何处理文本中的空白元素

normal 正常,将所有的空白压缩,多个空格剩一个

pre 和 pre 标签一样

nowrap 指定文本不换行,只有遇到了br 标签的时候才换 //和 nobr 标签一样

line-height 设置文本所在行的行高,可以是一个精确的值跟一个单位,也可以是一个百分比

text-transform

取值

none

uppercase //全大写

lowercase //全小写

capitalize //首字母大写

例子

p.uppercase {text-transform: uppercase}
p.lowercase {text-transform: lowercase}
p.capitalize {text-transform: capitalize}
                          
<p  class="uppercase"> china   </p>  //CHINA
<p  class="lowercase"> china   </p>  //china
<p  class="capitalize"> china   </p> //China

text-decoration

取值

none

underline

overline

line-through

blink

七、样式属性详解-字体

由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。因此，请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用层叠样式表定义来达到漂亮的显示效果。

font-family :字体名称,可以设置多个,用逗号分隔

// h1 {font-family: Georgia;} 如果字体名称中间有空格则可以用单引号

font-size : 字体大小

相对大小的设置可以为 larger 或smaller

绝对单位 px mm cm in pt pc

相对单位 em , %

例子：

在所有浏览器中，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小

body {font-size:100%;}
         h1 {font-size:3.75em;}
         h2 {font-size:2.5em;}
         p {font-size:0.875em;}

font-style

normal - 文本正常显示

italic - 文本斜体显示 // p{font-style:italic}

oblique - 文本倾斜显示

font-weight :指定粗体字的大小

normal

bold

bolder

font-variant: 控制大写按小写的大小显示

normal

small-caps //本来是大写,结果显示的小

例子

p.normal {font-variant: normal}
p.small {font-variant: small-caps}

<p class="normal">This is a paragraph</p>
<p class="small">This is a paragraph</p>

font (综合上前面的全部)

例如 P{font:italic bold 12pt Times,serif}

相当于同时设置了上面的好几个属性

八、样式属性详解-表格

表格边框

table, th, td {
              border: 1px solid blue;
              }

折叠边框 (可以实现细线表格)

table, th, td { border-collapse:collapse;}

宽度和高度

table{
      width:100%;
      height:50px;
      }

表格文本对刘

text-align 水平对齐方式

vertical-align 垂直对齐方式

td  {
      height:50px;
      vertical-align:bottom;
      }

表格的内边距

td {
     padding:15px;
    }

表格颜色

 table, td, th {
                  border:1px solid green;
                  }
                
th{
                 background-color:green;
                 color:white;
    }

表格格间距如果有 !DOCTYPE，那么 Internet Explorer 8 以及上可支持,实测ie6不支持

table.two {
               border-collapse: separate;
               border-spacing: 10px 50px
               }

空的格子是否显示出来

empty-cells: show; (或hide) 如果已规定 !DOCTYPE，那么 Internet Explorer 8 以上支持

table-layout 属性用来显示表格单元格、行、列的算法规则 automatic,fixed

table.one{
              table-layout: automatic
              }
              table.two{
              table-layout: fixed
              }

             <table class="one" border="1" width="100%">
             <tr>
             <td width="20%">1000000000000000000000000000</td>
             <td width="40%">10000000</td>
             <td width="40%">100</td>
             </tr>
             </table>
                            
             <table class ="two" > ...</table>

综合示例表格

  #table1 {
               font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
               width: 100%;
               border-collapse: collapse;
               }
                            
#table1 td,#table1 th {
               font-size: 1em;
               border: 1px solid green;
               padding: 3px 7px 2px 7px;
               }
                            
#table1 th {
               font-size: 1.1em;
               text-align: left;
               padding-top: 5px;
               padding-bottom: 4px;
               background-color: #A7C942;
               color: white;
               }

#table1 tr.alt td {
             color: #000000;  /*这是黑色*/
             background-color: #EAF2D3;
              }
                            
<table id="table1">
           <tr>
             <th>Company</th>
             <th>Contact</th>
              <th>Country</th>
           </tr>
                                                        
           <tr>
             <td>Apple</td>
             <td>Steven Jobs</td>
             <td>USA</td>
           </tr>
                                                        
           <tr class="alt">
             <td>Baidu</td>
             <td>Li YanHong</td>
             <td>China</td>
           </tr>
                                                        
           <tr>
              <td>Google</td>
              <td>Larry Page</td>
              <td>USA</td>
           </tr>
                                                        
           <tr class="alt">
             <td>Lenovo</td>
             <td>Liu Chuanzhi</td>
             <td>China</td>
           </tr>
                                                        
           <tr>
             <td>Microsoft</td>
             <td>Bill Gates</td>
             <td>USA</td>
           </tr>
                                                        
           <tr class="alt">
            <td>Nokia</td>
            <td>Stephen Elop</td>
            <td>Finland</td>
           </tr>
</table>
                                                    
</talbe>

九、样式属性详解-列表

list-style-type 用于指定目录列表项标记的样式

实心圆 disc

空心圆 circle

方块 square

阿拉伯数字 decimal

lower-roman 小写罗马数字

upper-roman 大写罗马数字

lower-alpha 小写英文字母

upper-alpha 大写英文字母

none 无项目符号

例子

ul li {
       list-style-type:circle
       }

list-style-image 用于设置标记的图象

例子

ul li {
       list-style-image:url(image/dot.bmp)
       }

注意,不要加 list-style-type:circle 之类的了,要不然不好使

list-style-position 用于设置列表标记显示在文本内,还是文本外 //设置值 inside outside

outside的

//效果
*aaa
 aaa
*aaa

inside 的

//效果
aaa
*aaa
aaa

list-style 综合前面全部的 //li {list-style : url(lengtu.jpg) inside}

综合实例

                     <ul>
                                <li><a href="#home">Home</a></li>
                                <li><a href="#news">News</a></li>
                                <li><a href="#contact">Contact</a></li>
                                <li><a href="#about">About</a></li>
                    </ul>
                    
               ul {
                            list-style-type: none;
                            margin: 0;
                            padding: 0;
                            overflow: hidden;
                        }
                        
                        li {
                            float: left;
                        }
                        
                        a:link,a:visited {
                            display: block;
                            width: 120px;
                            font-weight: bold;
                            color: #FFFFFF;
                            background-color: #bebebe;
                            text-align: center;
                            padding: 4px;
                            text-decoration: none;
                            text-transform: uppercase;
                        }
                        
                        a:hover,a:active {
                            background-color: #cc0000;
                        }
            
                -- line-height 行高
                   line-height:150%  = line-height:1.5em
    
                            p{line-height:1.5em}  或  line-height:150%

                         <p>
                                 喜欢Java<br />
                                 喜欢编程<br />
                                 喜欢大自然<br />
                                 喜欢宅在家里<br />
                         </p>

十、样式属性详解-定位

CSS 有三种基本定位机制普通流,浮动,绝对定位

定位属性一共9个

--position

--top

--right

--bottom

--left

--overflow

--clip //把图片切下来一部分

img{
     position:absolute;
     clip:rect(0px,50px,200px,0px)
     }

--z-index //设置元素的层叠顺序,值越大,越往上

--vertical-align

- baseline 默认

- sub

- super

- top //把元素的顶端与行中最高元素的顶端对齐

- text-top //把元素的顶端与父元素字体的顶端对齐

- middle

- bottom

- text-bottom

- length

- %

例子本例火狐中有效

 img.top {vertical-align:top}  
                                img.bottom {vertical-align:bottom}
                                img.middle {vertical-align:middle}
                                <p>
                                这是一幅<img class="top"  src="lengtu.jpg" />位于段落中的图像。
                                </p>
                                
                                <p>
                                这是一幅<img class="bottom"   src="lengtu.jpg" />位于段落中的图像。
                                </p>
                                
                                <p>
                                这是一幅<img class="middle"  src="lengtu.jpg" />位于段落中的图像。
                                </p>

例子 z-index

  img.x
       {
        position:absolute;
        left:0px;
        top:0px;
        z-index:-1;  /*默认是0,-1表示拥有更低的优先级*/
                            
       }
                                    
 #select1{
       z-index:-100;  //可以发现,对于下拉框,不管怎么设置z-index,它都是压不住的
       }
                                    
 <h1>这是一个标题,,它将压在图片上</h1>  
 <img class="x" src="image\lengtu.jpg" />
 <select id="select1">
 <option>aaa</option>
 <option>aaa</option>
</select>

十一、position 属性详解

absolute: 绝对定位,元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。

元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

relative: 相对定位,所设置的定位值是相对于元素通常在的位置的一个偏移量 ,元素仍保持其未定位前的形状，它原本所占的空间仍保留。

static: 元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

fixed: 元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

例子相对定位

h2.pos_left {
                 position: relative;
                 left: -20px
                }
                                    
h2.pos_right {
                position: relative;
                left: 20px
                 }
                                    
<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>

例子绝对定位

 h2.pos_abs {
                  position: absolute;
                  left: 100px;
                  top: 150px
                  }

例二

 <div style="position: absolute ; width:50px;height:50px; background:pink; left:150px;top:180px ">    </div>

例子 fixed 定位 ie6,7,8 不支持

 .div1{
                                                
        width:2000px;
        height:2000px;
        }
                                                        
.div2{
       background-color:#33FF66;
       width:100px;
       height:100px;
       position:fixed;
       left:50px;
       top:50px;
       }    
                                        
.ie{   //这是为了兼容ie写的
     _position: absolute;  
     _clear: both;   
     _top:expression(eval(document.compatMode &&document.compatMode=='CSS1Compat')?documentElement.scrollTop+(documentElement.clientHeight-this.clientHeight) - 1 : document.body.scrollTop +(document.body.clientHeight-this.clientHeight) - 1);
   }
                               
<div class="div1">层1</div>
<div class="div2 ie">层2</div>

例子 overflow

--scroll 如果设置这个属性,即便内容很少,框内能装下,也会出现滚动条

--visible 如果设置了这个属性,将会把多余的内容也显示出来(可能会撑大div),但不会出现滚动条

--auto 根据情况,如果需要出现就会出现

--hidden 超出了也不出现

div {
     background-color: pink;
     width: 150px;
     height: 150px;
     overflow: scroll //如果设置这个属性,即便内容很少,框内能装下,也会出现滚动条
     }
                                                    
                                                        
      <div>这个属性定义溢出元素内容区的内容会如何处理。如果值为scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。
      </div>

十二、样式属性详解-浮动(属于定位)

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。

例一

img {
      float:right  //在下面的段落中，我们添加了一个样式为 <b>float:right</b> 的图像。结果是这个图像会浮动到段落的右侧,有点象环绕的效果
      }

<p>
       This is some text. This is some text. This is some text.
       This is some text. This is some text. This is some text.
                            ...
 <img src="lengtu.jpg" />
</p>

例二

 <div style="width:500px;height:500px;background:silver;">
<div style="width:50;height:50;background:green;float:left">1</div> //如果象float,则在火狐中,最终看到的是1(上)3(下) 2被压住了看不到,但在ie中不同
<div style="width:50;height:50;background:yellow">2</div>
<div style="width:50;height:50;background:pink">3</div>
</div>

例三,带清除浮动的

 #div1{
         width:200px;
         height:80px;
         background:red;
         }
                        
#div2{
         width:500px;
         height:60px;
         background:springgreen;
         float:left;
         opacity:0.4;
         filter:alpha(opacity=40);
         }
                            
#div3{
        width:100px;
        height:100px;
        background:yellow;
        clear:left;   /*清除浮动 其他选项 right, both*/
        }
                            
#div4{
        width:300px;
        height:70px;
        background:lightskyblue;
        }        
<div id=div1>    div1 </div>
<div id=div2>    div2 </div>
<div id=div3>    div3 </div>
<div id=div4>    div4 </div>

十三、样式属性详解-其他

1) 光标

--cursor

pointer 手型,crosshair 十字型, text I型, wait 等待,default,help,e=resize 东箭头,ne-resize 东北箭头

n=resize 北箭头,nw-resize 西北箭头,w-resize 西箭头, sw-resize 西南箭头,s-resize 南箭头 se-rize 东南箭头 auto 自动

2) 半透明

img{
     opacity:0.4;
     filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */
     }

//注意,它也可以用在 div 的背景色上

3) 块元素和行内元素

行内元素 (inline element) 又叫内联元素。内联元素只能容纳纯文本或其他内联元素,常见的内联元素元<span > <a> //注意和浏览器有关,到ie8以后,它也什么都能放。

块元素(bolck element)

块元素一般都从新行开,可以容纳文本,其他内联元素和其他块元素,即使内容不能占满一行块元素也要把行占满,常见的块元素<div> <p> <li>

.menu{
                            
         }
<div class="menu">div</div> //占满一行
<ul class="menu">
<li>sss</li>  //占满一行
<li>sss</li>
</ul>

说明,对于

<div class="menu">div2</div> 如果指定了 width:100px,虽然div变小了,但它依然是独占一行,后面就算写个span,它依然要占一行，有一些css属性,对行内元素不生效比如 margin,left ,right, width,height, 和浏览器版本有关,请尽可能使用块元素定位

* 块元素和行内元素可以互相转换

display:inline 转为行内元素(比如div)

display:block 转为块元素,比如 a

比如上面的.menu 中加入 display: inline; 则它们不占满一行了

附: display 的取值还有很多, 比如 none

十四、框模型 (Box Model)

1)盒子模型

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式。

w3c 建议把网页上的所有内容都放到一个盒子里，设计师可以通过创建定义来控制这个盒子的属性,这些对象包扩段落,列表,标题,图片,及层盒子模型主要定义四个区域。

1.盒子中的内容 :content

2.盒子的边框 :border

3.盒子与内容之间的添充 : padding (内补丁)

4.如果有多个盒子,盒子与盒子之间的距离 :margin (外补丁)

整个盒子模型在面页中占用的宽度是由

左边界+左边框+左填充+内容+右填充+右边框+右边界组成

2)内边距

padding 属性接受长度值或百分比值，但不允许使用负值。

h1 {padding: 10px;}
h1 {padding: 10px 0.25em 2ex 20%;}
=========等价于============
h1 {
     padding-top: 10px;
     padding-right: 0.25em;
     padding-bottom: 2ex;
     padding-left: 20%;
     }

3)外边距

p.margin {margin: 2cm 4cm 3cm 4cm}

<p>这个段落没有指定外边距。</p>

<p class="margin">这是一段文本...</p>

<p>这个段落没有指定外边距。</p>

4)边框

每个边框有 3 个方面：宽度、样式，以及颜色

---border-width(border-top-width,border-right-with,border-bottom-width,border-left-with)

// 用于设置元素边框的宽度,设置值可以是 thin medium thick 或数值

---border-color(border-top-color ... )

---border-style(border-top-style ...) // none,dotted,dashed(虚线),solid,double,groove(凹槽线),ridge(凸槽线),inset(凹边),outset(凸边)

// border-style 的默认值是 none，如果没有声明样式，就相当于 border-style: none。因此，

// 如果您希望边框出现，就必须声明一个边框样式。

---border(border-top,border-right,border-bottom,border-left) //综合了前面的几个

//例子: 给超链接加一个激活时的边框

A:active {border:thick double red}

布局例子：

 <!DOCTYPE HTML>
        <html>
                <head>
                        <style type="text/css">
                                #container{
                                    width:800px;
                                    margin:0 auto;  /*这个设置水平居中*/
                                    background:lightskyblue;
                                }
                                
                                #header{
                                        height:80px;
                                        background:springgreen;            
                                        padding-top:20px;                
                                }
                                
                                #logo{
                                    width:60px;
                                    height:60px;
                                    background:gold;
                                    margin-left:50px;    
                                }
                                
                                #content{
                                    /*    height:500px; */  //尽量不要在这里设置行高
                                      overflow:auto;
                                        margin-top:10px;
                                        background:#DDEE22
                                }
                                
                                #content-left {
                                    height:400px;
                                    width:20%;
                                    background:silver;
                                    margin:20px;
                                    float:left;
                                    
                                }
                                
                                #content-right {
                                    height:400px;
                                  width:72%;
                                    float:left;
                                    margin:20px;
                                    margin-left:0px;
                                    background:orange;
                                }
                                
                                #footer{
                                        height:90px;
                                        background:#3A6EA5;
                                        text-align:center;
                                        vertical-align:center; /*没起作用*/
                                        font-size:12px;
                                        color:white;
                                        
                                        line-height:90px; /*把lin-height 调整成和行高一样,可以居中*/
                                }
                                
                                .clear{
                                    clear:both;
                                 }
                        </style>
                
                </head>
                
                <body>
                        <div  id="container">
                            <div id="header">
                                    <div id="logo" >这是logo</div>
                            </div>
                            
                            <div id="content">
                                    <div id="content-left">这是左边</div>
                                    <div id="content-right">这是右边</div>
                            </div>
                            
                            <div class ="clear"><div>
                            <div id="footer"> 这是一些版权信息 </div>    
                      </div>    
                </body>
                
        </html>

十五、盒子模型经典案例

//例一

<!DOCTYPE HTML>
        <html>
                <head>
                        <style type="text/css">
                                body{
                                    border:1px solid red;
                                    height:1000px;
                                    width:700px;
                                    margin:0 auto;
                                }
                                
                                div{
                                        border:1px solid #2929FF;
                                        margin-top:20px;
                                        margin-left:50px;
                                        width:350px;
                                        height:270px;
                                        /*
                                        padding-top:30px;
                                        padding-left:20px  也可以,但会撑大 */
                                }
                                
                                div img{
                                    margin-top:30px;
                                    margin-left:20px;
                                }
                        </style>
                </head>
                
                <body>
                        <div>
                            <img src="head.gif">
                        </div>
                </body>
        </html>

例二

        <!DOCTYPE HTML>
            <html>
                    <head>
                            <style type="text/css">
                                div{
                                    border:1px solid red;
                                    width:700px;
                                    height:800px;
                                    margin:0 auto;
                                }
                            
                                ul{
                                        margin:0;
                                        padding:0;
                                        width:600px;
                                        height:700px;
                                        margin-top:20px;
                                        margin-left:17px;
                                        border:1px solid  blue;
                                }
                                
                                ul li{
                                        border:1px solid deeppink;
                                        width:100px;
                                        height:120px;
                                        list-style-type:none;
                                        float:left;
                                        margin-left:10px;
                                        margin-top:20px;
                                }    
                                
                                ul li img{
                                        width:80px;
                                        height:100px;
                                        margin: 10px;
                                        
                                }
                                
                            </style>
                    </head>
                    
                    <body>
                         <div>
                             <ul>
                                       <li><img src="cat.gif"></img></li>
                                         <li><img src="cat.gif"></img></li>
                                         <li><img src="cat.gif"></img></li>
                                         <li><img src="cat.gif"></img></li>
                                         <li><img src="cat.gif"></img></li>
                                         <li><img src="cat.gif"></img></li>
                                         <li><img src="cat.gif"></img></li>
                                         <li><img src="cat.gif"></img></li>
                                      <li><img src="cat.gif"></img></li>
                                         <li><img src="cat.gif"></img></li>
                                         <li><img src="cat.gif"></img></li>
                                         <li><img src="cat.gif"></img></li>
                                 
                             </ul>
                             </div>
                    </body>
            </html>