css 订阅
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1]  CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。 [2] 展开全文
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1]  CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。 [2]
信息
外文名
Cascading Style Sheets
外语缩写
CSS(也作文件扩展名)
中文名
层叠样式表
其他称呼
级联样式表
CSS发展历程
1990年,Tim Berners-Lee和Robert Cailliau共同发明了Web。1994年,Web真正走出实验室。 [3]  从HTML被发明开始,样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。随着HTML的成长,为了满足页面设计者的要求,HTML添加了很多显示功能。但是随着这些功能的增加,HTML变的越来越杂乱,而且HTML页面也越来越臃肿。于是CSS便诞生了。1994年哈坤·利提出了CSS的最初建议。而当时伯特·波斯(Bert Bos)正在设计一个名为Argo的浏览器,于是他们决定一起设计CSS。其实当时在互联网界已经有过一些统一样式表语言的建议了,但CSS是第一个含有“层叠”丰意的样式表语言。在CSS中,一个文件的样式可以从其他的样式表中继承。读者在有些地方可以使用他自己更喜欢的样式,在其他地方则继承或“层叠”作者的样式。这种层叠的方式使作者和读者都可以灵活地加入自己的设计,混合每个人的爱好。哈坤于1994年在芝加哥的一次会议上第一次提出了CSS的建议,1995年的www网络会议上CSS又一次被提出,博斯演示了Argo浏览器支持CSS的例子,哈肯也展示了支持CSS的Arena浏览器。同年,W3C组织(World WideWeb Consortium)成立,CSS的创作成员全部成为了W3C的工作小组并且全力以赴负责研发CSS标准,层叠样式表的开发终于走上正轨。有越来越多的成员参与其中,例如微软公司的托马斯·莱尔顿(Thomas Reaxdon),他的努力最终令Internet Explorer浏览器支持CSS标准。哈坤、波斯和其他一些人是这个项目的主要技术负责人。1996年底,CSS初稿已经完成,同年12月,层叠样式表的第一份正式标准(Cascading style Sheets Level 1)完成,成为w3c的推荐标准。1997年初,W3C组织负责CSS的工作组开始讨论第一版中没有涉及到的问题。其讨论结果组成了1998年5月出版的CSS规范第二版。 [4-5] 
收起全文
精华内容
参与话题
问答
  • CSS-基础篇

    万次阅读 多人点赞 2020-05-18 19:31:44
    CSS基础部分自学笔记 内联样式 也称行内或行间样式,是在html标签上添加style属性来实现的 内部样式 在<style></style>标签内添加的样式,内部样式的代码可以复用、符合W3C标准,尽量让结构和样式分开...

    CSS基础部分自学笔记


    内联样式

    也称行内或行间样式,是在html标签上添加style属性来实现的


    内部样式

    <style></style>标签内添加的样式,内部样式的代码可以复用、符合W3C标准,尽量让结构和样式分开处理


    外部样式

    • <link rel="stylesheet" href="">
      rel:指定资源跟页面的关系
      href:资源的地址
    • @import url(./common.css);
      这种方式有很多问题,不建议使用

    颜色表示法

    • 单词表示法
    • 十六进制表示法
    • RGB三原色表示法(范围0-255)

    CSS背景样式

    background-color:背景颜色
    background-image:背景图片(URL背景地址,默认水平垂直都铺满背景图)
    background-repeat:背景图片的平铺方式(repeat-x、repeat-y、repeat、no-repeat)
    background-positon:背景图片位置(x y)=>(数字[px/%] | 单词[x:left/center/right],[y:top/center/bottom])
    background-attachment:背景图随滚动条的移动方式(scroll默认值,背景位置是按当前元素进行偏移的;fixed背景位置是按照浏览器进行偏移的)
    复合样式:background:red url() repeat 0 0;(颜色 背景图 平铺方式 位置)


    CSS边框样式

    border-style:边框样式(solid实线、dashed虚线、dotted点线…)
    border-width:边框大小(px)
    border-color:边框颜色
    【注】可单独对一个边框进行设置(border-top/right/bottom/left-)

    //利用CSS边框实现三角形
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
        <style>
          div {
            width: 0px;
            height: 0px;
            border-top-color: transparent;
            border-top-style: solid;
            border-top-width: 30px;
            border-right-color: red;
            border-right-style: solid;
            border-right-width: 30px;
            border-bottom-color: transparent;
            border-bottom-style: solid;
            border-bottom-width: 30px;
            border-left-color: transparent;
            border-left-style: solid;
            border-left-width: 30px;
          }
        </style>
      </head>
      <body>
        <div></div>
      </body>
    </html>
    

    复合样式:border:1px red solid;(边框大小 颜色 样式)对单个边也可以用


    CSS文字样式

    font-family:字体类型

    • 设置多字体方式(使其能够适应更多的计算机和设备)
    • 引号的问题(有的字体中间有空格,必须用引号引起来)

    font-size:字体大小(默认大小16px),字体大小一般为偶数

    属性取值 字体大小
    xx-small 最小
    x-small 较小
    small
    medium 正常(默认值)
    large
    x-large 较大
    xx-large 最大

    font-weight:字体粗细(单词[normal正常、bold加粗]; 数字[100-500正常、600-900加粗])
    font-style:字体样式(normal正常、italic斜体[italic所有带有倾斜字体的可以设置;oblique没有倾斜属性的字体也可以设置倾斜])
    color:字体颜色
    复合样式:font:weight style size familyfont:style weight size familyfont:weight style size/line-height family


    CSS段落样式

    text-decoration:文本修饰(underline下划线、line-through删除线、overline上划线、none不添加任何修饰),可添加多个修饰,用空格隔开
    text-transform:文本大小写(针对英文段落,lowercase小写、uppercase大写、capitalize首字母大写)
    text-indent:文本缩进(首行缩进font-size的两倍,或2em[em相对单位,永远跟一个字体设置的大小相同)
    text-align:文本对齐方式(left默认、right、center、justify[两端点对齐,中间自行调节])
    line-height:定义行高(不是固定值,根据当前字体的大小变化,用数字+px或scale[相对于原来字体的比例]表示)
    letter-spacing:定义字间距
    word-spacing:定义词间距(针对英文)
    强制折行

    • word-break:break-all; 非常强烈的折行
    • word-wrap:break-word; 不是那么强烈的折行

    CSS选择器

    • ID选择器

    css:#elem{}
    html:id=“elem”
    【注】1.在一个页面中,ID值是唯一的
    2.命名规范,字母 _ - 数字 (命名的第一位不能是数字)
    3.命名方式:驼峰式(小驼峰、大驼峰)、下划线式、短线式

    • CLASS选择器

    css:elem{}
    html:class=“elem”
    【注】1.class选择器是可以复用的
    2.可以添加多个class样式
    3.多个样式的时候,样式的优先级根据CSS决定,而不是class属性中的顺序
    4.标签+类的写法

    • 标签选择器

    css:div{}
    html:<div></div>

    • 群组选择器/分组选择器
      css:div,p,span{}
    • 通配选择器

    *{}
    尽量避免使用通配选择器,因为会给所有的标签添加样式

    • 层次选择器

    后代:M N{}
    父子:M > N{}
    兄弟:M ~ N{} 当前M下面的所有兄弟N标签
    相邻:M + N{} 当前M相邻的N标签

    • 属性选择器

    div[class]{}
    div[class][id]{}
    div[class=box]{}
    div[class*=search]{} //只要search在class中出现过都可以选中
    =:完全匹配 *=:部分匹配 ^=:起始匹配 $=:结束匹配

    • 伪类选择器

    css伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候,用伪类来添加。
    :link 访问前的样式(只能给a标签)
    :visited 访问后的样式(只能给a标签)
    :hover 鼠标移入时的样式(可以给所有标签)
    :active 鼠标按下时的样式(可以给所有标签)
    如果四个伪类都生效,顺序为:L V H A

    • 伪元素选择器

    div:after{content: ;color: }
    div:before{content: }
    :checked、:disabled、:focus 都是针对表单元素

    • 结构性伪类选择器

    :nth-of-type(){}、:nth-child(){} 角标从1开始,n值表示从0到无穷大即都被选中,隔行换色(2n)(2n+1)
    选中第一项 :first-of-type{} :first-child{}
    选中最后一项 :last-of-type{} :last-chile{}
    只有一项的时候被选中 only-of-type{}
    【注】type和child的区别:type看孩子类别,child不区别孩子类别


    CSS样式继承

    文字相关的样式可以被继承
    布局相关的样式不能被继承(默认不继承,可以使用inherit值让其继承)


    CSS优先级

    • 相同样式优先级
      当设置相同样式时,后面的优先级较高,但不建议出现重复设置样式的情况
    • 内部样式与外部样式
      内部样式与外部样式优先级相同,如果都设置了相同的样式,那么后写的引入方式优先级高
    • 单一样式优先级
      style行间(权重1000)> id(权重100) > class(权重10)> tag(权重1)> 继承
    • !important(不能针对继承的属性进行优先级的提升)
      提升样式优先级,非规范方式,不建议使用 #elem{color:red !important;}
    • 标签+类与单类
      标签+类 > 单类
    • 群组优先级
      群组选择器与单一选择器的优先级相同,靠后写的优先级高
    • 层次优先级
      权重比较、约分比较

    CSS盒子模型

    在这里插入图片描述

    padding/border/margin
    只写一个值:上右下左
    写两个值:上下、左右
    写三个值:上、左右、下
    写四个值:上、右、下、左
    1.背景颜色会填充到margin以内的区域(不包括margin区域)
    2.文字会在content区域
    3.padding不会出现负值,margin是可以出现负值的
    box-sizing(盒尺寸,可以改变盒子模型的展示形态)[content-box]/[border-box]
    使用场景:1.不用再去计算一些值
    2.解决一些百分比的问题input{width:100%;padding:30px;box-sizing:border-box;}
    margin叠加
    当给两个盒子同时添加上下外边距的时候,就会出现叠加的问题(取两者中大的值作为叠加值),只有上下有,左右没有
    解决方案:
    1.BFC规范
    2.想办法只给一个元素添加间距
    margin传递
    传递问题只会出现在嵌套的结构中,且只有margin-top会有传递的问题,其它三个方向没有传递问题
    解决方案:
    1.BFC规范
    2.给父容器加边框
    3.margin换成padding(加给父元素,padding-top: ;并进行调整)
    margin自适应居中(只可以左右,不可以上下)
    margin-left:auto;margin-right:auto;居中
    一般写法:margin:0 auto;(margin:auto auto;)


    标签分类

    布局一般用块标签,修饰文本一般用内联标签

    按类型:
    block:块 div p ul li h1…
    独占一行;支持css中所有的样式;不写宽时,和父元素宽相同;所占区域是一个矩形
    inline:内联 span a em strong img…
    挨在一起;有些样式不支持(宽、高、margin、padding的某些);不写宽时,宽度由内容决定;所占区域不一定是矩形;内联标签之间会有空隙(换行产生),解决,找到两个内联的父元素:font-size:0;然后两个内联在设置font-size;16px;空隙消失
    inline-block:内联块 input select…
    挨在一起,支持宽高


    显示框类型

    display:block/inline/inline-block/none(让指定标签隐藏)
    disp:none不占空间的隐藏;visibility:hidden占空间的隐藏


    标签嵌套规范

    块标签可以嵌套内联标签
    块标签不一定能嵌套块标签
    内联标签不能嵌套块标签


    溢出隐藏

    overflow:visible(默认)/ hidden / scroll(有滚动条)/ auto(内容多的时候有滚动,内容少的时候没有)
    overflow-x、overflow-y:针对x、y分别设置


    透明度与手势

    opacity
    0(透明)~ 1(不透明)0.5
    rgba( , , ,0.5) 最后一个为透明度,只针对背景,不针对文字,可以让指定样式透明,不改变其他样式
    cursor 手势
    default:默认透明
    自定义鼠标样式:pointer(手型)、move(十字米可移动的样式)、help(箭头带问号)
    自定义,准备图片 .cur .ico的才可以,`cursor:url(),auto;


    最大、最小宽高

    min-width、max-width
    min-height、max-height
    一个容器怎么适应屏幕的高:

    html,body{height:100%}
    .contrainer(height:100%}
    

    CSS的默认样式

    没有默认样式:div、span、…
    有默认样式:
    body(margin:8px)、h1(margin:上下16px)-h6、p、ul(margin:上下16px padding:左40px 默认点:list-style:disc)、a(text-decoration:underline)…


    CSS重置样式

    *{margin:0;padding:0;}
    ul{list-style:none;}
    a{text-decoration:none;color:#666;}
    img{display:block;}
    

    图片和容器底部有一些空隙

    • vertical-align:baseline;基线对齐 ==> vertical-aglin:bottom;底线对齐
    • display:block; //推荐
    展开全文
  • HTML+CSS初级入门

    万人学习 2017-07-22 13:34:05
    本课程主要目标是教给大家: 1)HTML和CSS能干什么? 2)HTML和CSS是什么?...3)HTML和CSS怎么用,这里会讲解常用到的HTML和CSS的使用规则 4)一步一步开发一个响应式的页面 QQ交流群:659123270
  • Web前端入门 HTML+CSS基础

    千次阅读 多人点赞 2020-09-17 10:10:49
    HTML+CSS基础知识总结 1.web标准 结构上来说html页面分为head和body两部分 head里面包含meta标签(UTF8字符集)、title(网页标题)、link(外部样式表引入) body里面是各种常用的标签。 web页面标准...

    HTML+CSS基础知识总结

    1.web标准

    结构上来说html页面分为head和body两部分
    head里面包含meta标签(UTF8字符集)、title(网页标题)、link(外部样式表引入) body里面是各种常用的标签。
    web页面标准分为结构(html)+样式(css)+行为(js)

    2.HTML基本标签

    2.1基本标签
    <html>	<head>	<title>	<body>	<table>	<tr>	<td>
    <span>	<p>	<form>	<h1>	<h2>	<h3>	<h4>	<h5>
    <h6>	<object>	<style>	<b>	<u>	<strong>	<i>	<div>
    <a>	<script>	<center>
    
    单标签:<br>	<hr>	<img>	<input>	<param>	<meta>	<link>
    

    2.2表格

     <table>
            <th></th>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    

    表格横向合并: <td colspan="横向合并行数"></td>
    表格竖向合并:<td rowspan="竖向合并行数"></td>

    表格有部分属性我们不常用,这里重点记住cellspacing.cellpadding。

    在这里插入图片描述

    表格标题caption

    语法:

    <table>
    	<caption>我是表格标题</caption>
    </table>
    

    注意:

    1.caption元素定义表格标题,通常这个标题会被居中且显示于表格之上。
    2.caption标签必须紧随table标签之后。
    3.这个标签只存在表格里面才有意义。

    2.3表单

    表单提交

    <form action="提交地址"></form>
    

    input type类型

    <form action="提交地址">
            <input type="text" placeholder="我是文本框">
            <!-- checked="checked" 这是默认选中 -->
            <input type="radio" checked="checked" placeholder="我是单选框"><input type="checkbox" placeholder="我是复选框">
            <input type="password" name="" id="" placeholder="我是密码框">
            <!-- 固定文本域大小 禁止拖动 resize:none; -->
            <textarea style="resize:none;">我是文本域</textarea>
            <input type="submit" placeholder="我是提交按钮">
            <!-- 下拉菜单  下拉菜单默认选中disabled selected hidden -->
            <select name="" id="" value="">
                <option value="" disabled selected hidden>1</option>
                <option value="">2</option>
            </select>
        </form>
    

    2.4标签分类和特性

    块元素: div、p、h1-h6、ul、ol、li 独占一行 能直接设置宽
    行内元素: a、span、i、em 可以和别的行内元素占一行、不能直接设置宽高、能设置水平margin,不能设置垂直 margin
    行内块元素: img、input 可以和别的行内元素或者行内块元素占一行、能直接设置宽高

    3.选择器

    3.1 常用选择器种类

    id选择器、类选择器、后代选择器、子集选择器、标签选择器、并集选择器

    3.2选择器权重和优先级(重点)

    !important        ∞无穷大
    
    内联样式           1000
    
    id选择器优先级      100
    
    类选择器优先级      10
    
    标签选择器优先级    1
    
    通配符优先级        0
    

    即:!important > 内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符

    4.CSS属性

    4.1文字属性

    font-family 设置字体
    font-size 设置字体大小
    color 设置字体颜色
    font-weight 设置字体加粗
    text-align:center 设置文本水平居中
    line-height 设置单行文本垂直居中
    margin:0 auto 设置标签水平居中

    4.2背景

    background-color 设置背景颜色
    background-color:rgba() 设置背景透明度
    background-image:url() 设置背景图片
    background-repeat 设置背景图片是否重复
    background-position 设置背景图片位置

    4.3边框

    border:2px solid #000; 设置边框粗细 类型 颜色
    border-radius 设置边框圆角
    box-shadow 设置边框阴影
    soild是实线 dashed是虚线

    5.盒模型

    一个盒子由content+padding+border+margin组成

    padding:10px 代表上下左右都是10px
    padding:10px 20px 上下是10px 左右是20px
    padding:10px 20px 30px; 代表上 左右 下
    padding:10px 20px 30px 40px; ;代表上右下左
    										margin同理
    

    6.浮动

    浮动的方式:

     			float: left; 左浮动
                float: right;右浮动
                float: none; 元素不浮动(默认值)
    

    为什么要浮动?怎么清除浮动?(重点)

    页面布局的时候子元素不浮动的时候会撑起父盒子的高度;
    浮动后父盒子的高度为0,会对后面的页面布局造成影响,所以需要清除浮动。

    清除浮动的几种方式(重点)

    (1)额外标签法
    是w3C推荐的做法是通过在浮动元素末尾添加一个空的标签
    例如<div style="clear:both"></div>

    优点:通俗易懂,书写方便
    缺点:添加许多无意义的标签,结构化较差。

    (2)overflow:hidden
    可以给父级添加:overflow为hidden/ auto/ scro11

    优点:代码简洁
    缺点:内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素。

    (3))使用after伪元素清除浮动

    使用方法:
    .clearfix:after {
    		content: ""; 
    		display: block; 
    		height: 0; 
    		clear: both;
    		visibility: hidden; 
    }
    .clearfix {
    		*zoom: 1;
    }/*IE6、7专有*/
    

    7.定位

    定位模式有三种:绝对定位 相对定位 固定定位

    绝对定位 position:absolute;
    相对定位 position:relative;
    固定定位 position:fixed;

    重中之重:

    相对定位:相对于自身位置
    绝对定位:相对于有定位的最近的父元素定位
    固定定位:相对于浏览器进行定位

    z-index:999;表示层叠顺序或者层级

    8.display属性值

    display:none 隐藏但是不占位置 作用:元素展和转换为块元素
    visibility:hidden 隐藏但是占据位置
    display:inline 转换成行内元素
    display:inline-block 转换成行内块元素

    9.伪类

    简记:lvha

    a:link 初始状态
    a:visited 访问过后的
    a:hover 鼠标经过
    a:active 鼠标点击瞬间

    10.注释

    html注释 <!-- -->
    css中注释 /* */
    js中的注释 //

    11.文本下划线

    ul去除小圆点 list-style:none
    a标签去除下划线 text-decoration:none
    a标签横穿线 text-decoration:line-through
    a标签添加下划线 text-decoration:underline

    12.CSS3属性

    旋转 div 元素:

    transform:rotate(30deg);
    

    缩放div元素:

     transform: scale(0.98);
    

    div元素阴影:

     box-shadow:6px 6px 6px 6px #969494;
    

    边框圆角:

    box-radius:50%;
    

    13.浏览器内核

    因为浏览器太多啦,但是现在主要流行的就是下面几个:
    在这里插入图片描述

    展开全文
  • 10个超漂亮的CSS 3D特效

    万次阅读 多人点赞 2018-08-11 09:26:55
    在油管上看到了10个超漂亮的CSS 3D特效,遂分享给大家,有写是css+JavaScript实现的。 3D Slicebox 在3D立方体上寻找图像幻灯片?查看演示 图像转换 与THREE.js 结合使用- 此图片幻灯片将让您的访问者惊呆了...

    在油管上看到了10个超漂亮的CSS 3D特效,遂分享给大家,有写是css+JavaScript实现的。

    3D Slicebox

    在3D立方体上寻找图像幻灯片?查看演示

    图像转换

    THREE.js 结合使用- 此图片幻灯片将让您的访问者惊呆了。你不能错过这一个,相信我!查看演示

    3D条形图

    将无聊的平面2D图表转换为3D图表。查看现场演示,点击下面的图片获取源代码。查看演示

    3D导航栏

    再次在您网站顶部的水平导航栏?试试这个吧!查看演示

    3D动画图表

    更改数据时包含动画的3D图表。查看演示

    纯CSS进度条

    忘记旧的普通2D进度条并检查这个纯CSS 3D进度条。查看演示

    CSS Helix加载器

    适合您网站的加载动画,可以让用户长时间保持关注。查看演示

    3D盒子预览器

    将相关内容分组到一个框中并将鼠标悬停在预览中!查看演示

     

    3D翻转预览器

    为您的元素添加悬停效果的完美匹配。查看演示

    3D 404错误

    用旋转的3D元素替换旧的无聊404错误页面。查看演示

    展开全文
  • CSS入门

    万次阅读 多人点赞 2019-12-17 18:44:03
    一、CSS简介 二、内容 1.css的引入方式 2.元素的id和class 3、CSS选择器 4、文本样式总结 5、文本样式总结 6、边框样式 7、 背景样式概述 8、超链接样式 9、图片样式 10、列表样式 11、表格样式 12、...

    目录

    一、CSS简介

    二、内容

    1.css的引入方式

    2.元素的id和class

    3、CSS选择器

    4、文本样式总结

    5、文本样式总结

    6、边框样式

    7、 背景样式概述

    8、超链接样式

    9、图片样式

    10、列表样式

    11、表格样式

    12、CSS盒子模型

    13、浮动布局

    14、定位布局


    预备知识与后续知识及项目案例

    [HTML入门与进阶以及HTML5]
    [CSS]
    [JS-上]
    [JS-下]
    [jQuery]
    [Node.js + Gulp 知识点汇总]
    [MongoDB + Express 入门及案例代码]
    [Vue项目开发-仿蘑菇街电商APP]

    一、CSS简介

    CSS是什么?CSS,即“Cascading Style Sheet(层叠样式表)”,是用来控制网页的外观的一门技术。

    我们知道,HTML、CSS和JavaScript是前端技术中最核心的三个元素。HTML控制网页的结构,CSS控制网页的外观,而JavaScript控制网页的行为。我们已经在HTML入门教程中的前端技术简介这一节详细讲解了这三者的区别,大家可以回去查看一下。

    HTML、CSS和JavaScript的关系如下:

    “HTML是网页的结构,CSS是网页的外观,而JavaScript是页面的行为。”

    二、内容

    1.css的引入方式

    在HTML中引入CSS共有3种方式:

    (1)外部样式表; (2)内部样式表; (3)内联样式表;

    下面我们详细为大家介绍这3种CSS引入方式。

    一、CSS的3种引用方式

    1、外部样式表

    外部样式表是最理想的CSS引用方式,在实际开发当中,为了提升网站的性能和维护性,一般都是使用外部样式表。所谓的“外部样式表”,就是把CSS代码和HTML代码都单独放在不同文件中,然后在HTML文档中使用link标签来引用CSS样式表。 当样式需要被应用到多个页面时,外部样式表是最理想的选择。使用样式表,你就可以通过更改一个CSS文件来改变整个网站的外观。 外部样式表在单独文件中定义,并且在标签对中使用link标签来引用。 举例:

    <!DOCTYPE html>
     <html xmlns="http://www.w3.org/1999/xhtml">
     <head> 
     <title></title>
        <!--在HTML页面中引用文件名为index的css文件-->
    <link href="index.css" rel="stylesheet" type="text/css" />
    </head>
    <body>   
         <div></div>
    </body>
    </html>

    说明:外部样式表都是在head标签内使用link标签来引用的。

    2、内部样式表

    内部样式,指的就是把CSS代码和HTML代码放在同一个文件中,其中CSS代码放在标签对是放在标签对内的。 举例:

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>  
      <title></title>    
      <!--这是内部样式表,CSS样式在style标签中定义-->    
      <style type="text/css">
              p{color:Red;}      
       </style>
     </head>
     <body>   
      <p>绿叶学习网</p>  
      <p>绿叶学习网</p>
     </body>

    在浏览器预览效果如下:

    内部样式表

    说明:

    对于内部样式表,CSS样式在<style>标签内定义,而<style>标签必须放在<head>标签内。

    3.内联样式表

    内联样式表,也是把CSS代码和HTML代码放在同一个文件中,但是跟内部样式表不同,CSS样式不是在<style></style>标签对中定义,而是在标签的style属性中定义。

    举例:

    <!DOCTYPE html> 
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
    </head>
    <body>
        <p style="color:Red; ">绿叶学习网</p>
        <p style="color:Red; ">绿叶学习网</p>
        <p style="color:Red; ">绿叶学习网</p>
    </body>
    </html>

    在浏览器预览效果如下:

    内联样式表

    2.元素的id和class

    id和class是HTML元素中两个最基本的公共属性。

    一、元素的id属性

    id属性被赋予了标识页面元素的唯一身份。如果一个页面出现了多个相同id属性取值,CSS选择器或者JavaScript就会因为无法分辨要控制的元素而最终报错。

    举例:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title></title>

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

    </head>

    <body>

        <div id="first">绿叶学习网</div>

        <p id="first">绿叶学习网</p>

    </body>

    </html>

    说明:

    上面HTML代码是错误的,因为在同一个HTML页面中,不允许出现两个相同的id。不过要注意一下,在不同页面是可以出现相同id的元素。

    二、元素的class属性

    class,顾名思义,就是“类”。它采用的思想跟其他C、Java等编程语言的“类”相似。我们可以为同一个页面的相同元素或者不同元素设置相同的class,然后使得相同的class具有相同的CSS样式。

    如果你要为两个元素或者两个以上元素定义相同的样式,建议使用class属性。

    举例:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title></title>

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

    </head>

    <body>

        <div class="first">绿叶学习网</div>

        <p class="first">绿叶学习网</p>

    </body>

    </html>

    说明:

    这段HTML代码是正确的,因为在同一个HTML页面中,允许相同的元素或者不同的元素设置相同的class属性,以便我们可以统一对具有相同的class属性的元素定义相同的CSS样式。

    id和class就像你的身份证号和姓名,身份证号是全国唯一的,id号也就是唯一的,class(类名)就是姓名,两个人的姓名就有可能一样。

    此外,需要注意一下:

    • (1)一个标签可以同时定义多个class;
    • (2)id也可以写成name,区别在于name是HTML中的标准,而id是XHTML中的标准,现在网页的标准都是使用id,所以大家尽量不要用name属性;

    3、CSS选择器

    我们先看一段代码:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title>什么叫CSS选择器?</title>

    </head>

    <body>

        <div>绿叶学习网</div>

        <div>绿叶学习网</div>

        <div>绿叶学习网</div>

    </body>

    </html>

    在浏览器预览效果如下:

    CSS选择器

    如果我们只想要第二个div文本颜色为红色,怎么办呢?我们必须通过一种方式来“选中”第二个div(因为其他的div不能选中),然后把它的CSS属性颜色color改为红色,这样才行。像这种把某一个你想要的标签选中的方式就是所谓的“选择器”,也就是说选择器就是一种选择元素的方式。

    什么叫CSS选择器

    选择器,说白了就是用一种方式把你想要的那一个标签选中!把它选中了,你才能操作这个标签的CSS样式。这样够简单了吧。CSS有很多把你所需要的标签选中的方式,这些不同的方式就是不同的选择器。

    选择器的不同,在于它选择方式不同,但是他们的目的都是相同的,那就是把你需要的标签选中,然后让你定义该标签的CSS样式。当然,你也有可能会用某一种选择器代替另一种选择器,这仅仅是由于选择方式不一样罢了,目的还是一样的。

    CSS选择器的格式:

    1

    2

    3

    4

    5

    6

    选择器

    {

        样式属性1:取值1;

        样式属性2:取值2;

        ……

    }

    一、基本选择器

    1、元素选择器

    元素选择器,就是“选中”相同的元素,然后对相同的元素设置同一个CSS样式。

    语法:

    CSS元素选择器

    举例:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title></title>

        <style type="text/css">

            div{color:red;}

        </style>

    </head>

    <body>

        <div>绿叶学习网</div>

        <p>绿叶学习网</p>

        <span>绿叶学习网</span>

        <div>绿叶学习网</div>

    </body>

    </html>

    在浏览器预览效果如下:

    CSS元素选择器

    分析:

    “div{color:red}”表示把页面所有的div元素选中,然后为所有的div元素设置颜色color为红色。

    在这里我们可以看出,元素选择器就是选择相同的元素,而不会选择其他元素,例如这段代码中的p元素和span元素就没有被选中,因此它们的内容就没有变成红色。

    2、id选择器

    我们可以为元素设置一个id,然后针对这个id的元素进行CSS样式操作。注意,在同一个页面中,不允许出现两个相同的id,这个就像没有哪两个人的身份证号是相同的道理一样。

    语法:

    CSS的id选择器

    说明:

    id名前面必须要加上前缀“#”,否则该选择器无法生效。id名前面加上“#”,表明这是一个id选择器。

    举例:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title></title>

        <style type="text/css">

            #lvye{color:red;}

        </style>

    </head>

    <body>

        <div>绿叶学习网</div>

        <div id="lvye">绿叶学习网</div>

        <div>绿叶学习网</div>

    </body>

    </html>

    在浏览器预览效果如下:

    CSS的id选择器

    分析:

    “#lvye{color:red;}”表示选中id为lvye的元素,然后为这个元素设置CSS属性“color:red;”。

    选择器为我们提供了一种选择方式。如果我们不使用选择器,就没办法把第二个div选中。

    3、class选择器

    class选择器,也就是“类选择器”。我们可以对“相同的元素”或者“不同的元素”设置一个class(类名),然后针对这个class的元素进行CSS样式操作。

    语法:

    CSS的class选择器

    说明:

    class名前面必须要加上前缀“.”(英文点号),否则该选择器无法生效。类名前面加上“.”,表明这是一个class选择器。

    举例1:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title></title>

        <style type="text/css">

            .lv{color:red;}

        </style>

    </head>

    <body>

        <div>绿叶学习网</div>

        <p class="lv">绿叶学习网</p>

        <span class="lv">绿叶学习网</span>

        <div>绿叶学习网</div>

    </body>

    </html>

    在浏览器预览效果如下:

    CSS的class选择器

    分析:

    “.lv{color:red;}”表示选中class为lv的所有元素,然后为这些元素设置CSS属性“color:red;”。

    p元素和span元素是两个不同的元素,但是我们可以为这两个不同的元素设置相同的class,这样就可以同时为这两个不同的元素设置相同的CSS样式了。

    举例2:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title></title>

        <style type="text/css">

            .lv{color:red;}

        </style>

    </head>

    <body>

        <div class="lv">绿叶学习网</div>

        <div class="lv">绿叶学习网</div>

        <div>绿叶学习网</div>

    </body>

    </html>

    在浏览器预览效果如下:

    class选择器

    分析:

    虽然这个HTML页面有3个div元素,但是我们为前两个div元素设置相同的class,然后设置相同class的元素颜色为红色。因此,第3个div层内容不会变成红色,因为它不属于class="lv",它没有被“选中”。

    4、子元素选择器

    子元素选择器,就是选中某个元素下的子元素,然后对该子元素设置CSS样式。

    语法:

    CSS子元素选择器

    说明:

    父元素与子元素必须用空格隔开,从而表示选中某个元素下的子元素。

    举例:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title></title>

        <style type="text/css">

            #father1 div{color:blue;}

            #father2 #p1{color:red;}

        </style>

    </head>

    <body>

        <div id="father1">

            <div>绿叶学习网</div>

            <div>绿叶学习网</div>

        </div>

        <div id="father2">

            <p id="p1">绿叶学习网</p>

            <p id="p2">绿叶学习网</p>

            <span>绿叶学习网</span>

        </div>

    </body>

    </html>

    在浏览器预览效果如下:

    CSS子元素选择器

    分析:

    “#father1 div{…}”表示选择“id为father1的元素”下的所有div元素;

    “#father2 #p1{…}”表示选择“id为father2的元素”下的子元素,其中子元素的id为#p1。因为“id为father2的元素”下的第2个p元素没有被选中,所以第2个p元素内容没有变成红色。

    5、相邻选择器

    相邻选择器,就是选中该元素的下一个兄弟元素,在这里注意一点,相邻选择器的操作对象是该元素的同级元素。

    语法:

    CSS相邻选择器

    举例:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title></title>

        <style type="text/css">

            #lv+div{color:red;}

        </style>

    </head>

    <body>

        <div>绿叶学习网</div>

        <div id="lv">

            <p>绿叶学习网</p>

        </div>

        <div>绿叶学习网</div>

        <div>绿叶学习网</div>

    </body>

    </html>

    在浏览器预览效果如下:

    CSS相邻选择器

    分析:

    “#lv+div{…}”表示选择“id为lv的元素”的相邻的下一个兄弟元素div,也就是第3个div元素。

    6、群组选择器

    群组选择器,就是同时对几个选择器进行相同的操作。常常,我们的CSS 样式中会有好几个地方需要使用到相同的设定时,一个一个分开写会是一件满累人的工作,重覆性太高且显得冗长,更不好管理....在CSS 语法的基本设定中,就可以把这几个相同设定的选择器合并在一起,原本可能是写了7~8 行相同的语法,合在一起后就只要短短的一小行,怎么看都让人心旷神怡啊~

    语法:

    CSS群组选择器

    说明:

    对于群组选择器,两个选择器之间必须用“,”(英文逗号)隔开,不然群组选择器无法生效。

    举例:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title></title>

        <style type="text/css">

            h3,div,p,span{color:red;}

        </style>

    </head>

    <body>

        <h3>绿叶学习网</h3>

        <div>绿叶学习网</div>

        <p>绿叶学习网</p>

        <span>绿叶学习网</span>

    </body>

    </html>

    在浏览器预览效果如下:

    CSS群组选择器

    分析:

    “h3,div,p,span{color:red;}”表示选中所有的h3元素、div元素、p元素和span元素,然后设置这些元素的字体颜色为red。

    1

    2

    3

    <style type="text/css">

        h3,div,p,span{color:red;}

    </style>

    其实上面这段代码等价于以下代码:

    1

    2

    3

    4

    5

    6

    <style type="text/css">

        h3{color:red;}

        div{color:red;}

        p{color:red;}

        span{color:red;}

    </style>

    现在大家知道使用群组选择器的效率有多高了吧!

    4、文本样式总结

    CSS文本样式

    大家可以对着这张图,来想一下相应的CSS属性叫什么。

    表1 CSS文字属性
    属性 说明
    font-family 字体类型
    font-size 字体大小
    font-weight 字体粗细
    font-style 字体斜体
    color 颜色

    一、字体类型font-family

    语法:

    font-family:字体名;

    说明:

    字体名指的是“微软雅黑”、“宋体”、“Times New Roman”等。

    举例:“font-family:微软雅黑;”

    二、字体大小font-size

    语法:

    font-size:像素值;

    说明:

    初学者尽量使用像素来作为单位,因此我们不会在初学者阶段介绍太多的其他单位,比如百分比、em等。

    举例:“font-size:15px;”

    三、字体颜色color

    语法:color:关键字/颜色值;

    说明:

    color共有2种取值,一种是关键字取值,例如“color:red;”;另外一种是十六进制颜色值,例如“color:#F1F1F1;”。对于十六进制颜色值,我们可以使用绿叶学习网的“在线调色板”选取你喜欢的颜色。

    举例:“color:blue;”

    四、字体粗细font-weight

    语法:

    font-weight:取值;

    说明:

    对于中文网页来说,font-weight属性一般仅用到bold、normal这两个属性值完全就可以了,粗细值不建议使用数值(100~900)。

    举例:“font-weight:bold;”

    五、字体斜体font-style

    在CSS中,使用font-style属性来定义字体倾斜效果

    语法:

    font-style:取值;

    说明:

    font-style属性的取值如下表:

    表1 font-style属性
    font-style属性值 说明
    normal 默认值,正常体
    italic 斜体,这是一个属性
    oblique 将字体倾斜,将没有斜体变量(italic)的特殊字体,要应用oblique

    举例:“font-style:italic;”

    六、CSS注释

    语法:

    /*注释的内容*/

    说明:

    “/*”表示注释的开始,“*/”表示注释的结束。

    5、文本样式总结

    一、CSS段落属性

    表1 CSS段落属性
    属性 说明
    text-decoration 下划线、删除线、顶划线
    text-transform 文本大小写
    font-varient 将英文文本转换为“小型”大写字母
    text-indent 段落首行缩进
    text-align 文本水平对齐方式
    line-height 行高
    letter-spacing 字距
    word-spacing 词距

    1、text-decoration

    在CSS中,使用text-decoration属性来定义字体下划线、删除线和顶划线。

    语法:

    text-decoration:属性值;

    说明:

    text-decoration属性取值如下表:

    表1 CSS段落属性
    text-decoration属性值 说明
    text-decoration 下划线、删除线、顶划线
    none 默认值,可以用这个属性值也可以去掉已经有下划线或删除线或顶划线的样式
    underline 下划线
    line-through 删除线
    overline 顶划线

    使用“text-decoration:none”这个属性值可以去除a标签的默认样式。

    学了这个属性之后,我们应该摒弃HTML入门教程中学习到的<s>标签(删除线)和<u>标签(下划线)。

    2、text-transform

    在CSS中,使用text-transform属性来转换文本的大小写,这个是针对英文而言,因为中文不存在大小写之分。

    语法:

    text-transform:属性值;

    说明:

    text-transform属性取值如下表:

    表1 text-transform属性
    text-transform属性值 说明
    none 默认值,无转换发生
    uppercase 转换成大写
    lowercase 转换成小写
    capitalize 将每个英文单词的首字母转换成大写,其余无转换发生

    3、font-variant

    使用font-variant属性只有一个作用:把文本设置成小型大写字母,这也是针对英文而言,因为中文不存在大小写之分。

    语法:

    font-variant:normal/small-caps;

    说明:

    font-variant属性取值如下表:

    表1 font-variant属性
    font-variant属性值 说明
    normal 默认值,正常效果
    small-caps 小型大写字母的字体

    4、text-indent

    我们可以使用CSS的text-indent属性来控制文本首行的缩进。

    语法:

    text-indent:像素值;

    说明:

    在CSS初学阶段,全部都是使用像素作单位,在CSS进阶阶段我们会深入讲解其他CSS单位

    5、text-align

    在CSS中,使用text-align属性控制文本的水平方向的对齐方式:左对齐、居中对齐、右对齐。

    语法:

    text-align:属性值;

    说明:

    text-align属性取值如下表:

    表1 text-align属性
    text-align属性 说明
    left 默认值,左对齐
    center 居中对齐
    right 右对齐

    text-align属性只能针对文本文字和<img>标签,对其他标签无效。

    6、line-height

    line-height属性指的是行高,而不是行间距。

    语法:

    line-height:像素值;

    说明:

    在CSS初学者阶段,我们都是采用像素做单位。

    7、letter-spacing

    语法:

    letter-spacing:像素值;

    说明:

    letter-spacing控制的是字间距,每一个中文文字作为一个“字”,而每一个英文字母也作为一个“字”!大家要细心留意一下。

    默认情况下,letter-spacing我们几乎都用不上,我们直接采用浏览器默认样式就可以了。大家完全可以忽略掉这个属性。

    8、word-spacing

    语法:

    word-spacing:像素值;

    说明:

    定义词间距,以空格为基准进行调节,如果多个单词被连在一起,则被word-spacing视为一个单词;如果汉字被空格分隔,则分隔的多个汉字就被视为不同的单词,word-spacing属性此时有效。

    6、边框样式

    一、边框属性

    要设置一个元素的边框必须要设置以下3个方面:

    • (1)边框的宽度;
    • (2)边框的外观(实线,或者虚线);
    • (3)边框的颜色;
    表1 边框的三个属性
    属性 说明
    border-width 边框的宽度
    border-style 边框的外观
    border-color 边框的颜色

    1、border-width

    语法:

    border-width:像素值;

    说明:

    在CSS初学者阶段,我们都是建议采用像素做单位

    2、border-style

    border-style属性用于设置边框的外观,例如实线边框和虚线边框。

    语法:

    border-style:属性值;

    说明:

    虽然border-style属性值很多,但是大部分我们都用不上。一般情况下,我们用到solid和dashed这两个属性值就够了,别浪费时间去记忆其他属性值,不听老人言,吃亏在眼前呀!

    3、border-color

    border-color属性用来定义边框的颜色。

    语法:

    border-color:颜色值

    说明:

    对于颜色的取值,请使用前端神器“在线调色板”来选取。

    二、边框属性简洁写法

    设置一个元素的边框就要设置3个属性:border-width、border-style和border-color。如下:

    1

    2

    3

    border-width:1px;

    border-style:solid;

    border-color:Red;

    这种写法费时费力,导致代码量多。因此我们边框CSS样式有一个简洁的写法:

    border:1px solid gray;

    三、CSS边框局部样式

    CSS边框局部样式

    在CSS中,我们可以分别针对上下左右四条边框设置单独的样式。

    1、上边框border-top

    1

    2

    3

    border-top-width:1px;

    border-top-style:solid;

    border-top-color:red;

    简洁写法:border-top:1px solid red;

    2、下边框border-bottom

    1

    2

    3

    border-bottom-width:1px;

    border-bottom-style:solid;

    border-bottom-color:orange;

    简洁写法:border-bottom:1px solid orange;

    3、左边框-left

    1

    2

    3

    border-left-width:1px;

    border-left-style:solid;

    border-left-color:blue;

    简洁写法:border-left:1px solid blue;

    4、右边框border-right

    1

    2

    3

    border-right-width:1px;

    border-right-style:solid;

    border-right-color:red;

    简洁写法:border-right:1px solid red;

    7、 背景样式概述

    一、CSS背景样式概述

    在CSS中,背景样式主要包括背景颜色和背景图像。在传统的布局中,一般使用HTML的background属性为<body>、<table>和<td>等几个少数的标签定义背景图像,然后使用bgcolor属性为它们定义背景颜色。

    但是随着Web2.0时代的到来,传统布局的方式已经满足不了设计者的需求。如今的背景样式不再使用HTML属性来定义。大家记得喔,不要再使用HTML的bgcolor这些属性了,现在几乎全部都是使用CSS的background属性来控制元素的背景颜色和背景图像。

    1、背景颜色

    在CSS中,使用background-color属性来控制元素的背景颜色。

    2、背景图像

    在CSS中,为元素设置背景图像,往往涉及到以下属性:

    表1 CSS背景图像属性
    属性 说明
    background-image 定义背景图像的路径,这样图片才能显示嘛
    background-repeat 定义背景图像显示方式,例如纵向平铺、横向平铺
    background-position 定义背景图像在元素哪个位置
    background-attachment 定义背景图像是否随内容而滚动

    二、背景颜色background-color

    2、background-color属性

    在CSS中,使用background-color属性来定义元素的背景颜色。

    语法:

    background-color:颜色值;

    说明:

    颜色值是一个关键字或一个16进制的RGB值。关键字指的就是颜色的英文名称,如red、blue、green等。所谓的16进制RGB值指的就是类似“#FBF9D0”这种形式的值。对于颜色值的获取,大家可以使用绿叶学习网开发的“在线调色板”来获取,非常的方便。

    举例:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title>background-color属性</title>

        <style type="text/css">

            /*设置所有div元素的共同样式*/

            div

           {

               width:100px;

               height:60px;

           }

            /*设置3个div元素的个别样式*/

            #div1{background-color:red;}

            #div2{background-color: #F3DE3F;}

            #div3{background-color: #0AF7FB;}

        </style>

    </head>

    <body>

        <div id="div1">背景颜色值为red</div>

        <div id="div2">背景颜色值为#F3DE3F </div>

        <div id="div3">背景颜色值为#0AF7FB </div>

    </body>

    </html>

    在浏览器预览效果如下:

    background-color属性

    2、color和background-color区别

    举例:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title>color和background-color区别</title>

        <style type="text/css">

        #p1

        {

            width:290px;

            color:white;

            background-color:red;

         }

        </style>

    </head>

    <body>

        <p id="p1">

            p元素文本颜色color值为white<br/>

            p元素背景颜色background-color值为red

        </p>

    </body>

    </html>

    在浏览器预览效果如下:

    background-color属性

    三、背景图像概述

    在本章第1节“背景样式概述”,我们已经给大家分析了在CSS中控制元素的背景样式包括背景颜色和背景图像,其中控制元素的背景图像涉及到的属性比较多,下面稍微给大家讲解一下,以便为读者理清后面的学习思路。

    表1 CSS背景图像属性
    属性 说明
    background-image 定义背景图像的路径,这样图片才能显示嘛
    background-repeat 定义背景图像显示方式,例如纵向平铺、横向平铺
    background-position 定义背景图像在元素哪个位置
    background-attachment 定义背景图像是否随内容而滚动

    1、background-image

    background-image属性是控制元素的必选属性,它定义了图像的来源,跟HTML的img标签一样,必须定义图像的来源路径,图像才能显示。

    2、background-repeat

    background-repeat属性定义背景图像的显示方式,例如不平铺、横向平铺和两个方向都平铺。

    background-repeat属性

    如上图,第一部分就是背景图像在纵向和横向两个方向都平铺,第二部分只是在横向平铺,而第三部分只是在纵向平铺。

    3、background-position

    background-position属性定义了背景图像在该元素的位置。

    background-position属性

    定义背景图像在元素的位置,一般需要定义背景图像的横向位置和纵向位置,例如上图定义了背景图像在横向距离元素左边80px,在纵向距离元素顶边40px。

    4、background-attachment

    在CSS中,使用背景附件background-attachment属性可以设置背景图像是随对象滚动还是固定不动。

    background-attachment属性

    如上图,使用background-attachment属性设置背景图像固定不动,然后你拖动浏览器滚动条的时候会惊奇发现,图像在固定在浏览器的某个位置,而不随滚动条滚动而变化!

    四、background-image属性

    在CSS中,使用background-image属性来定义元素的背景图片。

    语法:

    background-image:url("图像地址");

    说明:

    图像地址可以是相对地址,也可以是绝对地址。请看“相对地址和绝对地址”。

    举例:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title>background-image属性</title>

        <style type="text/css">

            #div1

           {

                width:143px;

                height:220px;

                background-image:url("../App_images/lesson/run_cj/one piece.jpg");

            }

        </style>

    </head>

    <body>

        <div id="div1">这是一张海贼王图片</div>

    </body>

    </html>

    在浏览器预览效果如下:

    background-image属性

    分析:

    给某个元素设置背景图像,元素要有一定的宽度和高度,背景图片才会显示出来。因此在这里设置了div元素的宽width和height,其中width值和height值跟图片实际的宽度和高度一样。

    在上面例子中,如果我们没有id="div1"的元素设置高度,则在浏览器预览效果如下:

    CSS background-image属性

    这样的话,背景图片就无法完整地显示出来了。

    大家在上面例子的在线测试中修改div元素width和height这两个的属性值看看效果。

    五、background-repeat属性

    在CSS中,使用background-repeat属性可以设置背景图像是否平铺,并且可以设置如何平铺。

    语法:

    background-repeat:取值;

    说明:

    background-repeat属性取值如下:

    表1 background-repeat属性取值
    属性值 说明
    no-repeat 表示不平铺
    repeat 默认值,表示在水平方向(x轴)和垂直方向(y轴)同时平铺
    repeat-x 表示在水平方向(x轴)平铺
    repeat-y 表示在垂直方向(y轴)平铺

    举例:

    这里有一张25px×25px的图片,我们设置3个div元素为200px×100px,并且把div元素背景图像设置为该图片。

    background-repeat属性图1 25px×25px图像

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36

    37

    38

    39

    40

    41

    42

    43

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title>background-repeat属性</title>

        <style type="text/css">

            /*设置div元素的共同样式*/

            div

            {

                width:200px;

                height:100px;

                background-image:url("../App_images/lesson/run_cj/flower.jpg");

                text-align:center;

                border:1px dashed gray;

            }

            /*设置3个div元素的个别样式*/

            #div2{background-repeat:repeat-x;}

            #div3{background-repeat:repeat-y;}

            #div4{background-repeat:no-repeat;}

            hr{border-color:red;}

        </style>

    </head>

    <body>

        <div id="div1">

            <h3>静夜思</h3>

            <p>窗前明月光,疑似地上霜。<br/>举头望明月,低头思故乡。</p>

        </div>

        <hr/>

        <div id="div2">

            <h3>静夜思</h3>

            <p>窗前明月光,疑似地上霜。<br/>举头望明月,低头思故乡。</p>

        </div>

        <hr/>

        <div id="div3">

            <h3>静夜思</h3>

            <p>窗前明月光,疑似地上霜。<br/>举头望明月,低头思故乡。</p>

        </div>

        <hr/>

        <div id="div4">

            <h3>静夜思</h3>

            <p>窗前明月光,疑似地上霜。<br/>举头望明月,低头思故乡。</p>

        </div>

    </body>

    </html>

    在浏览器预览效果如下:

    background-repeat属性实例

    分析:

    因为第一个div元素没有设置background-repeat属性值,因为浏览器会采用background-repeat默认值“repeat”,背景图片会在水平和垂直两个方向同时平铺。第二个div元素background-repeat属性值为“repeat-x”,因此背景图片会在水平方向(x轴)平铺。第三个div元素background-repeat属性值为“repeat-y”,因此背景图片会在垂直方向(y轴)平铺

    大家可能对hr元素的属性设置很奇怪,为什么设置hr的border-color属性值为red,hr的颜色就会改变,而不是设置hr的color属性为red或者background-color为red呢?这跟hr本身特点有关,在CSS进阶“hr的CSS设置”这一节我们会详细讲解到。

    注意:设置有背景图片的元素的宽或高大于背景图片本身的宽或高,才会有平铺效果。

    六、background-position属性

    背景位置属性用于设置背景图像的位置,这个属性只能应用于块级元素和替换元素。其中替换元素包括img、input、textarea、select和object。

    语法:

    background-positon:像素值/关键字;

    说明:

    语法中的取值包括两种,一种是采用像素值,另一种是关键字描述。

    1、background-position取值为“像素值”

    background-position取值为像素值时,要设置水平方向数值(x轴)和垂直方向数值(y轴)。例如:“background-position:12px 24px;”表示背景图片距离该元素左上角的水平方向位置是12px,垂直方向位置是24px。注意,这两个取值之间要用空格隔开。

    表1 background-positon属性的长度设置值
    设置值 说明
    x(数值) 设置网页的横向位置,单位为px
    y(数值) 设置网页的纵向位置,单位为px

    CSS入门教程中,全部都是使用像素作单位,在CSS进阶阶段我们会深入讲解其他CSS单位。

    举例:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title>background-position属性</title>

        <style type="text/css">

            #div1

            {

                width:400px;

                height:300px;

                border:1px solid gray;

                background-image:url("../App_images/lesson/run_cj/one piece.jpg");

                background-repeat:no-repeat;

                background-position:80px 40px;

            }

        </style>

    </head>

    <body>

        <div id="div1"></div>

    </body>

    </html>

    在浏览器预览效果如下:

    background-position属性

    注:预览图中红色字体是注释,方便读者理解。

    分析:

    在这个例子中,我们为id="div1"的元素设置了宽度width和高度height,并且设置了一个边框。

    background-position属性设置的水平方向距离和垂直方向距离是相对该元素的左上角而言的,大家细细体会一下上面的例子就很容易理解了。

    2、background-position取值为“关键字”

    当background-position取值为关键字时,也需要设置水平方向和垂直方向的值,只不过值不是使用px为单位的数值,而是使用关键字代替。

    表1 background-position属性的关键字设置值
    属性值 说明
    top left 左上
    top center 靠上居中
    top right 右上
    left center 靠左居中
    center center 正中
    right center 靠右居中
    bottom left 左下
    bottom center 靠下居中
    bottom right 右下

    举例:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title>background-position属性</title>

        <style type="text/css">

            #div1

            {

                width:240px;

                height:160px;

                border:1px solid gray;

                background-image:url("../App_images/lesson/run_cj/cartoongirl.gif");

                background-repeat:no-repeat;

                background-position:right center;

            }

        </style>

    </head>

    <body>

        <div id="div1"></div>

    </body>

    </html>

    在浏览器预览效果如下:

    background-position属性

    分析:

    “background-position:right center;”中“right center;”表示水平方向在右边(right),垂直方向在中间(center)。还有,由于图片是gif格式的动态图片,在浏览器还能看到图片在动喔。

    七、background-attachment属性

    在CSS中,使用背景附件属性background-attachment可以设置背景图像是随对象滚动还是固定不动。

    语法:

    background-attachment:scroll/fixed;

    说明:

    background-attachment 属性只有2个属性值。scroll表示背景图像随对象滚动而滚动,是默认选项;fixed表示背景图像固定在页面不动,只有其他的内容随滚动条滚动。

    举例:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title>background-attachment属性</title>

        <style type="text/css">

            #div1

            {

                width:160px;

                height:1200px;

                border:1px solid gray;

                background-image:url("../App_images/lesson/run_cj/cartoongirl.gif");

                background-repeat:no-repeat;

                background-attachment:fixed;

            }

        </style>

    </head>

    <body>

        <div id="div1"></div>

    </body>

    </html>

    在浏览器预览效果如下:

    background-attachment属性

    分析:

    大家在浏览器中拖动右边的滚动条会发现,背景图片在页面固定不动。

    在IE或者360中设置background-attachment之后不能设置background-position属性,不然图片没办法在浏览器显示。大家可以测试一下google浏览器、Firefox浏览器。

    8、超链接样式

    一、超链接伪类简介

    在所有浏览器中,超链接的样式如下:

    超链接样式

    我们可以看出链接在鼠标点击不同时期的样式是不一样的。

    • (1)默认情况:字体为蓝色,带有下划线;
    • (2)鼠标点击时:字体为红色,带有下划线;
    • (3)鼠标点击后:字体为紫色,带有下划线;

    注:点击时,指的是点击超链接的一瞬间,字体是红色的。这个样式变化是一瞬间的事情。

    1、如何去除超链接下划线

    超链接默认情况下带有下划线,看起来挺难看的,而且用户体验也不好。在CSS中,一般使用“text-decoration:none”来去除超链接下划线,我们在“下划线、删除线和顶划线”这一节已经详细讲解了text-decoration属性

    语法:

    text-decoration:none;

    举例:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title>去掉超链接默认样式</title>

        <style type="text/css">

            .a2{text-decoration:none;}

        </style>

    </head>

    <body>

        <a href="http://www.lvyestudy.com" class="a1">绿叶学习网</a><br/>

        <a href="http://www.lvyestudy.com" class="a2">绿叶学习网</a>

    </body>

    </html>

    在浏览器预览效果如下:

    去掉超链接默认样式

    分析:

    由于第二个a标签应用了“text-decoration:none”,因此它的下划线被去掉了。

    2、如何定义超链接伪类

    在CSS中,我们使用超链接伪类来定义超链接在不同时期的不同样式。

    语法:

    1

    2

    3

    4

    a:link{CSS样式}

    a:visited{CSS样式}

    a:hover{CSS样式}

    a:actived{CSS样式}

    说明:

    表1 使用伪类定义动态超链接
    属性 说明
    a:link 定义a元素未访问时的样式
    a:visited 定义a元素访问后的样式
    a:hover 定义鼠标经过显示的样式
    a:active 定义鼠标单击激活时的样式

    定义这四个伪类,必须按照“link、visited、hover、active”的顺序进行,不然浏览器可能无法正常显示这4种样式。请记住,这4种样式定义顺序不能改变!

    大家可能觉得比较难把这个样式顺序记忆。没关系,对于掌握俺有一个挺好的方法。“love hate”,看到了么,这样就记住了。我们把超链接伪类的顺序规则称为“爱恨原则”。大家以后写代码的时候想起“爱恨原则”,自然而然就写出来了。

    举例:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title>超链接伪类</title>

        <style type="text/css">

            #div1

            {

                width:100px;

                height:30px;

                line-height:30px;

                border:1px solid #CCCCCC;

                text-align:center;

                background-color: #40B20F;

            }

            a{text-decoration:none;font-size:18px;}

            a:link{color:white}

            a:visited{color: purple; }

            a:hover{color:yellow;text-decoration:underline;}

            a:active{color:red;}

        </style>

    </head>

    <body>

        <div id="div1">

            <a href="http://www.lvyestudy.com">绿叶学习网</a>

        </div>

    </body>

    </html>

    在浏览器预览效果如下:

    超链接伪类

    鼠标经过样式如下:

    鼠标经过样式

    点击链接时样式如下:

    点击链接时样式

    注:点击链接是一瞬间的事情,大家请留意一下超链接的样式变化。

    在此学习了CSS超链接伪类,我们可以使用CSS伪类向文本链接添加复杂而多样的样式。

    3、深入了解超链接伪类

    大家可能开始有疑问了,是不是每一个超链接都必须要定义4种状态的样式呢?答案是否定的。一般情况下,我们只用到2种状态:未访问状态和鼠标经过状态。大家仔细观察一下绿叶学习网的导航就知道了,绿叶导航也只是定义了这2种状态。

    未访问状态,我们直接在a标签定义就行了,没必要使用“a:link”。

    语法:

    1

    2

    a{CSS样式}

    a:hover{CSS样式}

    举例:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title>超链接伪类</title>

        <style type="text/css">

             #div1

            {

                width:100px;

                height:30px;

                line-height:30px;

                border:1px solid #CCCCCC;

                text-align:center;

                background-color: #40B20F;

            }

            a{text-decoration:none;color:purple}

            a:hover{color:white}

        </style>

    </head>

    <body>

        <div id="div1">

            <a href="http://www.lvyestudy.com">绿叶学习网</a>

        </div>

    </body>

    </html>

    在浏览器预览效果如下:

    :hover伪类

    鼠标经过时样式如下:

    :hover伪类

    疑问

    1、很多人觉得按照正常人思维来说,超链接样式的定义顺序应该是“未访问样式、鼠标经过样式、点击时样式、访问后样式”,但是为什么定义超链接样式必须要按照“未访问样式、访问后样式、鼠标经过样式、点击时样式”才能在浏览器中正常显示这4种样式呢?

    这个问题是新手经常问到的问题,其实这是W3C官方规定的,也许官方的思维跟我们的不一样。规则这种东西嘛,一般都是官方定的,就像交通规则一样,我们只需要遵守就行了,没必要纠结为什么绿灯走而红灯停。

    不过我们也有很好的记忆方法,大家不用担心。那就是“爱恨原则”。爱她,是因为超链接伪类让超链接变得更“美丽”;恨她,是因为顺序太难记。所以我们对她又爱又恨。

    二、深入了解:hover伪类

    在“超链接伪类”这一节,我们知道“a:hover”是定义鼠标经过超链接(a标签)时的样式。不仅是初学者,甚至包括很多学习CSS很久的人都以为“:hover”只限于a标签,都觉得“:hover”唯一的作用就是定义鼠标经过超链接(a标签)时的样式。

    你要是那样理解,那你就埋没了一个功能强大的CSS技巧了!请记住,“:hover”伪类可以定义任何一个元素在鼠标经过时的样式!

    语法:

    元素:hover{}

    说明:

    “元素”可以是任意的块元素和行内元素

    举例1:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title>:hover伪类</title>

        <style type="text/css">

            #div1

            {

                width:100px;

                height:30px;

                line-height:30px;

                border:1px solid #CCCCCC;

                text-align:center;

                color:white;

                background-color: #40B20F;

            }

            #div1:hover{background-color: #286E0A;}

            img:hover{border:1px solid red;}

        </style>

    </head>

    <body>

        <div id="div1">绿叶学习网</div>

        <img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>

    </body>

    </html>

    在浏览器预览效果如下:

    :hover伪类

    鼠标经过时样式如下:

    CSS :hover伪类

    分析:

    鼠标经过div层时,我们改变了它的背景颜色,而鼠标经过img图片时,我们为图片添加了一个红色边框。

    “:hover”伪类应用非常广泛,在绿叶学习网中也大量使用,大家仔细观察一下绿叶学习网就知道了

    三、鼠标样式

    1、cursor属性

    在CSS中,使用cursor属性来定义鼠标的样式。

    语法:

    cursor:属性值;

    说明:

    cursor属性取值如下,默认值为default。大家可能会惊呆,我晕,cursor属性值这么多,怎么记呀?其实大家不用担心,在实际开发中,我们一般只用到“default”和“pointer”这两个属性值,其他的一般都很少用得上。如果实在没办法还需要其他的,那就回来查这种表就行了。

    cursor属性值列表

    举例:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title>cursor属性</title>

        <style type="text/css">

            div

            {

                width:100px;

                height:30px;

                line-height:30px;

                text-align:center;

                border:1px solid #CCCCCC;

                background-color: #40B20F;

                color:white;

                font-size:14px;

                font-weight:bold;

            }

            #div_default{cursor:default;}

            #div_pointer{cursor:pointer;}

        </style>

    </head>

    <body>

        <div id="div_default">鼠标默认样式</div>

        <div id="div_pointer">鼠标手状样式</div>

    </body>

    </html>

    在浏览器预览效果如下:

    cursor属性

    分析:

    我们可以看到,默认情况下鼠标是斜箭头。

    大家请记住,一般情况下,我们只需要采用浏览器默认的鼠标样式就可以了,如果实在特别需要的时候可以用“cursor:pointer;”。对于cursor的其他属性值,我们一般用不上。因此大家无需花力气去记忆这些没用的属性。

    9、图片样式

    一、图片大小width和height

    在之前的课程例子中,我们接触了width和height这两个属性,这两个属性分别是用来设置元素的宽度和高度的。

    在CSS中,对于图片的大小,我们也是用width和height来定义。

    语法:

    1

    2

    width:像素值;

    height:像素值;

    说明:

    在CSS初学阶段,全部都是使用像素作单位,在CSS进阶阶段我们会深入讲解其他CSS单位

    举例:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title></title>

        <style type="text/css">

            img{width:60px;height:60px;}

        </style>

    </head>

    <body>

        <img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>

    </body>

    </html>

    在浏览器预览效果如下:

    图片width和height属性

    分析:

    不管图片的实际大小是多少,你都可以使用width和height来定义你想要的高度和宽度。大家别傻乎乎的还用PS做好高度和宽度才敢把那张图片用到页面上。

    二、图片边框border

    在“CSS边框border”这一节我们详细讲解了边框border属性。在CSS中,对于图片的边框,我们也是使用border属性来定义。

    语法:

    1

    2

    3

    border-width:像素值;

    border-style:属性值;

    border-color:颜色值;

    注:或者使用border简洁写法,如“border:1px solid gray;”。

    说明:

    如果大家忘了border属性,请自行回去复习一下。

    举例1:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title>图片边框border</title>

        <style type="text/css">

            img

            {

                width:60px;

                height:60px;

                border:1px solid red;

            }

        </style>

    </head>

    <body>

        <img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>

    </body>

    </html>

    在浏览器预览效果如下:

    CSS图片边框

    举例2:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title>图片边框border</title>

        <style type="text/css">

            img{width:60px;height:60px;}

            img:hover{border:1px solid gray;}

        </style>

    </head>

    <body>

        <img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>

    </body>

    </html>

    在浏览器预览效果如下:

    图片边框border属性

    分析:

    在这个例子中,我们使用了“:hover伪类”,来定义鼠标经过图片时会出现灰色边框。

    三、图片水平对齐text-align

    在“文本水平对齐text-align”这一节我们详细讲解了text-align属性。大家请记住,text-align一般只用在两个地方:文本水平对齐和图片水平对齐。也就是说,text-align只对文本和img标签有效,对其他标签无效。

    语法:

    text-align:属性值;

    说明:

    text-align属性取值如下表:

    表1 text-align属性
    text-align属性值 说明
    left 默认值,左对齐
    center 居中对齐
    right 右对齐

    举例:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title>图片水平对齐</title>

        <style type="text/css">

            div

            {

                width:300px;

                height:80px;

                border:1px solid gray;

            }

            .div_img1{text-align:left;}

            .div_img2{text-align:center;}

            .div_img3{text-align:right;}

            img{width:60px;height:60px;}

        </style>

    </head>

    <body>

        <div class="div_img1">

            <img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>

        </div>

        <div class="div_img2">

            <img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>

        </div>

        <div class="div_img3">

            <img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>

        </div>

    </body>

    </html>

    在浏览器预览效果如下:

    CSS图片水平对齐

    分析:

    很多人都以为设置图片水平对齐是在img标签设置,其实这是错误的。大家记住,图片是要在父元素中进行水平对齐的。在这个例子中,img元素的父元素是div,img元素是相对于div元素进行水平对齐的。因此要想对图片进行水平对齐,就要在父元素(div元素)中设置text-align属性

    四、CSS图片垂直对齐vertical-align属性

    在上一节我们介绍了使用text-align属性来定义图片水平对齐方式,我们看一下上一节的预览图:

    vertical-align属性

    大家就开始有疑问了,图片水平对齐我们实现了,那如果想对图片进行垂直对齐呢?

    在CSS中,我们可以使用vertical-align属性来定义图片的垂直对齐方式。

    语法:

    vertical-align:属性值;

    说明:

    vertical即“垂直的”,align即“使排整齐”。大家记忆CSS属性要跟在HTML入门教程中记忆HTML标签一样,根据英文意思去记忆就事半功倍了。

    vertical-align属性取值如下表:

    表1 vertical-align属性取值
    vertical-align属性取值 说明
    top 顶部对齐
    middle 中部对齐
    baseline 基线对齐
    bottom 底部对齐

    vertical-align还有sub、super等一些属性值,对于这些我们不需要去理会,因为在实际开发中压根儿用不上。我们只需要使用以上这4个属性值就完全足够了。

    举例1:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title>vertical-align属性</title>

        <style type="text/css">

            img{width:80px;height:80px;}

            #img_1{vertical-align:top;}

            #img_2{vertical-align:middle;}

            #img_3{vertical-align:bottom;}

            #img_4{vertical-align:baseline;}

        </style>

    </head>

    <body>

        绿叶学习网<img id="img_1" src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>绿叶学习网(<strong>top</strong>)

        <hr/>

        绿叶学习网<img id="img_2" src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>绿叶学习网(<strong>middle</strong>)

        <hr/>

        绿叶学习网<img id="img_3" src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>绿叶学习网(<strong>bottom</strong>)

        <hr/>

        绿叶学习网<img id="img_4" src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>绿叶学习网(<strong>baseline</strong>)

    </body>

    </html>

    在浏览器预览效果如下:

    CSS图片垂直对齐

    分析:

    大家仔细观察一下,“vertical-align:baseline”和“vertical-align:bottom”是有区别的。

    举例2:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title>vertical-align属性</title>

        <style type="text/css">

            div

            {

                width:100px;

                height:80px;

                border:1px solid gray;

            }

            .div_img1{vertical-align:top;}

            .div_img2{vertical-align:middle;}

            .div_img3{vertical-align:bottom;}

            img{width:60px;height:60px;}

        </style>

    </head>

    <body>

        <div class="div_img1">

            <img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>

        </div>

        <div class="div_img2">

            <img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>

        </div>

        <div class="div_img3">

            <img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>

        </div>

    </body>

    </html>

    在浏览器预览效果如下:

    vertical-align属性

    分析:

    咦?!怎么回事?怎么图片没有按照预期的进行垂直对齐?啊,其实大家误解了vertical-align属性了,vertical-align属性定义是:vertical-align属性定义行内元素相对于该元素的垂直对齐方式。

    在这里,大家可能就会想,那怎么在一个元素内设置该元素中的img标签相对于该元素垂直对齐呢?这个问题,我们就留在“CSS进阶教程”中给大家详细讲解。

    大家若不知道行内元素是什么东西,请点击这里→“块元素和行内元素”。

    疑问

    其实vertical-align属性top、middle、bottom、baseline这4个属性值并不是你想象中的那么简单易懂,有了一定CSS基础,你可以深入去了解vertical-align属性。

    五、文字环绕效果-初识float

    1、float属性

    在网页布局的过程中,常常遇到图文混排的效果。图文混排,也就是文字环绕着图片进行布局。文字环绕图片的方式在实际页面中的应用非常广泛,如果再配合内容、背景等多种手段便可以实现各种绚丽的效果。

    在CSS中,使用浮动属性float可以设置文字在某个元素的周围,它能应用于所有的元素。

    语法:

    float:取值;

    说明:

    float属性的取值很简单也很容易记忆,就2个属性值:

    表1 float属性取值
    float属性值 说明
    left 元素向左浮动
    right 元素向右浮动

    默认情况下,元素是不浮动的。这个表忽略“none”和“inherit”这2个一辈子派不上场的属性值,大家也不需要花心思去理会“none”和“inherit”这2个属性值。

    举例:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title>CSS浮动float属性</title>

        <style type="text/css">

           img{float:left;}

           p{font-size:16px;text-indent:28px;}

        </style>

    </head>

    <body>

        <img src="images/ailianshuo.jpg" alt=""/>

        <p>水陆草木之花,可爱者甚蕃。晋陶渊明独爱菊。自李唐来,世人甚爱牡丹。予独爱莲之出淤泥而不染,濯清涟而不妖,中通外直,不蔓不枝,香远益清,亭亭净植,可远观而不可亵玩焉。予谓菊,花之隐逸者也;牡丹,花之富贵者也;莲,花之君子者也。噫!菊之爱,陶后鲜有闻;莲之爱,同予者何人? 牡丹之爱,宜乎众矣。</p>

    </body>

    </html>

    在浏览器预览效果如下:

    float属性

    分析:

    细心的读者可能会发现,文本的顶部与图片的顶部怎么不水平对齐,就像下图那样呢?

    CSS float属性

    这是由于在某些浏览器下,p元素具有默认样式,就像strong元素默认加粗一样。要实现上图那样的效果,这就要去除元素的浏览器默认样式。对于如何去除元素的浏览器默认样式,我们可以在“CSS进阶教程”的“CSS reset”这一节学习到。现在大家不需要理会,循序渐进地跟着学习就行了。

    此外,大家可以在上面例子的“在线代码测试工具”中,将“float:left;”改为“float:right”,看看效果是怎样的。

    2、设置图片与文字的间距

    文字紧紧环绕在图片周围,如果希望图片本身与文字有一定的距离,只需要给<img>标签添加margin属性即可。margin指的是“外边距”,我们在接下来的“CSS盒子模型”会详细讲解到。

    margin属性包括margin-top(上外边距)、margin-bottom(下外边距)、margin-left(左外边距)、margin-right(右外边距)。

    语法:

    1

    2

    3

    4

    margin-top:像素值;

    margin-bottom:像素值;

    margin-left:像素值;

    margin-right:像素值;

    举例:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title>CSS浮动float属性</title>

        <style type="text/css">

           img{margin-right:20px;margin-bottom:20px;float:left;}

        </style>

    </head>

    <body>

        <img src="../App_images/lesson/run_cj/ailianshuo.jpg" alt=""/>

        <p>水陆草木之花,可爱者甚蕃。晋陶渊明独爱菊。自李唐来,世人甚爱牡丹。予独爱莲之出淤泥而不染,濯清涟而不妖,中通外直,不蔓不枝,香远益清,亭亭净植,可远观而不可亵玩焉。予谓菊,花之隐逸者也;牡丹,花之富贵者也;莲,花之君子者也。噫!菊之爱,陶后鲜有闻;莲之爱,同予者何人? 牡丹之爱,宜乎众矣。</p>

    </body>

    </html>

    在浏览器预览效果如下:

    CSS浮动

    分析:

    “img{margin-right:20px;margin-bottom:20px;}”表示设置图片img元素的右边距为20px,下边距也是20px。

    在“CSS盒子模型”这一章,我们会详细讲解margin属性。

    10、列表样式

    一、元素中定义列表项符号list-style-type

    HTML入门教程中,有序列表无序列表的列表项符号都是使用type属性来定义的。我们先来回顾一下。

    1、有序列表

    语法:

    1

    2

    3

    4

    5

    <ol type="属性值">

        <li>有序列表项</li>

        <li>有序列表项</li>

        <li>有序列表项</li>

    </ol>

    表1 有序列表type属性
    type属性值 列表项的序号类型
    1 数字1、2、3……
    a 小写英文字母a、b、c……
    A 大写英文字母A、B、C……
    i 小写罗马数字i、ii、iii……
    I 大写罗马数字I、II、III……

    2、无序列表

    语法:

    1

    2

    3

    4

    5

    <ul type="属性值">

        <li>有序列表项</li>

        <li>有序列表项</li>

        <li>有序列表项</li>

    </ul>

    表2 无序列表type属性
    type属性值 列表项的序号类型
    disc 默认值,实心圆“●”
    circle 空心圆“○”
    square 实心正方形“■”

    二、CSS中定义列表项符号

    type属性来定义列表项符号,那是在元素属性中定义的。但是我们之前说过,标签和样式是应该分离的,那在CSS中怎么定义列表项符号呢?

    在CSS中,不管是有序列表还是无序列表,都统一使用list-style-type属性来定义列表项符号。

    语法:

    list-style-type:属性值;

    说明:

    list-style-type属性取值如下:

    表3 有序列表list-style-type属性取值
    list-style-type属性值 说明
    decimal 默认值,数字1、2、3……
    lower-roman 小写罗马数字i、ii、iii……
    upper-roman 大写罗马数字I、II、III……
    lower-alpha 小写英文字母a、b、c……
    upper-alpha 大写英文字母A、B、C……
    表4 无序列表list-style-type取值
    list-style-type属性值 说明
    disc 默认值,实心圆“●”
    circle 空心圆“○”
    square 实心正方形“■”
    表5 去除列表项符号
    list-style-type取值 说明
    none 去除列表项符号

    举例1:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title>list-style-type属性</title>

        <style type="text/css">

            ol{list-style-type: lower-roman ;}

            ul{list-style-type: circle ;}

        </style>

    </head>

    <body>

        <p>有序列表</p>

        <ol>

            <li>HTML</li>

            <li>CSS</li>

            <li>JavaScript</li>

        </ol>

        <p>无序列表</p>

        <ul>

            <li>HTML</li>

            <li>CSS</li>

            <li>JavaScript</li>

        </ul>

    </body>

    </html>

    list-style-type属性

    举例2:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title>list-style-type属性</title>

        <style type="text/css">

            ol,ul{list-style-type:none;}

        </style>

    </head>

    <body>

        <p>有序列表</p>

        <ol>

            <li>HTML</li>

            <li>CSS</li>

            <li>JavaScript</li>

        </ol>

        <p>无序列表</p>

        <ul>

            <li>HTML</li>

            <li>CSS</li>

            <li>JavaScript</li>

        </ul>

    </body>

    </html>

    list-style-type属性

    分析:

    “ol,ul{list-style-type:none;}”使用的是CSS选择器中的群组选择器。多个不同元素定义了相同的CSS样式,就可以使用群组选择器。在群组选择器中,元素之间是用逗号隔开,记住是英文的逗号,中文逗号无效。

    使用“list-style-type:none”这个小技巧可以去除列表项默认的符号,在实际开发中,我们经常要用到。

    二、自定义列表项符号list-style-image

     

    不管是有序列表,还是无序列表,都有它们自身的列表项符号。但是默认的列表项符号都比较丑,那如果我们想自定义列表项符号,那该怎么实现呢?

    在CSS中,我们可以使用list-style-image属性来自定义列表项符号。

    语法:

    list-style-image:url(图像地址);

    说明:

    图像地址可以是相对地址,也可以是绝对地址。请查看“相对路径和绝对路径

    举例:

    我们把下面这个小图标自定义为列表项符号:

    list-style-image属性

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title>list-style-image属性</title>

        <style type="text/css">

            ul{list-style-image:url("../App_images/lesson/run_cj/list.png");}

        </style>

    </head>

    <body>

        <ul>

            <li>HTML</li>

            <li>CSS</li>

            <li>JavaScript</li>

        </ul>

    </body>

    </html>

    在浏览器预览效果如下:

    list-style-image属性

    分析:

    自定义列表项符号,实际上就是列表项符号改为一张图片,而引用一张图片就要给出它的引用路径。

    11、表格样式

    一、表格边框合并border-collapse

    在了解什么叫“表格边框合并”之前,我们先来看一下在默认情况下表格加入边框是怎样的一个效果。

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36

    37

    38

    39

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title></title>

        <style type="text/css">

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

        </style>

    </head>

    <body>

        <table>

            <caption>表格标题</caption>

            <!--表头-->

            <thead>

                <tr>

                    <th>表头单元格1</th>

            <th>表头单元格2</th>

                </tr>

            </thead>

            <!--表身-->

            <tbody>

                <tr>

                    <td>标准单元格1</td>

                    <td>标准单元格2</td>

                </tr>

                <tr>

                    <td>标准单元格1</td>

                    <td>标准单元格2</td>

                </tr>

            </tbody>

            <!--表脚-->

            <tfoot>

                <tr>

                    <td>标准单元格1</td>

                    <td>标准单元格2</td>

                </tr>

            </tfoot>

        </table>

    </body>

    </html>

    在浏览器预览效果如下:

    border-collapse属性

    <thead>、<tbody>和<tfoot>都是表格中语义化结构标签,这三个标签也是HTML代码语义化中非常重要的标签。详细内容请看“表格语义化标签”。

    大家可以看到了,表格加入边框的默认情况下,单元格与单元格之间有一定的空隙。那如果我们要去除单元格之间的空隙,那该怎么办呢?

    在CSS中,我们可以使用border-collapse属性来去除单元格之间的空隙。

    语法:

    border-collapse:属性值;

    说明:

    border-collapse是表格独有的属性。除了表格,在其他地方是用不上的。

    border-collapse属性取值如下:

    表1 border-collapse属性取值
    border-collapse属性值 说明
    separate 默认值,边框分开,不合并
    collapse 边框合并,如果相邻,则共用一个边框

    separate意思是“分离”,而collapse意思是“折叠,瓦解”。

    举例:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36

    37

    38

    39

    40

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title>border-collapse属性</title>

        <style type="text/css">

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

            table{border-collapse:collapse;}

        </style>

    </head>

    <body>

        <table>

            <caption>表格标题</caption>

            <!--表头-->

            <thead>

                <tr>

                    <th>表头单元格1</th>

            <th>表头单元格2</th>

                </tr>

            </thead>

            <!--表身-->

            <tbody>

                <tr>

                    <td>标准单元格1</td>

                    <td>标准单元格2</td>

                </tr>

                <tr>

                    <td>标准单元格1</td>

                    <td>标准单元格2</td>

                </tr>

            </tbody>

            <!--表脚-->

            <tfoot>

                <tr>

                    <td>标准单元格1</td>

                    <td>标准单元格2</td>

                </tr>

            </tfoot>

        </table>

    </body>

    </html>

    在浏览器预览效果如下:

    border-collapse属性举例

    分析:

    只需要在table元素中设置border-collapse属性值就行,没必要在th、td这些元素也设置,造成代码冗余。

    二、表格边框间距border-spacing

    我们知道表格加入边框默认情况下是如下图那样的:

    表格插入边框

    我们在上一节讲解了如何合并表格边框(消除表格边框间距)。但是在实际开发中,我们有可能要设置一下表格边框的间距。

    在CSS中,我们使用border-spacing属性来定义表格边框间距。

    语法:

    border-spacing:像素值;

    说明:

    该属性指定单元格边界之间的距离。当只指定了1个像素值时,这个值将作用于横向和纵向上的间距;当指定了2个length值时,第1个作用于横向间距,第2个作用于纵向间距。

    在CSS初学阶段,全部都是使用像素作单位,在CSS进阶中我们会深入讲解其他CSS单位。

    举例:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36

    37

    38

    39

    40

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title>border-spacing属性</title>

        <style type="text/css">

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

            table{border-spacing:5px 10px }

        </style>

    </head>

    <body>

        <table>

            <caption>表格标题</caption>

            <!--表头-->

            <thead>

                <tr>

                    <th>表头单元格1</th>

            <th>表头单元格2</th>

                </tr>

            </thead>

            <!--表身-->

            <tbody>

                <tr>

                    <td>标准单元格1</td>

                    <td>标准单元格2</td>

                </tr>

                <tr>

                    <td>标准单元格1</td>

                    <td>标准单元格2</td>

                </tr>

            </tbody>

            <!--表脚-->

            <tfoot>

                <tr>

                    <td>标准单元格1</td>

                    <td>标准单元格2</td>

                </tr>

            </tfoot>

        </table>

    </body>

    </html>

    在浏览器预览效果如下:

    border-spacing属性

    分析:

    "border-spacing:5px 10px"定义了单元格之间水平方向的间距为5px,垂直方向的间距为10px。

    border-spacing属性跟上节课学到的border-collapse属性一样,只需要在table元素设置就可以生效,没必要在th、td这些元素中设置,造成代码冗余。

    三、表格标题位置caption-side

    表格加入边框之后,默认样式情况如下图:

    表格加入边框

    如果我们想要调整表格标题,那该怎么办呢?

    在CSS中,我们使用caption-side属性来定义表格标题的位置。

    语法:

    caption-side:属性值;

    说明:

    caption-side属性取值如下:

    表1 caption-side属性取值
    caption-side属性值 说明
    top 默认值,标题在顶部
    bottom 标题在底部

    举例:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36

    37

    38

    39

    40

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title>caption-side属性</title>

        <style type="text/css">

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

            caption{caption-side:bottom}

        </style>

    </head>

    <body>

        <table>

            <caption>表格标题</caption>

            <!--表头-->

            <thead>

                <tr>

                    <th>表头单元格1</th>

            <th>表头单元格2</th>

                </tr>

            </thead>

            <!--表身-->

            <tbody>

                <tr>

                    <td>标准单元格1</td>

                    <td>标准单元格2</td>

                </tr>

                <tr>

                    <td>标准单元格1</td>

                    <td>标准单元格2</td>

                </tr>

            </tbody>

            <!--表脚-->

            <tfoot>

                <tr>

                    <td>标准单元格1</td>

                    <td>标准单元格2</td>

                </tr>

            </tfoot>

        </table>

    </body>

    </html>

    在浏览器预览效果如下:

    caption-side属性

    分析:

    表格标题是caption元素,设置表格标题位置,我们可以在caption元素或者table元素中设置,效果是一样的。但是一般情况下我们都在caption元素中设置。

    12、CSS盒子模型

    一、CSS盒子模型简介

    在之前的HTML入门教程中,我们学习了一个很重要的理论“块元素和行内元素”。在这一节中,我们将接触CSS中一个极其重要的理论,那就是“CSS盒子模型”理论。

    在“CSS盒子模型”理论中,所有页面中的元素都可以看成一个盒子,并且占据着一定的页面空间。

    一个页面由很多这样的盒子组成,这些盒子之间会互相影响,因此掌握盒子模型需要从两个方面来理解:一是理解单独一个盒子的内部结构,二是理解多个盒子之间的相互关系。

    每个元素都看成一个盒子,盒子模型是由content(内容)、padding(内边距)、margin(外边距)和border(边框)这四个属性组成的。此外,在盒子模型中,还有宽度width和高度height两大辅助性属性。

    记住,是所有的元素都可以看出一个盒子!

    下图为一个CSS盒子模型的内部结构:

    CSS盒子模型图1 CSS盒子模型

    从上图中我们可以得出盒子模型的属性如下:

    表1 盒子模型4个属性
    属性 说明
    border (边框)元素边框
    margin (外边距)用于定义页面中元素与元素之间的距离
    padding (内边距)用于定义内容与边框之间的距离
    content (内容)可以是文字或图片

    其中,padding称为“内边距”,也常常称为“补白”。图1中的margin-top指的是顶部外边距、margin-right指的是右部外边距,以此类推。

    1、内容区

    内容区是CSS盒子模型的中心,它呈现了盒子的主要信息内容,这些内容可以是文本、图片等多种类型。内容区是盒子模型必备的组成部分,其他的3部分都是可选的。

    内容区有3个属性:width、height和overflow。使用width和height属性可以指定盒子内容区的高度和宽度。在这里注意一点,width和height这两个属性是针对内容区而言,并不包括padding部分。

    当内容信息太多时,超出内容区所占范围时,可以使用overflow溢出属性来指定处理方法。对于overflow这个属性,我们在后面会详细讲解到。

    2、内边距

    内边距,指的是内容区和边框之间的空间,可以被看做是内容区的背景区域。

    关于内边距的属性有5种,即padding-top、padding-bottom、padding-left、padding-right以及综合了以上4个方向的简洁内边距属性padding。使用这5种属性可以指定内容区域各方向边框之间的距离

    3、边框

    在CSS盒子模型中,边框跟我们之前学过的边框是一样的。

    边框属性有border-width、border-style、border-color以及综合了3类属性的快捷边框属性border。

    其中border-width指定边框的宽度,border-style指定边框类型,border-color指定边框的颜色。

    “border-width:1px;border-style:solid;border-color:gray;”等价于“border:1px solid gray;”。

    4、外边距

    外边距,指的是两个盒子之间的距离,它可能是子元素与父元素之间的距离,也可能是兄弟元素之间的距离。

    外边距使得元素之间不必紧凑地连接在一起,是CSS布局的一个重要手段。

    外边距的属性也有5种,即margin-top、margin-bottom、margin-left、margin-right以及综合了以上4个方向的简洁内边距属性margin。

    同时,CSS允许给外边距属性指定负数值,当指定负外边距值时,整个盒子将向指定负值的相反方向移动,以此可以产生盒子的重叠效果。这就是传说中的“负margin技术”,我们将会在“CSS进阶教程”中给读者详细讲解这一个高大上的技术喔。

    内容区、内边距、边框、外边距这几个概念可能比较抽象,对于初学者来说,一时半会还没办法全部理解。不过没关系,待我们把这一章学习完再回顾这些概念就变得很简单了。

    二、CSS盒子模型实例

    举例:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title>CSS盒子模型</title>

        <style type="text/css">

            #main

            {

                display:inline-block;/*将块元素转换为inline-block元素*/

                border:1px solid #CCCCCC;

            }

            .lvye

            {

                display:inline-block; /*将块元素转换为inline-block元素*/

                padding:20px;

                margin:40px;

                border:1px solid red;

                background-color:#FCE9B8;

            }

            span{border:1px solid blue;background-color:#C5FCDF;}

        </style>

    </head>

    <body>

        <div id="main">

            <div class="lvye"><span>绿叶学习网</span></div>

        </div>

    </body>

    </html>

    在浏览器预览效果如下:

    CSS盒子模型实例

    我们把class为lvye的div层看做一个盒子,则浅蓝色部分为“内容区”,浅红色部分为“内边距区”,红色边框与灰色边框之间的空白为“外边距区”,红色的边框为该盒子的边框。

    盒子模型内容区

    当然,我们也可以把最外层的id为main的div层看做一个盒子(因为所有HTML元素都可以看做一个盒子来理解),那读者自己尝试一下,为最外层的id为main的div层添加内边距和外边距,然后思考一下该盒子的“内容”、“外边距”、“内边距”和“边框”分别是什么?

    我们从下面这种图可以很直观地去理解CSS盒子模型,读者要细细体会一下:

    CSS盒子模型

    三、宽度width和高度height

    CSS盒子模型中,我们可以看出,元素的宽度width和高度height是针对内容区而言的,大家要非常清楚这一点。很多初学者容易把补白也认为是内容区的一部分。

    CSS盒子模型

    语法:

    1

    2

    width:像素值;

    height:像素值

    说明:

    只有块元素能设置width和height,行内元素无法设置width和height。

    CSS入门教程中,全部都是使用像素作单位,在CSS进阶阶段我们会深入讲解其他CSS单位。

    举例:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title>宽度width和高度height</title>

        <style type="text/css">

            #main div

            {

                width:100px;

                height:30px;

                border:1px solid red;

            }

            #main span

            {

                width:100px;

                height:30px;

                border:1px solid blue;

            }

        </style>

    </head>

    <body>

        <div id="main">

            <div></div>

            <span></span>

        </div>

    </body>

    </html>

    在浏览器预览效果如下:

    盒子模型的width和height

    分析:

    “#main div{}”这个选择器表示选中id为#main的元素下面的子元素div,这是一个子元素选择器;而“#main span{}”这个选择器表示选中id为#main的元素下面的子元素span,这也是一个子元素选择器,忘记了的同学,记得回去翻翻“CSS选择器”喔。

    div元素是块元素,span是行内元素。因此div元素可以设置宽度width和高度height,而span元素无法设置宽度width和高度height。

    举例2:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title>宽度width和高度height</title>

        <style type="text/css">

            #main

            {

                border:1px dashed gray;

                padding:15px;

                display:inline-block;

                margin-top:100px;

                margin-left:100px;

            }

            .div1

            {

                width:100px;

                height:40px;

                border:1px solid silver;

            }

            .div2

            {

                width:100px;

                height:80px;

                border:1px solid silver;

            }

        </style>

    </head>

    <body>

        <div id="main">

            <div class="div1">绿叶学习网</div>

            <hr />

            <div class="div2">绿叶学习网</div>

        </div>

    </body>

    </html>

    在浏览器预览效果如下:

    width和height属性

    分析:

    由于div元素是块元素,因此可以设置width和height这两个属性。

    举例3:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title>宽度width和高度height</title>

        <style type="text/css">

            #main

            {

                border:1px dashed gray;

                padding:15px;

                display:inline-block;

                margin-top:100px;

                margin-left:100px;

            }

            .span1

            {

                width:100px;

                height:40px;

                border:1px solid silver;

            }

            .span2

            {

                width:200px;

                height:80px;

                border:1px solid silver;

            }

        </style>

    </head>

    <body>

        <div id="main">

            <span class="span1">绿叶学习网</span >

            <hr />

            <span class="span2">绿叶学习网</span >

        </div>;

    </body>

    </html>

    在浏览器预览效果如下:

    width属性和height属性

    分析:

    由于span元素是行内元素,因此span元素无法设置width和height这两个属性(设置了变无效)。

    如果我们想为span元素(行内元素)也设置高度和宽度,那怎么办呢?在CSS中,可以使用display属性来将行内元素转换为块元素,或者将块元素转换为行内元素。在“CSS进阶教程”,我们会详细讲解这个极其重要的属性。

    四、边框border

    在之前“边框”这一章,我们已经深入学习了边框属性。我们再次声明一下,对于border(边框)的值,我们在项目开发的时候,更多习惯用“简洁写法”。对于“border:1px solid gray;”这种简洁写法,第一个值指的是框的大小(border-width),第二个值指的是框的样式(border-style),第三个值指的是框的颜色(border-color)。

    语法:

    border:像素值 边框类型 颜色值

    说明:

    两个属性值之间一定要用空格隔开。

    举例:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title>CSS边框border</title>

        <style type="text/css">

            #main

            {

                width:100px;

                height:80px;

                border:2px dashed gray;

            }

        </style>

    </head>

    <body>

        <div id="main"></div>

    </body>

    </html>

    在浏览器预览效果如下:

    border属性

    五、 内边距padding

    内边距padding,又常常称为“补白”,它指的是内容区到边框之间的那一部分。

    CSS盒子模型

    1、padding 局部样式

    CSS盒子模型中,我们可以看出,内边距padding分为四个方向的内边距:padding-top、padding-right、padding-bottom、padding-left。

    语法:

    1

    2

    3

    4

    padding-top:像素值;

    padding-right:像素值;

    padding-bottom:像素值;

    padding-left:像素值;

    举例:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title>CSS内边距padding属性</title>

        <style type="text/css">

            #main

            {

                display:inline-block;/*将块元素转换为inline-block元素*/

                border:1px solid #CCCCCC;

            }

            .lvye

            {

                display:inline-block; /*将块元素转换为inline-block元素*/

                padding-top:20px;

                padding-right:40px;

                padding-bottom:60px;

                padding-left:80px;

                margin:40px;

                border:1px solid red;

                background-color:#FCE9B8;

            }

            span{border:1px solid blue;background-color:#C5FCDF;}

        </style>

    </head>

    <body>

        <div id="main">

            <div class="lvye"><span>绿叶学习网</span></div>

        </div>

    </body>

    </html>

    在浏览器预览效果如下:

    CSS内边距

    2、padding简洁写法

    我们可以使用padding属性来设置四个方向的内边距。在实际编程中,我们往往使用的是padding的这种高效简洁写法来编程。

    padding写法有3种,分别如下:

    语法:

    1

    2

    3

    padding:像素值;

    padding:像素值1 像素值2;

    padding:像素值1 像素值2 像素值3 像素值4;

    例如:

    “padding:20px;”表示四个方向的内边距都是20px;

    “padding:20px 40px;”表示padding-top和padding-bottom为20px,padding-right和padding-left为40px。

    “padding:20px 40px 60px 80px;”表示padding-top为20px,padding-right为40px,padding-bottom为60px,padding-left为80px。大家按照顺时针方向记忆就可以了。

    padding属性

    举例:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title>CSS内边距padding属性</title>

        <style type="text/css">

            #main

            {

                display:inline-block;/*将块元素转换为inline-block元素*/

                border:1px solid #CCCCCC;

            }

            .lvye

            {

                display:inline-block; /*将块元素转换为inline-block元素*/

                padding:40px 80px;

                margin:40px;

                border:1px solid red;

                background-color:#FCE9B8;

            }

            span{border:1px solid blue;background-color:#C5FCDF;}

        </style>

    </head>

    <body>

        <div id="main">

            <div class="lvye"><span>绿叶学习网</span></div>

        </div>

    </body>

    </html>

    在浏览器预览效果如下:

    补白padding

    六、 外边距margin

    外边距margin,指的是边框到父元素或者同级元素之间的那一部分。

    CSS盒子模型

    1、margin局部样式

    CSS盒子模型中,我们可以看出,内边距分为四个方向的内边距:margin-top、margin -right、margin -bottom、margin -left。这一点跟内边距padding非常相似。

    语法:

    1

    2

    3

    4

    margin-top:像素值;

    margin-right:像素值;

    margin-bottom:像素值;

    margin-left:像素值;

    举例:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title>CSS外边距margin属性</title>

        <style type="text/css">

            #main

            {

                display:inline-block;/*将块元素转换为inline-block元素*/

                border:1px solid #CCCCCC;

            }

            .lvye

            {

                display:inline-block; /*将块元素转换为inline-block元素*/

                padding:20px;

                margin-top:20px;

                margin-right:40px;

                margin-bottom:60px;

                margin-left:80px;

                border:1px solid red;

                background-color:#FCE9B8;

            }

            span{border:1px solid blue;background-color:#C5FCDF;}

        </style>

    </head>

    <body>

        <div id="main">

            <div class="lvye"><span>绿叶学习网</span></div>

        </div>

    </body>

    </html>

    在浏览器预览效果如下:

    margin属性

    2、margin简洁写法

    margin跟padding一样,也有简洁写法。我们可以使用margin属性来设置四个方向的外边距。在实际编程中,我们往往使用的是margin的这种高效简洁写法来编程。

    margin写法有3种,分别如下:

    语法:

    1

    2

    3

    margin:像素值;

    margin:像素值1 像素值2;

    margin:像素值1 像素值2 像素值3 像素值4;

    例如:

    “margin:20px;”表示四个方向的外边距都是20px;

    “margin:20px 40px;”表示margin-top和margin-bottom为20px,margin-right和margin-left为40px。

    “margin:20px 40px 60px 80px;”表示margin-top为20px,margin-right为40px,margin-bottom为60px,margin-left为80px。大家按照顺时针方向记忆就可以了。

    margin属性

    举例:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title>CSS外边距margin属性</title>

        <style type="text/css">

            #main

            {

                display:inline-block;/*将块元素转换为inline-block元素*/

                border:1px solid #CCCCCC;

            }

            .lvye

            {

                display:inline-block; /*将块元素转换为inline-block元素*/

                padding:20px;

                margin:40px 80px;

                border:1px solid red;

                background-color:#FCE9B8;

            }

            span{border:1px solid blue;background-color:#C5FCDF;}

        </style>

    </head>

    <body>

        <div id="main">

            <div class="lvye"><span>绿叶学习网</span></div>

        </div>

    </body>

    </html>

    在浏览器预览效果如下:

    CSS外边距

    13、浮动布局

    一、文档流简介

    1、什么是“正常文档流”?

    在学习浮动布局之前,我们先来认识一下什么叫“正常文档流”?深入了解正常文档流,对后续的浮动布局和定位布局是非常重要的一个前提,希望读者一定不要错过这一节的学习。

    什么叫文档流?简单来说,就是元素在页面出现的先后顺序。

    那什么叫“正常文档流”呢?我们先来看一下正常文档流的简单定义:正常文档流,将窗体自上而下分成一行一行,块元素独占一行,相邻行内元素在每行中按从左到右地依次排列元素。

    CSS文档流

    上面的HTML代码的文档流如下:

    1

    2

    3

    4

    5

    <div><div>

    <span></span><span><span>

    <p></p>

    <span></span><i><i><img/>

    <hr/>

    我们再好好看看下图就很容易理解了:

    CSS正常文档流

    说明:

    因为div、p、hr都是块元素,因此独占一行。而span、i、img都是行内元素,因此如果两个行内元素相邻,就会会位于同一行,并且从左到右排列。

    2、什么叫“脱离正常文档流”?

    脱离文档流是相对正常文档流而言的。正常文档流就是我们没有用CSS样式去控制的HTML文档结构,你写的界面的顺序就是网页展示的顺序。比如写了5个div元素。正常文档流就是按照依次显示这5个div元素。由于div元素是块元素,因此每个div元素独占一行:

    HTML代码:

    1

    2

    3

    4

    5

    <div id="div1"></div>

    <div id="div2"></div>

    <div id="div3"></div>

    <div id="div4"></div>

    <div id="div5"></div>

    正常文档流显示图1 正常文档流显示

    上图1就是按照正常文档流显示的效果图。

    然后,所谓的脱离文档流就是指它所显示的位置和文档代码的顺序不一致了,比如可以用CSS控制,把最后一个div元素显示在第一个div元素的位置,如下图:

    脱离文档流显示图2 脱离文档流显示

    在图2中,在不改变HTML代码顺序的前提下,我们可以通过CSS来将id="div5"的div元素从正常文档流“抽”出来,然后显示在其他div元素之前。在这种情况下,id="div5"的div元素就已经“脱离正常文档流”了。

    在CSS布局中,我们可以使用浮动或者定位这两种技术来实现“脱离正常文档流”,从而随心所欲地控制着页面的布局。

    “正常文档流”概念以及“脱离文档流的工作原理”在CSS中,也是非常重要的理论。这些理论比较抽象,大家在接下来课程的学习和训练中,要慢慢体会,并且要经常回来复习一下这些理论知识。

    二、浮动float简介

    在“文字环绕效果-初识float”这一节,我们已经接触过浮动是怎样一回事了。

    在传统的印刷布局中,文本可以按照实际需要来围绕图片。一般把这种方式称为“文本环绕”。在网页设计中,应用了CSS的float属性的页面元素就像在印刷布局里被文字包围的图片一样。

    浮动属性float是CSS布局的最佳利器,我们可以通过不同的浮动属性值灵活地定位div元素,以达到布局网页的目的。我们可以通过CSS的属性float使元素向左或向右浮动。也就是说,让盒子及其中的内容浮动到文档的右边或者左边。以往这个属性总应用于图像,使文本围绕在图像周围,不过在CSS中,任何元素都可以浮动。

    浮动元素会生成一个块级框,而不论它本身是何种元素。

    语法:

    float:取值;

    说明:

    float属性的取值很简单也很容易记忆,就2个属性值:

    表1 float属性
    float属性值 说明
    left 元素向左浮动
    right 元素向右浮动

    默认情况下,元素是不浮动的。这个表忽略“none”和“inherit”这2个一辈子派不上场的属性值,大家也不需要花心思去理会“none”和“inherit”这2个属性值。

    浮动的性质比较复杂,下面通过一个简单的实例讲解float属性的使用。

    举例:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36

    37

    38

    39

    40

    41

    42

    43

    44

    45

    46

    47

    48

    49

    50

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title>CSS浮动float属性</title>

        <style type="text/css">

            /*定义父元素样式*/

            #father

            {

                width:400px;

                background-color:#0C6A9D;

                border:1px solid silver;

            }

            /*定义子元素样式*/

            #father div

            {

                padding:10px;

                margin:15px;

                border:2px dashed red;

                background-color:#FCD568;

            }

            /*定义文本样式*/

            #father p

            {

                margin:15px;

                border:2px dashed red;

                background-color:#FCD568;

            }

            #son1

            {

                /*这里设置son1的浮动方式*/

            }

            #son2

            {

                /*这里设置son2的浮动方式*/

            }

            #son3

            {

                /*这里设置son3的浮动方式*/

            }

        </style>

    </head>

    <body>

        <div id="father">

            <div id="son1">box1</div>

            <div id="son2">box2</div>

            <div id="son3">box3</div>

            <p>这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,</p>

        </div>

    </body>

    </html>

    上面代码定义了4个div块,一个是父块,另外3个是它的子块。为了便于观察,将各个块都加上了边框以及背景颜色,并且让body以及各个div有一定的margin(外边距)。

    如果3个子块都没有设置浮动方式,在父盒子中,由于div元素是块元素,因此4个盒子各自向右伸展,并且自上而下排列,如下图:

    CSS浮动,float属性

    1、设置第1个div浮动

    1

    2

    3

    4

    5

    #son1

    {

        /*这里设置son1的浮动方式*/

        float:left;

    }

    在浏览器预览效果如下:

    设置第1个div浮动

    分析:

    由于box1设置为左浮动,box1变成了浮动元素,因此此时box1的宽度不再延伸,其宽度为容纳内容的最小宽度,而相邻的下一个div元素(box2)就会紧贴着box1,这是由于浮动引起的效果。

    大家可以在“在线代码测试工具”工具中,设置一下box1右浮动,看看是怎样的。

    2、设置第2个div浮动

    1

    2

    3

    4

    5

    #son2

    {

        /*这里设置son2的浮动方式*/

        float:left;

    }

    在浏览器预览效果如下:

    设置son2的浮动方式

    分析:

    由于box2变成了浮动元素,因此box2也跟box1一样,宽度不再延伸,而是由内容确定宽度。并且相邻的下一个div元素(box3)变成紧贴着浮动的box2。

    大家会觉得很奇怪,为什么这个时候box1和box2之间有一定的距离呢?其实原因是这样的:我们在CSS中设置了box1、box2和box3都有一定的外边距(margin:15px;),如果box1为浮动元素,而相邻的box2不是浮动元素,则box2就会紧贴着box1;但是如果box1和box2同时为浮动元素,外边距就会生效。这是由于浮动元素的特性决定的。大家不需要深究这个问题。“浮动”这个复杂的性质,我们只需要多加练习,慢慢就会感性认知它的各种性质。

    在这里,大家可以在在线工具中,设置一下box2右浮动,看看是怎样的。

    3、设置第3个div浮动

    1

    2

    3

    4

    5

    #son3

    {

        /*这里设置son3的浮动方式*/

        float:left;

    }

    在浏览器预览效果如下:

    float属性

    分析:

    由于box3变成了浮动元素,因此box3跟box2和box1一样,宽度不再延伸,而是由内容确定宽度,并且相邻的下一个p元素(box3)变成紧贴着浮动的box3。

    由于box1、box2和box3都是浮动元素,box1、box2和box3之间的margin属性生效。

    4、改变浮动的方向

    在这里,我们将box3浮动方式改为“float:right”,在浏览器预览效果如下:

    float:right

    float属性是CSS布局中非常重要的属性,我们常常通过对div元素应用float浮动来进行布局,不但对整个版式进行规划,也可以对一些基本元素,如导航等进行排列。

    浮动,这个属性对于初学者来说,并不能立刻掌握,需要经历过大量的练习,然后细细体会这些训练中。本教程精选了大量的练习,希望读者细细体会。

    三、清除浮动clear简介

    在CSS中,清除浮动都是在设置左浮动或者右浮动之后的元素内设置。

    语法:

    clear:取值;

    说明:

    clear属性取值如下:

    表1 clear属性值
    clear属性值 说明
    left 清除左浮动
    right 清除右浮动
    both 左右浮动一起清除

    使用clear属性清除浮动,我们比较少使用“clear:left;”或者“clear:right;”来判断是清除左浮动,还是清除右浮动。我们往往直截了当地使用“clear:both;”来把所有浮动清除,还省事。也就是说,我们在这一节只要学会“clear:both;”这一个属性就足够啦。

    举例:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36

    37

    38

    39

    40

    41

    42

    43

    44

    45

    46

    47

    48

    49

    50

    51

    52

    53

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title>CSS清除浮动</title>

        <style type="text/css">

            /*定义父元素样式*/

            #father

            {

                width:400px;

                background-color:#0C6A9D;

                border:1px solid silver;

            }

            /*定义子元素样式*/

            #father div

            {

                padding:10px;

                margin:15px;

                border:2px dashed red;

                background-color:#FCD568;

            }

            /*定义文本样式*/

            #father p

            {

                margin:15px;

                border:2px dashed red;

                background-color:#FCD568;

            }

            #son1

            {

                /*这里设置son1的浮动方式*/

                float:left;

            }

            #son2

            {

                /*这里设置son2的浮动方式*/

                float:left;

            }

            #son3

            {

                /*这里设置son3的浮动方式*/

                float:right;

            }

        </style>

    </head>

    <body>

        <div id="father">

            <div id="son1">box1</div>

            <div id="son2">box2</div>

            <div id="son3">box3</div>

            <p>这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,</p>

        </div>

    </body>

    </html>

    在浏览器预览效果如下:

    CSS清除浮动

    我们添加如下CSS样式:

    p{clear:both;}

    这个时候在浏览器预览效果如下:

    clear属性

    分析:

    由于p元素清除了浮动,所以p元素的前一个元素产生的浮动就不会对后续元素产生影响,因此p元素的文本不会环绕在浮动元素的周围。

    除了使用clear属性来清除浮动,还可以采用“overflow:hidden;”来清除浮动,在这里大家只需要了解一下即可。在“CSS进阶教程”,我们会详细讲解清除浮动都有哪些方法。

    对于CSS浮动CSS定位这些,你必须要通过实践才能真正掌握(绿叶学习网会不断改善,给你提供实践题目)。实践再回来看定义,就会很清楚了。

    14、定位布局

    一、CSS定位布局简介

    在上一章,我们学习了CSS浮动布局。浮动布局比较灵活,但是不容易控制。而定位布局的出现,使得用户精准定位页面中的任意元素成为可能,使得网页布局变得更加随心所欲。当然由于定位布局缺乏灵活性,也给空间大小和位置不确定的版面布局带来困惑。因此,在网页布局实战中,读者应该灵活使用这两种布局方式,满足个性设计需求。

    CSS定位使你可以将一个元素精确地放在页面上你指定的地方。联合使用定位和浮动,能够创建多种高级而精确地布局。

    定位的方法有很多种,它们分别是固定定位(fixed)、相对定位(relative)、绝对定位(absolute)和静态定位(static)。

    在接下来的学习中,我们一一为大家详细讲解这4种定位方式。

    二、CSS固定定位fixed

    固定定位是最直观而最容易理解的定位方式,先给大家介绍固定定位,来接触一下CSS定位布局是怎样一回事。

    当元素的position属性设置为fixed时,这个元素就被固定了,被固定的元素不会随着滚动条的拖动而改变位置。在视野中,固定定位的元素的位置是不会改变的。

    例如绿叶学习网右下方的“回顶部”。

    语法:

    1

    2

    3

    4

    5

    position:fixed;

    top:像素值;

    bottom;像素值;

    left:像素值;

    right:像素值;

    说明:

    “position:fixed;”是结合top、bottom、left和right这4个属性一起使用的,其中“position:fixed;”使得元素成为固定定位元素,接着使用top、bottom、left和right这4个属性来设置元素相对浏览器的位置。

    top、bottom、left和right这4个属性不一定全部都用到。注意,这4个值的参考对象是浏览器的4条边。

    在初学者阶段,都是使用“像素”作为单位。

    举例:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title>CSS固定定位</title>

        <style type="text/css">

            #first

            {

                width:120px;

                height:600px;

                border:1px solid gray;

                line-height:600px;

                background-color:#B7F1FF;

            }

            #second

            {

                position:fixed;/*设置元素为固定定位*/

                top:30px;/*距离浏览器顶部30px*/

                left:160px;/*举例浏览器左部160px*/

                width:60px;

                height:60px;

                border:1px solid silver;

                background-color:#FA16C9;

            }

        </style>

    </head>

    <body>

        <div id="first">无定位的div元素</div>

        <div id="second">固定定位的div元素</div>

    </body>

    </html>

    在浏览器预览效果如下:

    CSS固定定位

    分析:

    我们尝试拖动浏览器的滚动条,固定定位的div元素不会有任何位置改变,但是无定位的div元素会改变。

    position属性

    这里注意一下,我们在这里只使用了top和left属性来设置元素相对于浏览器顶边和左边的距离就可以设置该元素的位置了,top、bottom、left和right这4个属性不必全部用到,大家稍微想一下就懂了。

    position:fixed

    固定定位其实很简单,就是使用“position:fixed”设置某一个元素为固定定位,接着使用top、bottom、left和right这4个属性来设置一下元素相对浏览器的位置就可以了。固定定位用途也很多,一般用于“回顶部”特效和固定栏目的设置。

    三、CSS相对定位简介relative

    采用相对定位的元素,其位置是相对于它的原始位置计算而来的。相对定位是通过将元素从原来的位置向上、向下、向左或者向右移动来定位的。采用相对定位的元素会获得相应的空间。

    语法:

    1

    2

    3

    4

    5

    position:relative;

    top:像素值;

    bottom:像素值;

    left:像素值;

    right:像素值;

    说明:

    “position:relative;”是结合top、bottom、left和right这4个属性一起使用的,其中“position:relative;”使得元素成为相对定位元素,接着使用top、bottom、left和right这4个属性来设置元素相对原始位置。相对定位的容器浮上来后,其所占的位置仍然留有空位,后面的无定位元素仍然不会“挤上来”。

    在这里要非常清楚这一点:默认情况下,CSS相对定位元素的位置是相对于原始位置而言,而CSS固定定位元素的位置是相对浏览器而言!

    举例:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title>CSS相对定位</title>

        <style type="text/css">

            #father

            {

                margin-top:30px;

                margin-left:30px;

                border:1px solid silver;

                background-color: #B7F1FF;

            }

            #father div

            {

                width:100px;

                height:60px;

                margin:10px;

                border:1px solid silver;

                background-color:#FA16C9;

            }

            #son2

            {

                /*这里设置son2的定位方式*/

            }

        </style>

    </head>

    <body>

        <div id="father">

            <div id="son1">第1个无定位的div元素</div>

            <div id="son2">相对定位的div元素</div>

            <div id="son3">第2个无定位的div元素</div>

        </div>

    </body>

    </html>

    在浏览器预览效果如下:

    CSS相对定位relative

    分析:

    我们为将第2个div元素 改变为相对定位元素:

    1

    2

    3

    4

    5

    6

    7

    #son2

    {

        /*这里设置son2的定位方式*/

        position:relative;

        top:20px;

        left:40px;

    }

    在浏览器预览效果如下:

    position:relative;

    分析:

    在这里,可以清楚地看到,相对定位的元素的top和left属性是相对于该元素原始位置而言的,这一点跟固定定位的元素完全不一样的。

    四、CSS绝对定位absolute

    当元素的position属性值为absolute时,这个元素就变成了绝对定位元素。绝对定位在几种定位方法中使用最广泛,这种方法能够很精确地把元素移动到任意你想要的位置。

    一个元素变成了绝对定位元素,这个元素就完全脱离正常文档流了,绝对定位元素的前面或者后面的元素会认为这个元素并不存在,即这个元素浮于其他元素上面,它是独立出来的。

    什么叫“脱离正常文档流”,请参考“正常文档流”这一节。

    语法:

    1

    2

    3

    4

    5

    position:absolute;

    top:像素值;

    bottom:像素值;

    left:像素值;

    right:像素值;

    说明:

    “position:absolute;”是结合top、bottom、left和right这4个属性一起使用的,其中“position:absolute;”使得元素成为绝对定位元素,接着使用top、bottom、left和right这4个属性来设置元素相对浏览器的位置。

    现在,我们暂且可以这样理解:CSS固定定位元素和CSS绝对定位元素的位置是相对于浏览器而言,而CSS相对定位元素的位置是相对原始位置而言。

    举例:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title>CSS绝对定位</title>

        <style type="text/css">

            #father

            {

                padding:15px;

                background-color:#0C6A9D;

                border:1px solid silver;

            }

            #father div

            {

                padding:10px;

                background-color:#FCD568;

                border:1px dashed red;

            }

            #son2

            {

                /*在这里添加son2的定位方式*/

            }

        </style>

    </head>

    <body>

        <div id="father">

            <div id="son1">box1</div>

            <div id="son2">box2</div>

            <div id="son3">box3</div>

        </div>

    </body>

    </html>

    在浏览器预览效果如下:

    CSS绝对定位

    我们为第2个div元素son2添加如下代码:

    1

    2

    3

    4

    5

    6

    7

    #son2

    {

        /*在这里添加son2的定位方式*/

        position:absolute;

        top:0;

        right:0;

    }

    在浏览器预览效果如下:

    position:absolute;

    分析:

    至此,我们已经把最重要的3种定位方式都学完了,在初学者阶段,对于固定定位元素、相对定位元素和绝对定位元素,我们暂且这样记忆:默认情况下,固定定位元素和绝对定位元素的位置是相对于浏览器而言,而相对定位元素的位置是相对原始位置而言。

    大部分人看到这里就会疑惑了,“固定定位元素和绝对定位元素的位置是相对于浏览器而言,而相对定位元素的位置是相对原始位置而言”这句话真的正确吗?不正确!正确的描述要加一个前提→“默认情况下”。

    在这里,很多初学者会对各种定位元素的相对位置有很多的疑问,大家不要担心,浮动与定位可以说是CSS中最灵活和最困难的知识点。不过在“CSS进阶教程”中,我们会详细而深入地去学习,到时候,绿叶学友们就可以100%理解定位布局的本质。

    五、CSS静态定位static

    如果没有指定元素的position属性值,也就是默认情况下,元素是静态定位。只要是支持position属性的html对象都是默认为static。static是position属性的默认值,它表示块保留在原本应该在的位置,不会重新定位。

    说白了,平常我们根本就用不到“position:static”,不过呢,如果有时候我们使用javascript来控制元素定位的时候,如果想要使得其他定位方式的元素变成静态定位,就要使用“position:static;”来实现。

    在CSS入门阶段,大家只需要深入学习固定定位(fixed)、相对定位(relative)和绝对定位(absolute)就已经可以走得很远了。

    到这里,大家的CSS已经学得差不多了,从HTML到CSS,接下来的一步就是“JavaScript入门教程”了!

    展开全文
  • CSS样式表

    2020-11-24 14:38:57
    1、CSS行内式又称内联式 <!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS行内式</title> </head> <body> <!-- 行内式一般写在body标签...
  • CSS

    2020-06-15 23:07:27
    CSS的概念: 英文全称:Cascading Style Sheet 中文全称:层叠样式表 CSS的作用:用于美化网页:设置元素的样式 CSS三种样式的编写: 1.行内样式:css代码编写在标签的style属性中,样式代码只作用于当前标签 < ...
  • 前端【CSS

    2020-11-19 22:30:57
    前端【CSS】 层叠样式表(Cascading Style Sheets, CSS)是一种样式表语言,用于描述用标记语言编写的文档的表示。基本的格式和样式可以通过HTML来完成,但是最好是使用CSS。 web应用程序包含许多页面,无论是动态的...
  • 串口重定向
  • 史上最全的HTML、CSS知识点总结,浅显易懂。

    万次阅读 多人点赞 2014-10-19 10:00:23
    Javaweb、HTML+css知识点总结,浅显易懂,你把这些看完了,HTML和css知识点你也就会了。
  • HTML CSS 基础 面试题

    千次阅读 多人点赞 2017-06-26 11:36:24
    HTML CSS 基础 面试题
  • 前端 HTML5+CSS3基础知识一

    千次阅读 2020-02-16 19:29:06
    CSS3有哪些新特性? html5\CSS3有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTMLHTML5? 本地存储(Local Storage )和cookies(储存在用户本地终端上的数据)之间的区别是...
  • css实现html透明效果

    万次阅读 2009-10-16 15:42:00
    CSS3草案中定义了{opacity: | inherit;}来声明元素的透明度,这已经得到了大多数现代浏览器的支持,而IE则很早通过特定的私有属性filter来实现的,所以HTML元素的透明效果已经无处不在了。首先看看A级浏览器所支持的...
  • 前端HTML+CSS初级面试题汇总二

    千次阅读 多人点赞 2020-02-13 16:09:09
    什么是Css Hack?ie6,7,8的hack分别是什么? 行内元素和块级元素的具体区别是什么?行内元素的padding和margin可设置吗? 什么是外边距重叠?重叠的结果是什么? rgba()和opacity的透明效果有什么不同? css中可以...
  • 【转载】谷歌 HTML/CSS 规范

    千次阅读 2017-01-05 18:55:07
    【转载】谷歌 HTML/CSS 规范背景这篇文章定义了 HTMLCSS 的格式和代码规范,旨在提高代码质量和协作效率。通用样式规范协议省略图片、样式、脚本以及其他媒体文件 URL 的协议部分(http:,https:),除非文件在两...
  • 我想在webview中加一个文本页面,但是当页面检索时,我丢失了所有的样式信息,有可能CSS文件不能在webview中正确使用。 为了检索数据,我使用HTTP POST: public void postData() throws IOException, ...
  • 第3阶段:CSS3基础与加强 上 44前端开发基础视频-CSS定义与HTML结构之间的关系 第一节:CSS基础入门 1:CSS定义与编写CSS 2:CSS语法与选择器 3:CSS选择器优先级 4:CSS层叠和继承特性 CSS的定义 什么是CSS...
  • 关于grunt实现js,html,css编译压缩

    千次阅读 2014-12-31 16:43:54
    简单来说项目发布生产往往网站加载的效率,web项目提交效率有gzip等方式, 今天我们就共学习一下用grunt来最项目压缩。 首先要使用grunt就要先安装grunt,具体的安装方式 -----百度,这里不多讲。...
  • Html+css 实现级联菜单效果

    千次阅读 2011-05-26 17:41:00
    test menu
  • CSS部分代码如下: .flag_blod{ display:inline; font-weight:bolder; color:#943f00; } .flag_italic{ display:inline; font-style:italic; color:#276a9f; } 如果我把display:inline;...
  • 前端开发中会使用到各种各样的箭头,有时候不断替换图片实在麻烦,掌握这些css小技巧,轻松实现各种箭头。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="...
  • [HTML5&CSS3]20 个酷炫 应用及源码

    千次阅读 2014-11-21 09:39:23
    1、HTML5视频破碎重组特效,强大视觉冲击 HTML5视频播放器很多,但是HTML5视频特效还是很少见的,这款HTML5视频破碎重组特效非常刺激,给人强大的视觉冲击。点击视频任意地方,HTML5将会将这些区域击碎,过一段...
  • @CHARSET "UTF-8"; h1{ background-color: #ADD8e6; color: #256579; font:18px Verdana,Geneva,Arial,...```h1和body不管用,one,two,等管用,h1和body放在HTML中起作用,在css中不管用,求解决。。谢大神
  • 我在login.jsp中link一个css ``` <link type="text/css" rel="stylesheet" href="Resource/css/style.css" /> ``` 这是我的文件目录 ![图片说明]...
  • HTML布局之计算器(div+css)

    千次阅读 2015-04-07 11:01:18
    纯布局, 没有功能实现, 代码多但是不难, 可以作为参考. ...html(div)代码: 计算器 返回主页 计算器 查
  • 知识点:CSS复合选择器、CSS的继承、使用CSS设置字体样式和文本样式、使用CSS设置链接样式(伪类选择器)、使用CSS设置列表的样式。 1、CSS的高级应用 1.1 CSS复合选择器 CSS符合选择器是以标签选择器、类选择器...
  • 常见的页面布局方式:表格布局、DIV+CSS布局、框架布局。 表格布局:用来显示较多的数据,如OA系统、ERP系统或CRM系统。(一般用在局部) DIV+CSS布局:相对来说最灵活的布局方式,完全实现内容和样式的分离。 ...
  • HTML-Less和CSS

    千次阅读 2016-11-11 13:29:07
    LESS 是动态的样式表语言,通过简洁明了的语法定义,使编写 CSS 的工作变得非常简单。 本质上,LESS 包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成...
  • HTML5+CSS3基础响应式页面布局

    万次阅读 多人点赞 2018-01-08 18:20:18
    随着互联网时代的发展,我们对网页布局有了新的要求,大气,美观,能够在不同的设备上呈现令人焕然一新的效果。此时,一个全新的概念—响应式布局应运而生。它的诞生为我们的移动端布局带来了很大的便利。...
  • htmlcss、js加载顺序

    千次阅读 2016-01-09 16:05:03
    浏览器加载和渲染html的顺序 ...3. 如果遇到语义解释性的标签嵌入文件(JS脚本,CSS样式),那么此时IE的下载过程会启用单独连接进行下载。 4. 样式表在下载完成后,将和以前下载的所有样式表一起进行解

空空如也

1 2 3 4 5 ... 20
收藏数 10,952,784
精华内容 4,381,113
关键字:

css