Rumah > pengaturcaraan harian > pengetahuan css > 什么是CSS语法?详细介绍使用方法及规则

什么是CSS语法?详细介绍使用方法及规则

奋力向前
Lepaskan: 2021-07-08 17:46:31
asal
6644 orang telah melayarinya
<p>在之前的文章《什么是HTML元素?浅谈元素的语法规则》中带大家了解了HTML元素和语法规则。下面本篇文章给大家介绍一下CSS语法,了解一下CSS样式表三种使用方法,下面我们就来看一下吧!!

<p>什么是CSS语法?详细介绍使用方法及规则

<p>一、css语法

<p>CSS 规则集(rule-set)由选择器和声明块组成

<p>微信截图_20210708103218.jpg

<p>例子解释

<p>p是 CSS 中的选择器(它指向要设置样式的 HTML 元素:<p>

<p>color 是属性,red 是属性值

<p>text-align 是属性,center 是属性值

<p>代码示例:

<html>
<head>
<style>
p
{
	color:red;
	text-align:center;
} 
</style>
</head>
<body>
<p>php</p>
<p>php中文网</p>
</body>
</html>
Salin selepas log masuk

效果图:

微信截图_20210708151330.jpg


CSS 实例:

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

p 
{ 
color:red; 
text-align:center; 
}
Salin selepas log masuk
<p>注释是用来解释你的代码,并且可以随意编辑它,浏览器会忽略它。

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

/*这是个注释*/ 
p 
{ 
text-align:center; 
/*这是另一个注释*/ 
color:black; 
font-family:arial; 
}
Salin selepas log masuk
<p>二、CSS如何使用方法?

<p>CSS使用方法:编辑工具

<p>任何文本编辑工具样式表使用方法一般有三种:

<p>1)文档头部插入:适用于单个网页应用

<p>2)行内插入:适用于页面中一、两个地方才用到CSS

<p>3)外部链接样式文件:适用于多个网页都用到CSS

<p>在HTML网页中css的不同使用方法调用css的方法不同

<p>1、头部插入样式

<style type="text/css">……</style>
Salin selepas log masuk
<p>代码示例:

<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>
Salin selepas log masuk
<p>注:这里将style对象的type属性设置为”text/css”是不支持这类型的浏览器忽略样式表单。

<p>2、行内插入样式

<p style=“font-size:16pt;color:blue”>蓝色16号文字</p>
Salin selepas log masuk
<p>采用<style="<span style="background-color: rgb(248, 248, 248);">font-size:16pt;color:blue"</span>>的格式把样式写在html中的任意行内,这样比较方便灵活。

<p>3、外部链接样式

<p>先建立外部样式表文件(.css),然后使用HTML的link对象

<head>
<title>中文网(php.com)</title>
<link rel=stylesheet
href="http://www.php.cn/php.cn"
type="text/css">
</head>
Salin selepas log masuk
<p>这种方法非常适宜同时定义多个文档。它能使多个文档同时使用相同的样式,从而减少了大量的冗余代码。

<p>而在XML中,你应该如下例所示在声明区中加入:

<? xml-stylesheet type="text/css" href="http://www.php.cn/php.css" ?>
Salin selepas log masuk
<p>定义内部样式块对象 (Embedding a Style Block)

<p>你可以在你的HTML文档的<HTML><BODY>标记之间插入一个<STYLE>...</STYLE>块对象。 

<p>注意事项

  • <p>注意要细心

<p>推荐学习:CSS视频教程

Atas ialah kandungan terperinci 什么是CSS语法?详细介绍使用方法及规则. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
css
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan