【CSS】2.css&html

来源：互联网发布：vb宽度高度编辑：程序博客网时间：2024/06/05 11:06

一、CSS与HTML结合

结合方式一：<style>：利用标签中style属性来改变每个标签的显示样式，可以对一个标签进行多种修饰。
- 颜色值也可以使用16进制，大小值需要带单位（px是像素）。

<div style="color: green; background-color: black; font-size: 30px;">DIV区域1</div>

这里写图片描述

结合方式二：当多标样式重复时，将重复的样式封装起来。
- 并且可以层叠设置样式，会自动覆盖初始样式。
- 抽取部分放在<head></head>中。
- 封装在什么标签的样式（如div），该标签默认都是该样式，除非再叠加设置某指定标签样式。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><style type="text/css">    div {        color: green;        background-color: black;         font-size: 30px;    }</style></head><body>    <div style="color: black; background-color: red; font-size: 30px;">DIV区域1</div>    <div>DIV区域2</div>    <div>DIV区域3</div></body></html>

这里写图片描述

结合方式三：多个页面都使用相同的样式时，抽取封装成文件。
- 注意：最好不要在html里面改代码，样式单独封装成文件，隔离出来，通过导入添加到html中。
- 导入

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><style type="text/css">    @IMPORT url("style/all.css");</style></head><body>    <div>DIV区域1</div>    <div>DIV区域2</div>    <div>DIV区域3</div>    <span>SPAN区域1</span>    <span>SPAN区域2</span>    <p>P段落区域1</p>    <p>P段落区域2</p></body></html>

all.css文件：每次添加新样式，只需在这里添加即可，不需要每次都去html代码中添加。

@IMPORT url("div.css");@IMPORT url("span.css");@IMPORT url("p.css");

div.css

div {    color: green;    background-color: black;     font-size: 30px;}

span.css

span {    color: black;    background-color: yellow;     font-size: 30px;}

p.css

p {    color: maroon;    background-color: orange;     font-size: 30px;}

这里写图片描述

还有一种导入方式：<link>：html标签（建议使用这种）

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><link rel="stylesheet" href="style/all.css"></head><body>    <div>DIV区域1</div>    <div>DIV区域2</div>    <div>DIV区域3</div>    <span>SPAN区域1</span>    <span>SPAN区域2</span>    <p>P段落区域1</p>    <p>P段落区域2</p></body></html>

0 0