CSS的存在就是将网页的内容与内容展示的方式进行了分离。

使用CSS的方式有好几种,最常用的是通过引入外部CSS文件进行使用

HTML

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>链接外部CSS样式</title>
<link href="00_CSS使用示例.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table>
<tr>
<td>疯狂Java讲义</td>
</tr>
<tr>
<td>轻量级Java EE企业开发实战</td>
</tr>
<tr>
<td>疯狂Ajax讲义</td>
</tr>
</table>
</body>
</html>

CSS

/* 设置整个表格的背景色 */
table {
background-color: #003366;
width: 400px;
}
/* 设置单元格的背景色、字体等*/
td {
background-color: #fff;
font-family: "楷体_GB2312";
font-size: 20pt;
text-shadow: -8px 6px 2px #333;
}

其他使用CSS样式表的方法

导入外部样式表

<style type="text/css">

  @import "outer.css";

  @import url("mycss.css");

</style>

使用内部样式

<style type="text/css">

   样式定义

</style>

使用内联样式

style="

  样式定义

"

CSS小结

CSS的学习其实就两块内容,1 选择器 2 样式设置

其他都是都如何设置样式,设置成什么样式进行使用

CSS使用示例的更多相关文章

  1. CSS初始化示例代码

    CSS初始化示例代码 /* css reset www.admin10000.com */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code, ...

  2. JavaScript动态加载资源【js|css】示例代码

    在开发过程中会用到各种第三方的插件,或者自己写在单独文件中的js方法库或者css样式,在html头部总是需要写一大堆的script和link标签,如果想要自己实现动态的引入资源文件,可以使用开源的re ...

  3. css基础示例代码

    选择器 引入方式 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  4. 常用的CSS样式示例代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. CSS代码示例-背景属性(background)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. (转)雅虎工程师提供的css初始化示例代码

    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,b ...

  7. 04.CSS动画示例-->烟花

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 02.CSS动画示例-->鼠标悬停图片旋转

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 雅虎工程师提供的CSS初始化示例代码

    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,b ...

随机推荐

  1. 前端JavaScript之DOM事件操作

    DOM:文档对象模型,操作网页上的元素的API.比如让盒子移动.变色.轮播图等. 1.DOM(Document Object Moduel):文档对象模型 定义了访问和操作HTML文档的标准法,把HT ...

  2. Java开发.gitignore文件包含.iml,.log的看法

    有一个开源项目https://github.com/github/gitignore 主要用来规范所有开发项目的.gitignore文件的编写,基本涵盖了所有的开发语言.开发环境等.今日我向JetBr ...

  3. ES6初识-Symbol

    Symbol的概念 变量是独一无二的 let a1=Symbol(); let a2=Symbol(); a1和a2严格意义不相等 let a3=Symbol.for('a3'); let a4=Sy ...

  4. JavaScript: window.onload = function() {} 里面的函数不执行

    问题:写了一个最简单的页面.在script标签中使用的 window.onload = function() { function add() { //... } } 页面上:<div oncl ...

  5. 【例题收藏】◇例题·III◇ 木と整数 / Integers on a Tree

    ◇例题·III◇ 木と整数 / Integers on a Tree 只需要一个美妙的转换,这道题就会变得无比美妙…… 来源:+AtCoder 2148(ARC-063 E)+ ◆ 题目大意 给定一棵 ...

  6. 【LeetCode #179】Largest Number 解题报告

    原题链接:Largest Number 题目描述: Given a list of non negative integers, arrange them such that they form th ...

  7. 以CentOS为操作系统的vps或服务器安装lnmp运行环境的方法

    安装步骤: 1.使用putty或类似的SSH工具登陆VPS或服务器: 登陆后运行:screen -S lnmp 如果提示screen: command not found 命令不存在可以执行:yum ...

  8. python爬虫:爬取猫眼TOP100榜的100部高分经典电影

    1.问题描述: 爬取猫眼TOP100榜的100部高分经典电影,并将数据存储到CSV文件中 2.思路分析: (1)目标网址:http://maoyan.com/board/4 (2)代码结构: (3) ...

  9. 将Mnist手写数字库转化为图片形式 和标签形式

    Mnist 数据文件有两种,一种是图片文件,一种是标签文件,那么如何把他们解析出来呢? (1)解析图片文件 可以看出在train-images.idx3-ubyte中,第一个数为32位的整数(魔数,图 ...

  10. Atom使用插件精选(FE)

    [转]原文https://zhuanlan.zhihu.com/p/24753739?refer=AlenQi Atom琳琅满目的插件中,为前端coder推荐一些实用的插件. sync-setting ...