CSS 实例

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

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

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

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


CSS 实例

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

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

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

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

CSS 注释

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

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

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

实例1:

<html>
<head>
<style>
body {background-color:yellow;}
h1 {font-size:36pt;}
h2 {color:blue;}
p {margin-left:50px;}
</style>
</head> <body> <h1>This header is 36 pt</h1>
<h2>This header is blue</h2> <p>This paragraph has a left margin of 50 pixels</p> </body>
</html>

实例2:

<html>
<head>
<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>This is a header 1</h1>
<hr> <p>You can see that the style
sheet formats the text</p> <p><a href="http://www.w3cschool.cn"
target="_blank">This is a link</a></p> </body>
</html>

[HTML] CSS 语法的更多相关文章

  1. CSS语法小记

    一.CSS语法结构 语法:选择符{属性:值} 例如:body{font-size:12px;} 参数说明: 1.选择符(Selector):指明这组样式所要针对的对象.可以是一个XHTML标签,例如h ...

  2. CSS语法与用法小字典

    前言:这是上学时期对CSS学习的整理,一直没见过光,由于不是专门做前端开发的,难免写不到重点,但对于看懂CSS,和掌握一些基本的用法,熟悉里面的门路还是大有裨益的.由于是从word中贴过来的,排版和格 ...

  3. CSS 语法

    CSS 语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明: 选择器通常是您需要改变样式的 HTML 元素. 每条声明由一个属性和一个值组成. 属性(property)是您希望设置的样 ...

  4. CSS语法基础

    引言:CSS语法 CSS规则由两个主要的部分构成:选择器,以及一条或者多条声明. selector { property: value; property: value; ... property: ...

  5. 前端基础----CSS语法、CSS四种引入方式、CSS选择器、CSS属性操作

    一.CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如: h1 {color:red; font-size:14px;} 二.CSS四种引入方式 1,行内式 行内式是在标 ...

  6. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性  定位(position)z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  7. css语法和基本知识

    1.CSS全称为“层叠样式表”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小.颜色.字体加粗等. 注:使用CSS样式的一个好处是通过定义某个样式,可以让不同网页位置的文字有着统一的字体 ...

  8. Unit02: CSS 概述 、 CSS 语法 、 CSS 选择器 、 CSS声明

    Unit02: CSS 概述 . CSS 语法 . CSS 选择器 . CSS声明 my.css p { color: yellow; } demo1.html <!DOCTYPE html&g ...

  9. html5--6-3 CSS语法2

    html5--6-3 CSS语法2 实例 div包含p和h标签的时候可以,但是p标签包含h标签的时候不可以  学习要点 掌握引入外部样式表方法 插入样式的三种方法 内联样式表(行内) 内部样式表(st ...

  10. html5--6-2 CSS语法

    html5--6-2 CSS语法 实例 学习要点 掌握引入外部样式表方法 插入样式的三种方法 内联样式表(行内) 内部样式表(style中) 外部样式表 创建一个外部样式表 在head中使用link元 ...

随机推荐

  1. CodeForces #100 C 贪心+STL

    题目链接:CodeForces #100  C 题意:现在给出n个snowball的半径,3个半径严格递增或递减的snowball,可以组成1个snowmen.问最多能组成多少个snowmen.并且按 ...

  2. WCF初探-12:WCF客户端异常处理

    前言: 当我们打开WCF基础客户端通道(无论是通过显式打开还是通过调用操作自动打开).使用客户端或通道对象调用操作,或关闭基础客户端通道时,都会在客户端应用程序中出现异常.而我们知道WCF是基于网络的 ...

  3. python实现屏幕截图

    from selenium import webdriver import time def capture(url, save_fn="capture.png"): browse ...

  4. qq快速聊天

    和女朋友聊天的时候,每次发完消息我都习惯性把聊天界面关了,或者我想找女朋友聊天了,又要打开主界面再打开聊天窗口 每次感觉特别麻烦.所以我在想有没有一个好的办法直接打开聊天窗口的.刚好这两天又在写jav ...

  5. 【62测试】【状压dp】【dfs序】【线段树】

    第一题: 给出一个长度不超过100只包含'B'和'R'的字符串,将其无限重复下去. 比如,BBRB则会形成 BBRBBBRBBBRB 现在给出一个区间[l,r]询问该区间内有多少个字符'B'(区间下标 ...

  6. C语言基础--数组及相关

    概念: 一堆相同类型的数据的有序集合 格式: 元素类型  数组名称[ 元素个数 ] 定义数组: // 定义了一个名称叫做scores的数组, 数组中可以存放3个int类型的数据 ]; // 只要定义一 ...

  7. struts2 log4j:WARN Please initialize the log4j system properly. 解决方法

    在tomcat启动的时候,出现这个警告: log4j:WARN No appenders could be found for logger (org.apache.commons.digester. ...

  8. Hadoop 如何查看是否32位

    1.从哪些地方可以识别hadoop是32位还是64位?2.hadoop本地库在什么位置? hadoop在安装的时候,我们需要知道hadoop版本是32位还是64位. hadoop官网本来提供的都是32 ...

  9. Java甘特图控件swing版免费下载地址

    FlexGantt 控件是现在Java 平台下最先进的甘特图解决方案,使用一个很高的抽象层次,能适用于多种不同的域,例如 ERP 系统.生产计划和日程安排.制造流程系统或项目公文管理程序等.这些使得 ...

  10. OpenResty 安装及使用(第一篇安装)

    OpenResty搭建 1.openResty介绍 OpenResty (也称为 ngx_openresty)是一个全功能的 Web 应用服务器.它打包了标准的 Nginx 核心,很多的常用的第三方模 ...