精通 CSS+DIV 网页样式与布局 1 什么是样式表

本文介绍了CSS(层叠样式表)的基本概念及其在网页设计中的重要作用。详细解释了如何通过三种方式将样式表加入到HTML文档中:链接外部样式表、嵌入内部样式块以及直接在标签中使用内联样式。并通过示例展示了具体的实现方法。

CSS是Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(增
强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
如何将样式表加入您的网页
你可以用以下三种方式将样式表加入您的网页。而最接近目标的样式定义优先
权越高。高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义。例
外请参阅important声明。
链入外部样式表文件 (Linking to a Style Sheet)
你可以先建立外部样式表文件(.css),然后使用 HTML 的 link 对象。示例如
下:
<head>
<title>title of article</title>
<link rel=stylesheet href=”http://www.dhtmlet.com/rainer.css” type=”text/css”>
</head>
而在XML中,你应该如下例所示在声明区中加入:
<? xml-stylesheet type=”text/css” href=”http://www.dhtmlet.com/rainer.css” ?>
定义内部样式块对象 (Embedding a Style Block)
你可以在你的HTML文档的<HTML>和<BODY>标记之间插入一个
<STYLE>…</STYLE>块对象。 定义方式请参阅样式表语法。示例如下:
<html>
<style type=”text/css”>
<!–
body {font: 10pt “Arial”}
h1 {font: 15pt/17pt “Arial”; font-weight: bold; color: maroon}
h2 {font: 13pt/15pt “Arial”; font-weight: bold; color: blue}
p {font: 10pt/12pt “Arial”; color: black}
–>
</style>
<body>
请注意,这里将style对象的type属性设置为”text/css”,是允许不支持这
类型的浏览器忽略样式表单。
内联定义 (Inline Styles)
内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。
示例如下:
<p style=”margin-left: 0.5in; margin-right:0.5in”>这一行被增加了左右的外补丁<p>
样式表语法 (CSS Syntax)
Selector { property: value }
参数说明:

1部分 CSS基础知识篇  第1章 CSS的初步体验    1.1 CSS的概念    1.2 使用CSS控制页面    1.3 体验CSS   第2章 CSS的基本语法    2.1 CSS选择器    2.2 选择器声明   2.3 CSS继承  第3章 用CSS设置丰富的文字效果    3.1 CSS文字样式   3.2 文字实例一:模拟Google公司Logo    3.3 文字实例二:制作页面的五彩标题    3.4 CSS段落文字   3.5 段落实例:百度搜索   第4章 用CSS设置图片效果    4.1 图片样式    4.2 图片的对齐   4.3 图文混排    4.4 图文实例:八仙过海  . 第5章 用CSS设置网页中的背景    5.1 背景颜色    5.2 背景图片    5.3 背景综合一:我的个人主页    5.4 背景综合二:古词《念奴娇·赤壁怀古》   第6章 用CSS设置表格表单的样式    6.1 控制表格    6.2 表格实例一:隔行变色    6.3 表格实例二:鼠标经过时变色的表格    6.4 表格实例三:日历    6.5 CSS表单    6.6 综合实例一:直接输入的Excel表格    6.7 综合实例二:模仿新浪网民调查问卷   第7章 用CSS设置页面和浏览器的元素    7.1 丰富的超链接特效   7.2 鼠标特效   7.3 页面滚动条   第8章 用CSS制作实用的菜单    8.1 项目列表    8.2 无需表格的菜单    8.3 菜单的横竖转换    8.4 菜单实例一:百度导航条    8.5 菜单实例二:流行的Tab菜单   第9章 CSS滤镜的应用    9.1 滤镜概述    9.2 通道(Alpha)    9.3 模糊(Blur)    9.4 运动模糊(Motion Blur)    9.5 透明色(Chroma)    9.6 下落的阴影(Dropshadow)    9.7 翻转变换(Flip)    9.8 光晕(Glow)    9.9 灰度(Gray)    9.10 反色(Invert)    9.11 遮罩(Mask)    9.12 阴影(Shadow)    9.13 X射线(X-ray)    9.14 浮雕纹理(Emboss和Engrave)    9.15 波浪(Wave)  第2部分 CSS+DIV美化和布局篇  第10章 理解CSS定位div布局    10.1  div 标记 span 标记   10.2 盒子模型   10.3 元素的定位    10.4 定位实例一:轻轻松松给图片签名    10.5 定位实例二:文字阴影效果   第11章 CSS+div布局方法剖析    11.1 CSS排版观念    11.2 固定宽度且居中的版式   11.3 左中右版式    11.4 块的背景色问题   11.5 排版实例:电子相册    11.6 div排版传统的表格方式排版的分析   第12章 CSS+div美化布局实战    12.1 框架搭建    12.2 实例一:蓝色经典    12.3 实例二:清明上河图    12.4 实例三:交河故城    12.5 自动选择CSS样式  第3部分 CSS混合应用技术篇  第13章 CSSJavaScript的综合应用    13.1 JavaScript概述   13.2 JavaScript语法基础   13.3 实例一:输入时高亮显示的Excel表格    13.4 实例二:由远到近的文字    13.5 实例三:跑马灯特效    13.6 实例四:图片淡入淡出    13.7 实例五:CSS实现PPT幻灯片    13.8 实例六:灯光效果    13.9 实例七:舞台灯光    13.10 实例八:探照灯    13.11 实例九:鼠标文字跟随   第14章 CSSXML的综合运用    14.1 XML基础    14.2 XML链接CSS文件    14.3 XML文字阴影效果    14.4 XML古诗字画    14.5 XML实现隔行变色的表格   第15章 CSSAjax的综合应用    15.1 Ajax概述    15.2 Ajax入门   15.3 Ajax实例:能够自由拖动布局区域的网页  第4部分 综合案例篇  第16章 我的博客    16.1 分析构架    16.2 模块拆分    16.3 整体调整   第17章 小型工作室网站    17.1 分析构架    17.2 模块拆分   17.3 整体调整   第18章 企业网站    18.1 分析构架   18.2 模块拆分   18.3 整体调整   第19章 网上购物网站    19.1 分析构架   19.2 模块分析   19.3 整体调整   第20章 旅游网站    20.1 分析构架    20.2 模块拆分   20.3 整体调整
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值