CSS的书写方式

系统管理员 2022-04-22 17:26 153阅读 0赞

### CSS书写位置 ###

1、嵌入：<style></style>  
2、外联（外链）：<link rel="stylesheet" href="css/.." />  
3、内联（内链）:<div style="width: 1100px;"> </div>

接下来我们一步步来：

一、新建项目

项目结构为：

![01.jpg][]

在html文件夹中新建01.html文件，

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		
    		<link rel="stylesheet" href="css/style.css" />
    		
    		<style>
    			div{
    				
    				
    				background: pink;
    			}
    		</style>
    	</head>
    	<body>
    		
    		<div style="height: 100px;"></div>
    	</body>
    </html>

在css文件夹中新建style.css文件

style.css：

div{
    	width: 50px;
    }

测试一下，你可以发现这些样式都会生效。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU0NDU1Mw_size_16_color_FFFFFF_t_70][]

[01.jpg]: /images/20220327/94af019c88ca4d12b49f3bc50e4e8563.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU0NDU1Mw_size_16_color_FFFFFF_t_70]: /images/20220327/31ef2bd7ef2c4a3fb2f3ef7f87bb8bd2.png

发表评论取消回复

表情：

评论列表（有 0 条评论，153人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript的书写方式

JavaScript的三种书写方式

水深无声/ 2024年05月06日 21:23/ 0 赞/ 65 阅读

相关引入，CSS的书写方式

【1】为什么要学习CSS？ HTML画页面--》这个页面就是页面上需要的元素罗列起来，但是页面效果很差，不好看，为了让页面好看，为了修饰页面---》CSS CSS的作用：修

以你之姓@/ 2023年10月03日 22:54/ 0 赞/ 5 阅读

相关 CSS的书写方式

CSS的书写方式 <!DOCTYPE html> <html> <head> <meta ch

川长思鸟来/ 2023年09月27日 15:11/ 0 赞/ 111 阅读

相关引入，CSS的书写方式

【1】为什么要学习CSS？ HTML画页面--》这个页面就是页面上需要的元素罗列起来，但是页面效果很差，不好看，为了让页面好看，为了修饰页面---》CSS CSS的作用：修

骑猪看日落/ 2023年09月27日 13:38/ 0 赞/ 119 阅读

相关 PostCSS一种来自未来的书写CSS方式

[1、PostCSS深入学习: 简写和速写][1_PostCSS_] 2、[PostCSS深入学习: 结合BEM和SUIT方法使用PostCSS][PostCSS_ _BEM

忘是亡心i/ 2022年07月24日 12:06/ 0 赞/ 149 阅读

相关 CSS 书写规范、顺序

CSS书写顺序 1. 位置属性(position, top, right, z-index, display, float等) 2. 大小(width, height

喜欢ヅ旅行/ 2022年06月14日 00:11/ 0 赞/ 255 阅读

相关 css书写规范

1. 列表内容编码设置采用 UTF-8 编码，在 CSS 代码头部使用： @charset "utf-8"; 注意，必须要定义在 CSS 文件所有字符的前

客官°小女子只卖身不卖艺/ 2022年06月10日 23:56/ 0 赞/ 261 阅读

相关 css书写规范

1.位置属性(position, top, right, z-index, display, float等) 2.大小(width, height, paddin

矫情吗；*/ 2022年06月09日 02:07/ 0 赞/ 306 阅读

相关 CSS书写规范、顺序

CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等) 2.大小(width, height,

冷不防/ 2022年05月17日 05:19/ 0 赞/ 264 阅读

相关 CSS的书写方式

CSS书写位置 1、嵌入：<style></style> 2、外联（外链）：<link rel="stylesheet" href="css/.." /> 3、内

系统管理员/ 2022年04月22日 17:26/ 0 赞/ 154 阅读