CSS 语法

CSS 语法
2021年08月17日18:45:42 0 630

CSS 语法


实例

  • 查看 实例 1


  • <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>菜鸟教程(58how.com)</title>

    <style>

    body {background-color:yellow;}

    h1   {font-size:36pt;}

    h2   {color:blue;}

    p    {margin-left:50px;}

    </style>

    </head>

     

    <body>

     

    <h1>这个标题设置的大小为 36 pt</h1>

    <h2>这个标题设置的颜色为蓝色:blue</h2>

     

    <p>这个段落的左外边距为 50 像素:50px</p> 

     

    </body>

    </html>


这个标题设置的大小为 36 pt

这个标题设置的颜色为蓝色∶blue这个段落的左外边距为 50像素∶50px


  •  

  • 查看 实例 2


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(58how.com)</title>

<style>

body {background-color:tan;}

h1   {color:maroon;font-size:20pt;}

hr   {color:navy;}

p    {font-size:11pt;margin-left:15px;}

a:link    {color:green;}

a:visited {color:yellow;}

a:hover   {color:black;}

a:active  {color:blue;}

</style>

</head>

 

<body>

 

<h1>这是标题</h1>

<hr>

 

<p>你可以看到这个段落是

被设定的 CSS 渲染的。</p>

 

<p><a href="https://www.58how.com" 

target="_blank">这是一个链接</a></p>

 

</body>

 

</html>

这是标题

你可以看到这个段落是 被设定的 CSS 渲染的。

这是—个链庭


CSS 实例

CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明:

声明

声明

选择器

{color:blue; font-size:12px;} h1

属性

属性值值

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。


CSS 实例

CSS声明总是以分号(;)结束,声明总以大括号({})括起来:


p {color:red;text-align:center;}

为了让CSS可读性更强,你可以每行只描述一个属性:

实例

p
{
color:red;
text-align:center;
}


尝试一下 &raquo;


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"> 

<title>菜鸟教程(58how.com)</title> 

<style>

p

{

color:red;

text-align:center;

</style>

</head>

 

<body>

<p>Hello World!</p>

<p>这个段落采用CSS样式化。</p>

</body>

</html>

Hello World!

这个段落采用CSS样式化。

 


CSS 注释

注释是用来解释你的代码,并且可以随意编辑它,浏览器会忽略它。

CSS注释以 "/*" 开始, 以 "*/" 结束, 实例如下:

/*这是个注释*/
p
{
text-align:center;
/*这是另一个注释*/
color:black;
font-family:arial;
}

打赏 点赞(0)
weinxin
投诉&咨询
文章名+链接地址,发送到此微信:tourism52
html, <!doctype> 菜鸟教程

HTML

HTML 文档类型所有 HTML 文档必须以 <!DOCTYPE> 声明开头。该声明并非一个 HTML 标签。它是一条“信息”,告知浏览器期望的文档...
语言,教程,-01-GO,基础知识,语言,教程,-01-GO, 菜鸟教程

go语言教程-01-GO基础知识

go语言教程-01-GO基础知识 课程大纲 Hello world! 文件名、关键字、标识符和注释 本次课堂内容 1、Hello world 程序1:// go两种执行方式的区别?...
DHTML,教程,DHTML,是,一种,使,HTML,页面,具有,动态, 菜鸟教程

DHTML 教程

DHTML 是一种使 HTML 页面具有动态特性的艺术。 DHTML 是一种创建动态和交互 WEB 站点的技术集。 对大多数人来说,DHTML 意味着 HTML、样式表和 Java...
C语言的发展历程 菜鸟教程

C语言的发展历程

C 语言最早的原型是 ALGOL 60 1963 年,剑桥大学将其发展成为 CPL(Combined Programing Language)。 1967 年,剑桥大学的 Mati...
HDC.2019,余承东,鸿蒙,发布,演讲,全文,HDC.2019, 菜鸟教程

HDC.2019 余承东鸿蒙OS发布演讲全文

HDC.2019 余承东鸿蒙OS发布演讲全文 各位来宾、各位朋友,大家下午好! 欢迎大家来到东莞篮球中心,来参加华为的开发者大会。 今天我借这个机会,也特别感谢东莞市委市政府,给华...
如何,调用,WMLScript,如何,从,WML,页面,调用, 菜鸟教程

如何调用 WMLScript

如何从 WML 页面调用 WMLScript 请注意,WMLScripts 不嵌入 WML 页面。WML 页面仅包含对脚本 URL 的引用。 在下面的例子中,如果您选择 go la...
CSS,和,Class,CSSId,和,Class,class,选择器,如果,你, 菜鸟教程

CSS Id 和 Class

CSSId和Class id 和 class 选择器 如果你要在HTML元素中设置CSS样式,你需要在元素中设置id 和 class选择器。 id 选择器 id 选择器可以为标有特...
手工,安装,步骤 菜鸟教程

手工安装步骤

手工安装步骤本章包含有在 Microsoft Windows 中手工安装和配置 PHP 的指示。有关如何使用 PHP 安装程序在 Windows 下安装和配置 PHP 以及 web...

评论列表 共有 0 条评论

暂无评论