CSS入门教程——样式表的基本语法(一)

2016-02-20 01:15 10 1 收藏

下面请跟着图老师小编一起来了解下CSS入门教程——样式表的基本语法(一)，精心挑选的内容希望大家喜欢，不要忘记点个赞哦！

【 tulaoshi.com - Web开发】

插入样式表前后的网页。

为了更好地理解样式表的作用，我们先看一个CSS的应用实例。在本例子中，你很容易对比出使用CSS前后两个网页的区别，当然了，现在你可能读不懂CSS部分的代码。别担心，这些代码将在少后的教程中介绍。

我们首先来看一下未加入CSS的页面。网页里只有一段话：菜鸟吧的站长是大傻瓜！傻瓜爱吃大西瓜！。而且由于分别是标题1、2、3、4，页面内字体大小也不相同，还有标题的自动换行。

它的源代码如下：

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
html xmlns="http://www.w3.org/1999/xhtml"
head
title我真惨!被用来演示CSS!/title
meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
!--这里将要插入CSS --
/head
body
h1a href="http://cainiao8.com/"菜鸟吧/a/h1
h2的站长/h2
h3是大傻瓜！傻瓜/h3!--我就要被修该啦，郁闷 --
h4爱吃大西瓜！/h4
/body
/html

下面我们简单的为它加上一点CSS，来让我不再傻按如下提示修改网页的代码：

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
html xmlns="http://www.w3.org/1999/xhtml"
head
title我真惨!被用来演示CSS!/title
meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
style type="text/css"
!--
h1 {font-size: 12px;}
h2,h4 {font-size: 12px; display:inline;}
--
/style
/head
body
h1a href="http://cainiao8.com/"菜鸟吧/a/h1
h2的站长/h2
h3 style="display:none"是大傻瓜！傻瓜/h3
h4爱吃大西瓜！/h4
/body
/html

让我们来看看加入CSS之后的网页。你很容易看出两个网页的差别，页面内的文字大小统一了，而且只有标题1后面有一个换行，甚至有一部分文字被隐藏了起来。这都要归功于上面红色部分的代码。它们就是CSS，下面就让我们大概了解一下这些代码的意义。

来源:http://www.tulaoshi.com/n/20160220/1633560.html

上一篇： CSS入门教程——链接(a)
下一篇： I love him,he loves her,you really blind

看过《CSS入门教程——样式表的基本语法(一)》的人还看了以下文章更多>>

手写样式表：CSS语法全攻略（上）

标签： Web开发

放弃可视化编辑器写CSS 如果有看上篇的例子的CSS时，你可能会问，我在DW中要怎样做才能有像下面这样的CSS呢？ .test1,.test2 {color:Purple !important;color:blue;} 手写，在DW也有代码区，而且是有智能提示的，等于半手动写，本人一直用TopStyle，除了对中文的支持不是很好外，各方面都不错。在学C#的那段时间，发现VS.NET写CSS也很不...

关于CSS样式表

标签： Web开发

一.在学习css之前你应该掌握哪些基础知识 1.什么是网页，什么是超文本语言（html）。 2.会使用Dreamweaver等常用的网页编辑器。 Dreamweaver是现今最好的网站编辑工具之一，而Dreamweaver8增加的对CSS的支持更是你容易得来使用CSS，用它来给制作网页的CSS样式表会更简单、更方便。本教程教你如何利用Dreamweaver8在页面中加...

CSS样式表渐进增强的基本概念

标签： Web开发

原文：作者：从1994年开始，Web开发社区就敲响了优雅降级（Graceful Degradation）的鼓声。这个概念来自工程世界，其核心理念是给最新最强大的浏览器全套餐式的体验，而给那些不幸还在使用Netscape 4的可怜人们只留些残羹冷炙般的基本功能。毫无疑问，这发挥了作用。但是它并不很符合Tim Berners-Lee（译注：万维网之父）关于普遍可访问...

CSS样式表一席谈之CSS快速入门

标签： Web开发

在当今的网页制作中，几乎所有漂亮的网页都用了CSS。 CSS是 Cascading Style Sheet的缩写，有些书上把它译为 “层叠样式表”。有了CSS的控制，我们的网页便会给人一种赏心悦目、工工整整的感觉，同时字体的色彩变化也使主页变得更加生动活泼。虽然只短短的十几行代码，得到的效果却不同凡响。其基本用法是在网页中插入如下格式的一段代码：...

[css]简明教程 CSS样式表概述

标签： Html CSS布局 Div+CSS XHTML

CSS（Cascading Style sheets，层叠样式表）是一种制作网页的新技术，现在已经为大多数的浏览器所支持，成为网页设计必不可少的工具之一。使用CSS能够简化网页的格式代码，加快下载显示的速度，也减少了需要上传的代码数量，尤其是在设计者面对有数百个网页的站点时，大大减少了重复劳动的工作量。 W3C（The World Wide...

查看更多精彩>>