css(Cascading style sheets):层叠样式表

1.图片替换技术

以下代码表示：点击百度logo的图片就会跳转到百度首页。

  1. <style >
  2.     .baidu｛
    　　/*宽高定义图片的宽高*/
  3.     width:154px
  4.     height:30px
  5.     border: 1px solid black
  6.     background: url(../...百度logo.png) no repeat
  7.     overflow:hidden /*超出隐藏*/
  8.     }
  9.     .baidu a{
  10.     line-height:200px
  11.     display:block /*分区块*/
  12. 　　}
  13. </style>
  14. <body>
  15.     <h1 class="baidu">
  16.         <a href="http://www.baidu.com">百度</a>
  17.     </h1>
  18. </body>

2.sprite图（雪碧图）

  1. <style>
  2. /*以下图片大小要使用ps来量出其图片的像素*/
  3. .sprite{
  4. /*定义图片大小*/
  5.     width:100px
  6.     height:80px
  7.     background: url(../..图片.jpg);
  8.     background-position:-10px -20px; /*使
  9.     图片能移到定义图片大小重合*/
  10.     }
  11. .sprite:hover{
  12.     background-position:-60px -30px;/*当鼠标移入时候显示另一张图片*/
  13. 　　}
  14. </style>
  15. <body>
  16. <div class="sprite"></div>
  17. </body>

3.背景

以下代码表示一张开始为红色背景的图片用20s的时间变成黑色背景的图，并且在浏览器上一直重复。

  1. <style>
  2.     .box{
  3.         width:300px
  4.         height:300px
  5.         background:red no repeat center;
  6.         animation: bian 20s infinite;
  7.  
  8.     }
  9.     @key frames bian {
  10.         from{
  11.         background:red
  12.         }
  13.         to{
  14.        background:black }
  15.         }
    　　｝
  16. </style>
  17. <body>
  18. <div class="box"></div>
  19. </body>

4.文本

  1. <style>
  2.     .text{
  3.         color:green;
  4.         font-size: 40px;
  5.         font-family: Fangsong;
  6.         font-weight:400;
  7.         font-style: litalic;
  8.         text-indent: 30px; /*文字缩进*/
  9.         letter-spacing: 10px; /*字间距*/
  10.         word-spacing: 10px; /*词间距*/
  11.         line-height: 20px;
  12.         text-decoration: underline;
  13.     }
  14.     .text1{
  15.         text-transform:capitalize /*文本英文首字母大写*/
  16.     }
  17. </style>
  18. <body>
  19.     <p class="text">学习 web 前端</p>
  20.     <p class="text1">learn web</p>
  21. </body>

css基础学习的更多相关文章

  1. HTML&CSS基础学习笔记—创建列表

    创建一张表格 很多时候我们需要在网页上展示一些数据,使用表格可以很好的来展示数据. 在HTML中<table>标签定义 表格. <table> </table> 添 ...

  2. CSS基础学习笔记

    一. CSS介绍 1. CSS概述:CSS(Cascading Style Sheets)指层叠样式表,极大提高了工作效率. 2. 基础语法: 属性大于1个之后,属性之间用分号隔开 如果大于1个单词, ...

  3. HTML&CSS基础学习笔记1.33-元素选择器

    元素选择器 最常见的 CSS 选择器是元素选择器.换句话说,文档的元素就是最基本的选择器: p { text-indent:10px; color:blue; } 什么情况下使用元素选择器,一般我们这 ...

  4. HTML&CSS基础学习笔记1.32-选择器是什么

    选择器是什么 选择器是CSS样式为了定位页面上的任意元素的一种方法. 选择器主要分为:元素标签选择器.通用选择器.类选择器.ID选择器.属性选择器.组合选择器.伪类选择器.伪元素选择器. 先做个了解, ...

  5. HTML&CSS基础学习笔记1.31-像素和相对长度

    像素和相对长度 之前的笔记中,我们提到过用属性width.height来设置图片的尺寸,它们的单元都是”px(像素)”.长度单位总结一下,目前比较常用到px(像素).em.% 百分比,要注意其实这三种 ...

  6. HTML&CSS基础学习笔记1.30-颜色的表达

    颜色的表述 在网页中的颜色设置是非常重要,CSS的属性有字体颜色(color).背景颜色(background-color).边框颜色(border)等,设置颜色的方法也有很多种: 1.英文命令颜色 ...

  7. HTML&CSS基础学习笔记1.29-灵活地使用样式

    灵活的使用样式 使用样式的感觉很棒吧! 刚我们使用的内联样式是给具体的标签加上样式,如果有多个标签的时候,我们用内联样式给标签加样式的时候就需要一个个的加过来,这样就很麻烦. 而如果我们使用内部样式表 ...

  8. HTML&CSS基础学习笔记1.28-给网页添加一个css样式

    CSS是什么? 当HTML配合CSS一起使用时,我们发现页面变得好看了很多.那么CSS到底是什么呢? CSS指层叠样式表 (Cascading Style Sheets),它主要是用于定义HTML标签 ...

  9. less.css基础学习，陆续更新中

    //基础//概念:动态样式语言,有很多语言的特性:变量,函数,运算等 //变量:通过一个简单的@+字母,数字下划线等,但不能以数字开头,不能关键字,保留字等//注意less.css是全局变量,除在函数 ...

随机推荐

  1. <转>lucene3.0 自学吧 四 termdocs

    http://www.cnblogs.com/LeftNotEasy/archive/2010/01/26/1656426.html http://www.doc100.net/bugs/t/5402 ...

  2. delphi 调用百度地图WEBSERVICE转换GPS坐标 转

    http://www.cnblogs.com/happyhills/p/3789864.html   百度地图的API说明 使用方法 第一步,申请密钥(ak),作为访问服务的依据: 第二步,按照请求参 ...

  3. C Primer Plus(第五版)9

    第 9 章 函数 在本章中你将学习下列内容: · 关键字: return (返回) · 运算符 * (一元) & (一元) · 函数及其定义方式. · 参数和返回值的使用方法. · 使用指针变 ...

  4. 十步让你调试mvc源码

    1.下载 mvc 当前版本的源码,地址:http://aspnetwebstack.codeplex.com/SourceControl/latest 2.编译源码,参考:http://www.cnb ...

  5. UVA 12651 Triangles

    You will be given N points on a circle. You must write a program to determine how many distinctequil ...

  6. MFC中，如何自定义用户消息

    1.用处 在多个类之间传递消息.当需要响应用户操作,本类却无法实现时,可以向系统发出消息.然后让系统中的需要的位置实现它. 2.方法 2.1定义这个消息,并让拥有者发送这个这个消息,传递一个整型参数 ...

  7. C语言，不是从hello world开始

    开始看C语言,主要是复习,所以就没必要从hello world开始了,写点例子熟悉下就好了. 使用公式℃=(5/9)(℉-32)打印下列华氏温度与摄氏温度对照表: #include <stdio ...

  8. 使用POI导入Excel异常Cannot get a text value from a numeric cell 解决

    POI操作Excel时因为Excel数据Cell有不同的类型,会出现Cannot get a text value from a numeric cell的异常错误. 异常原因:Excel数据Cell ...

  9. Android基础总结（10）——手机多媒体的运用：通知、短信、相机、视频播放

    Android提供了一系列的API,是我们可以在程序中调用很多手机的多媒体资源,从而编写出更加丰富的应用程序. 1.通知的使用 通知(Notification)是Android中比较有特色的一个功能, ...

  10. 简单的TCPIP 客户端 服务器

    // soClient.cpp : Defines the entry point for the console application. // #include "stdafx.h&qu ...