CSS 简介

你在开始学习CSS之前,应确保自己拥有以下预备知识: 

  • HTML / XHTML 

要学习HTML和XHTML,可通过PHP中文网(php.cn)主页找到相关教程


学习CSS就要知道什么是CSS?

  • CSS 指层叠样式表 (Cascading Style Sheets)

  • 样式定义如何显示 HTML 元素

  • 样式通常存储在样式表中

  • 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题

  • 外部样式表可以极大提高工作效率

  • 外部样式表通常存储在 CSS 文件中

  • 多个样式定义可层叠为一


样式解决了一个很大的问题

HTML 标签原本被设计为用于定义文档内容,如下实例:


这是一个标题

这是一个段落.


样式表定义如何显示 HTML 元素,就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档,外部样式表使你有能力同时改变站点中所有页面的布局和外观。

为了解决这个问题,万维网联盟(W3C),这个非营利的标准化联盟,肩负起了 HTML 标准化的使命,并在 HTML 4.0 之外创造出样式(Style)。

当代浏览器都支持 CSS .


CSS 样式表极大地提高了工作效率

样式表定义如何显示 HTML 元素

样式表定义如何显示 HTML 元素,就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档,外部样式表使你有能力同时改变站点中所有页面的布局和外观。


CSS实例

一个HTML文档可以显示不同的样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>PHP中文网(php.cn)</title>
    <style>
        h1{color: #00a0e9}
        p{background-color: #8de943
        }
        p.ex {margin-top:2cm;}
        p.bottommargin {margin-bottom:25%;}
    </style>
</head>
<body>
<h1>标题</h1>
<p>一个没有指定边距大小的段落。</p>
<p class="ex">一个2厘米上边距的段落。</p>
</body>
</html>

运行程序试试看



继续学习
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> h1 {color:#00ff00;} p{color: #ffd4f0 } .ex {color:rgb(0,0,255);} </style> </head> <body> <h1>这是一个标题</h1> <p>这是一个普通的段落。请注意,本文是红色的。页面中定义的默认文本颜色选择器。</p> <p class="ex">这段文字是蓝色的</p> </body> </html>
提交重置代码
高并发千万级数据库系统解决方案
  • 推荐课程
  • 评论
  • 问答
  • 笔记
  • 课件下载

大神,求带!

表示之前学过一遍,现在来复习一遍,很多东西都忘了,现在继续复习CSS,小伙伴们加油!

7年前    添加回复 1

手机用户921196359

好好好好好好好好好好好好

5年前    添加回复 0

phpcn_u177141

6年前    添加回复 0

phpcn_u177141

6年前    添加回复 0

紫霞

棒棒哒

6年前    添加回复 0

我喜欢晴天

之前看过一些,现在来系统的学习一下啊

7年前    添加回复 0

女神的闺蜜爱上我

我是零基础入门。。。可以。。。

7年前    添加回复 0

Alway.以为

从最基础的讲起,就是找这样的课程

7年前    添加回复 0

男神

这个样式很容易明白

7年前    添加回复 0

css样式内属性得默认值和默认单位?

[最新 数据分析师 的回答] css样式内属性得默认值和默认单位?-PHP中文网问答-css样式内属性得默认值和默认单位?-PHP中文网问答围观一下哦,学习一下。

时间:7年前

课件暂不提供下载,工作人员正在整理中,后期请多关注该课程~