css语法规则

最新推荐文章于 2022-07-06 19:01:22 发布

m0_46007012

最新推荐文章于 2022-07-06 19:01:22 发布

阅读量214

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/m0_46007012/article/details/112557739

版权

Css语法规则
1.注释规则:/**/
2.属性和值可以设置多个,从而实现对于同一标记的多样式风格.每条声明之间要用分隔号分隔开来.
P(标记){text-align :center;color:red;}
3.为了方便阅读,可以采用分行的方式书写样式表,即每行只描述一个属性.
P{
Text-align:center;
Color:black;
Font-family:arial; /分行显示更加清晰/
}
4.属性由多个单词组成必须填上引号.
P{font-family:”sans serif”;}
5.如果某个属性有多个候选值,则每个候选值之间用”,”分隔
P{font-family:”sans serif”,Times,serif}
6.选择器的集体声明(把具有相同属性和值的选择器组合起来书写)
P,table{font-size;9pt}<==>table{font-size;9pt}&&p{font-size;9pt}
7.一个属性有多个值,每个值要用空格分开.
a {padding: 6px 4px 3px}

在html中使用css的方法有4种:
行内式,嵌入式,链接式和导入式

一.行内式:
A.概念:所有的html均有通用属性style,行内式就是在style属性中为相应的标记添加应用的样式,将css代码直接写入到style属性中.
B.范围:
在body的文件体中实现,
主要在标记中引用对标所在记有效.
C.行内式的格式:
<tag(标记) style=”propertyl:valuel;…(css代码)”;>网页内容</tag标记>
注:style内的属性均属于css代码,但属于style的下一级属性,多个单词需要加引号.
D.实例代码:

<html>
<h`在这里插入代码`在这里插入代码片`片`ead>
<title>行内引入css的方法示例</title>
</head>
<body>
<p style = "font-size: 20pt; 
font-weight: bold; 
color:green;">  <!--一个属性的值有多个单词时需要加引号-->

这个内嵌样式定义段落里面的文字是20pt的粗体,仅仅在此标记内有效.</p>
<p>这个无css作用.</p>
</body>
</html>
直接在body体内作为style属性存在.

二.嵌入式:

A.定义:将css代码写在之间
B.<style>标记是专用于引入嵌入式css的html标记,放置在<head>...</head>之间
C.基本格式为:

<style type = “text/css”> 样式表的具体内容 </style>
说明:type=text/css定义了文件类型为样式表文件

实例代码:

<html>
<head>
<title>嵌入式引入css的示例</title>
<style type="text/css">
h1.mylayout{
border-width:1;
border:solid;
text-align =center;
color:red;
}
/*将类名叫mylayout的h1标记设置为具有宽度为1像素的实心边框,红色居中的样式*/
</style>
</head>
<body>
<h1 class="mylayout">这个h1标题使用了style嵌入式css</h1>
/*class用于区分对于多个h1标记的区分标志*/
<h2 class="mylayout">这个h2标题使用了style嵌入式css</h2>
<h1>这个标题未使用</h1>
</body>
</html>

三.链接式:

A.基本概念:
将css样式的代码写入css文件中,在需要此样式的网页中使用link标记在head区域内引用外部css文件.
B.范围:
Css文件放在外部,在…其中引用
C.链接式的格式:

<link herf = “css文件的url地址,具体引用规则相对路径与绝对路径” rel = “stylesheet”代表在网页中使用外部样式表 type=text/css定义了文件类型为css文件>

代码主体:

<html>
<head>
<title>链接式引入css的方法示例</title>
<link href ="home.css" rel ="stylesheet" type = "text/css">
</head>
<body>
<h1>我是使用了style的</h1>
<h2>我未使用style</h2>
</body>
</html>
Home.css文件:(需要事先另外建立)
h1{border-width:1; border :solid; text-align:center; color:red;}

四.导入式:
A.概念:导入式和链接式的功能基本相同不过引入外部文件的方法不同
B.格式:

<style type=”text/css”>
@import “url”<!--注意需要加入引号-->
</style>

C.实例代码:

<html>
<head>
<title>导入式引入css的方法示例</title>
<style type="text/css">
@import "home.css" ;
</style>
</head>
<body>
<h1>我是使用了style的</h1>
<h2>我未使用style</h2>
</body>
</html>