css样式表

最新推荐文章于 2022-01-15 18:35:27 发布

栗染

最新推荐文章于 2022-01-15 18:35:27 发布

阅读量548

点赞数

分类专栏： HTML 文章标签： css

本文链接：https://blog.csdn.net/Kuangqiu/article/details/53909457

版权

HTML 专栏收录该内容

18 篇文章 3 订阅

订阅专栏

一般分为三种方式：
内联式样式表
--应用内联样式嵌入到各个网页元素
主要是应用到标签<P><table><h>里面如图。

<html>
<head>
</head>
<body>
<p style="color:red">

</p>
</body>
</html>

嵌入式样式表

--在网页上创建嵌入样式表

特点：

一般css语句写在html文档中，一般写在head标记中。

仅对一个html进行设置，代码是html的一部分，没有使用浏览器的缓存机制。

style一般与div一同使用。

第一个例子

<html>
<head>
<style type="text/css">
body
{
background-color：#ff00ff
background-image：url（images/2.gif）;
}
#top
{
width：100%；
height：100%；
background-color：#00ff00
}
#right
{
width：100%；
height：100%；
background-color：#00ff00
float:left;
}
</head>
</style>
<body>
<div id="top"><img src="images/2.gif   width=100px height=50px"></div>
<div id ="right"></div>
</body>
</html>

第二个例子

<html>
<head>
<style type="text/css">
h1.intro {color:blue;}
p.important {color:green;}
</style>
</head>

<body>
<h1 class="intro">Header 1</h1>
<p>A paragraph.</p>
<p class="important">Note that this is an important paragraph.</p>
</body>
</html>

外联式样式表

--将连接到外部样式表

base1.html

<html>
<head>
<link  href=" base.css" rel ="stylelsheet" type="text/css"/>
</head>
<body>
<h1>we are here</h1>
<table>
<tr class="to">
you 
</tr>
</table>
<p class="po">
me 
</p>
<p>
they
</p>
</body>
<html>

base.css

h1{
color:red;
margin left:20px;
font-size:2;
 }
tr.to
{
color:red;
margin left:20px;
font-size:2;
}
p.po
{
color:blue;
margin left:20px;
font-size:2;
}

下面来了解一下css所涉及到的标签使用

<style>样式定义

<link>资源引用

<div>定义一个块区域

<span>行内的小块区域

1.当应用到多个网页时建议使用外联式样式表

2.选择器

普通选择器

主要是任意html标记

p{color：red }

类选择器

p.po