CSS使用示例

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 样式设置

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

时间: 2024-10-11 12:39:46

CSS使用示例的相关文章

CSS初始化示例代码

CSS初始化示例代码 /* css reset www.admin10000.com */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin:0; padding:0; } body { background:#fff; color:#555; font-size:14px; font-family

css Sprites 示例

css sprites 缩减图片加载个数以提升网页加载速度,利用CSS的"background-image","background- repeat","background-position"的组合进行背景定位,background-position可以用数字精确的定位出背景图片的位置 <!DOCTYPE><html xmlns="http://www.w3.org/1999/xhtml"><h

CSS Flex-box示例代码

.icons{ /*flex-box布局,子元素可以按需缩放*/ display: -webkit-box; display: -moz-box; display: -ms-box; display: -o-box; display: box; /*flex-box布局,子元素可以按需缩放*/ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; /*row表示

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

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin:0; padding:0; }body { background:#fff; color:#555; font-size:14px; font-family: Verdana, Arial, Helvetica, sans-serif; }td,th

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

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin:0; padding:0; }body { background:#fff; color:#555; font-size:14px; font-family: Verdana, Arial, Helvetica, sans-serif; }td,th

初始化CSS

为什么要初始化CSS? 建站老手都知道,这是为了考虑到浏览器的兼容问题,其实不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面差异.当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化. 最简单的初始化方法就是: * {padding: 0; margin: 0;} .有很多人也是这样写的.这确实很简单,但有人就会感到疑问:*号这样一个通用符在编写代码的时候是快,但如果网站很大,CSS样式表文件很大,这样写的话,他会把所有的标

[学习笔记]day02&amp;CSS

一,什么是CSS? Cascading Style Sheets层叠样式表 层叠:就是层层覆盖叠加,如果有多种样式对同一html标签进行修饰,样式有冲突的部分应用优先级高,不冲突的部分共同作用 样式表:就是css属性样式的集合 CSS的作用 1. 对html页面进行美化和修饰 2. 将html的内容和样式进行了分离,让文档看起来更清晰 3. 提高代码复用性 ? 1. CSS的选择器(三种) 一,基本选择器(三种) 1.ID选择器 ? (1)id选择器 id唯一性 语法:#id的值{css属性}

jQuery AJAX 网页无刷新上传示例

新年礼,提供简单.易套用的 jQuery AJAX 上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 (不论是否 ASP.NET),内附的 FileUpload 控件,功能不足 (页面必须刷新.不支援 AJAX),或外观太丑被用户嫌弃 (却无法透过 CSS 自定义外观).网路上虽已有许多可用的示例,如: jQuery File Upload,但功能太强大.外观复杂,欲仅取出部分功能来引用,反而不易

css网页中设置背景图片的方法详解

css网页中设置背景图片的方法详解 在css代码中设置背景图片的方法,包括背景图片.背景重复.背景固定.背景定位等 用css设置网页中的背景图片,主要有如下几个属性: 1,背景颜色 {background-color:数值}2,背景图片 {background-image: url(URL)|none}3,背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}4,背景固定 {background-attachment