当前位置:首页 > Web开发 > 正文

前端基础框架

2024-03-31 Web开发

css是让html让他更加的好看修饰

技术图片

css属性可以在三处写

<div>背景色</div>

第二种方法是在head里面写
需要和body里面创建关系 <style>
/*<!--#代表调用-->*/
#i1{
background-color: red;
height: 100px;
width: 100px}
</style>
</head>
<body>
<!--<div>背景色</div>-->
<div>被那个色</div>

第三种我们写到一个文件里
新建一个css文件

技术图片

</style>
<link href="http://www.mamicode.com/demo.css">#引入一个文件
</head>
<body>
<!--<div>背景色</div>-->
<div>被那个色</div>
<div>被那个色</div>

通过用link 引入到当前的html中


代码如下 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1{
background-color: yellow;
height: 100px;
width: 100px;
}
</style>
<link href="http://www.mamicode.com/demo.css">
</head>
<body>
<div>背景</div>
<div>背景色1</div>
<div>背景色2</div>
</body>
</html>

技术图片

他们的优先以标签为属性,,由近到远

选择器

第一个选择器是id选择器

id 俩个id 用一个就报错了

这时候就有class属性了

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{ background-color: yellow;
height: 100px;
width: 100px;}
</style>
</head>
<body>
#第一优先级标签中的
<div>class选择器</div>
<div>class选择器</div>
<div>class选择器</div>
</body>
</html>




前端基础框架-css

温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/web/40639.html