CSS与html的四种结合⽅式CSS与html的结合⽅式
⽅式⼀
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Css学习</title>
</head>
<body>
<div Style = "background-color: red ; color:green">hello Css</div>
</body>
</html>
hello Css
在
标签中添加style属性 如background-color：背景颜⾊ color：字体颜⾊
⽅法⼆
页⾯属性添加到标签中
如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS与html的结合⽅式⼆</title>
<style type="text/css">
<div>
{
background-color: crimson;
color: greenyellow;
}
</style>
</head>
<body>
<div>郑州轻⼯业⼤学</div>
</body>
</html>
⽅法三
在html⽂件的标签下添加CSS⽂件的路径
格式如下：
<title>CSS与html的结合⽅式三</title>
<style type = "text/css">
@import url(div.css);
</style>
</head>
<body>
<div>
郑州轻⼯业⼤学
</div>
</body>
</html>
手机上可以打html与css的app
CSS⽂件如下
div
{
background-color: yellow;
color: red;
}
⽅法四
使⽤标签引⼊外部CSS样式表格式
格式如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS与html结合的⽅法四</title>
<link rel = "stylesheet" type = "text/css" href = "div.css">
</head>
<body>
<div>郑州轻⼯业⼤学</div>
</body>
</html>
其中最常⽤的结合⽅式是第四种，第三种⽅式针对⼀些⽼版本的浏览器不起作⽤。
CSS的优先级
由上到下，由外到内，优先级由低到⾼，后加载的优先级⾼
CSS的选择器
格式：选择器名称 {属性名：属性值；属性名：属性值…}
CSS基本选择器（三种）
1、标签选择器：使⽤标签名称作为选择器的名称
如div{
background-color ： “read”;
color : “blue”;
}
p
{
background-color ： “read”;
color : “blue”;
}
2、class选择器：每个html标签都有⼀个属性class
<title>标签设置</title>
<style type="text/css">
div.haha{
background-color: yellow;
color: red;
}
p.haha{
background-color: yellow;
color: red;
}
</style>
</head>
<body>
<div class="haha">⽂字是⼈类⽤表意符号记录表达信息以传之久远的⽅式和⼯具。现代⽂字⼤多是记录语⾔的⼯具。⼈类往往先有⼝头的语⾔后产⽣书⾯⽂字，很多⼩语种，有语⾔但没有⽂字。⽂字的不同体现了国家和民族的书⾯表达的⽅式和思维不同。⽂字使⼈类进⼊有历史记录的⽂明社会。
⽂字按字⾳和字形，可分为表形⽂字</div>
<p class="haha">字是⼈类⽤表意符号记录表达信息以传之久远的⽅式和⼯具。现代</p>
</body>
</html>
第⼆种写法
在
<style type = "text/css">
.haha{
background-color:yellow;
color:black;
}
</style>
3、id选择器
每个html都有⼀个id 标签，调⽤id标签即可使⽤css样式
优先级排序：
基本选择器style > id选择器 > class优先级 > 标签选择器

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。