在之前的文章《什么是HTML元素?浅谈元素的语法规则》中带大家了解了HTML元素和语法规则。下面本篇文章给大家介绍一下CSS语法,了解一下CSS样式表三种使用方法,下面我们就来看一下吧!!
一、css语法
CSS 规则集(rule-set)由选择器和声明块组成
例子解释
p
是 CSS 中的选择器(它指向要设置样式的 HTML 元素:<p>
)
代码示例:
<html> <head> <style> p { color:red; text-align:center; } </style> </head> <body> <p>PHP</p> <p>编程之家网</p> </body> </html>
效果图:
CSS 实例:
CSS声明总是以分号(;
)结束,声明总以大括号({}
)括起来:
p { color:red; text-align:center; }
注释是用来解释你的代码,并且可以随意编辑它,浏览器会忽略它。
CSS注释以 /*
开始, 以 */
结束, 实例如下:
/*这是个注释*/ p { text-align:center; /*这是另一个注释*/ color:black; font-family:arial; }
二、CSS如何使用方法?
CSS使用方法:编辑工具
任何文本编辑工具样式表使用方法一般有三种:
1)文档头部插入:适用于单个网页应用
2)行内插入:适用于页面中一、两个地方才用到CSS
1、头部插入样式
<style type=text/css>……</style>
代码示例:
<html> <head> <title>中文网(PHP.com)</title> <style type=text/css> body {background-color:yellow;} h1 {font-size:36pt;} h2 {color:blue;} p {margin-left:50px;} </style> </head> <body>
注:这里将style对象的type属性设置为”text/css
”是不支持这类型的浏览器忽略样式表单。
2、行内插入样式
<p style=“font-size:16pt;color:blue”>蓝色16号文字</p>
采用<style=font-size:16pt;color:blue>
的格式把样式写在html中的任意行内,这样比较方便灵活。
3、外部链接样式
先建立外部样式表文件(.css
),然后使用HTML的link对象
<head> <title>中文网(PHP.com)</title> <link rel=stylesheet href=http://www.jb51.cc/PHP.cn type=text/css> </head>
这种方法非常适宜同时定义多个文档。它能使多个文档同时使用相同的样式,从而减少了大量的冗余代码。
而在XML中,你应该如下例所示在声明区中加入:
<? xml-stylesheet type=text/css href=http://www.jb51.cc/PHP.css ?>
定义内部样式块对象 (Embedding a Style Block)
你可以在你的HTML文档的<HTML>
和<BODY>
标记之间插入一个<STYLE>...</STYLE>
块对象。
注意事项
注意要细心
推荐学习:CSS视频教程
原文地址:https://www.jb51.cc/css/1206540.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。