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

2016-02-20 01:15 3 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，来让我不再傻按如下提示修改网页的代码：

!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，下面就让我们大概了解一下这些代码的意义。

来源:https://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样式表一席谈之CSS快速入门

标签： Web开发

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

关于CSS样式表

标签： Web开发

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

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

标签： Html CSS布局 Div+CSS XHTML

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

CSS样式表书写顺序

标签： Web开发

整理了一下自己写CSS时的顺序，跟大家分享下。下表顺序为从上到下，从左到右： ======================== display || visibility list-style : list-style-type || list-style-position || list-style-image position top || right || bottom || left z-index clear float width max-width || min-width height max-height || min-height...

查看更多精彩>>