css基本语法-天涯论坛 - Powered by Discuz! Archiver

6hz7vif 发表于 2024-6-30 05:06:25

css基本语法

<h3 style="color: black; text-align: left; margin-bottom: 10px;">书写位置</h3>
css的代码按照书写位置区别分为四种书写方式：内联式、内嵌式、外联式、导入式
<h3 style="color: black; text-align: left; margin-bottom: 10px;">内联式</h3>
内联式，亦被习惯叫做行内式
书写位置：在html标签之上的style属性中书写css样式
所有的css样式属性总体构成标签的style属性的属性值
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic3.zhimg.com/80/v2-4aec2dd3348c1ae2b7a17ee7c0a8960e_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
缺点：
内联式必要书写在标签上，无完全脱离html标签
css样式代码让标签结构繁重，有害于html结构的诠释
内联式的css代码，只能给一个标签运用，倘若多个标签有相同的样式，一样的css代码必须书写多次，增多代码量
因此呢，在咱们实质工作中很少会运用内联式（行内式）编写css代码
<h3 style="color: black; text-align: left; margin-bottom: 10px;">内嵌式</h3>
书写位置：在html文件中，<head>标签内部有一个<style>标签
<style>标签书写在<title>标签后面，所有css代码书写在<style>标签内部
<style>标签有一个标签属性叫做type,属性值是"text/css"
<div style="color: black; text-align: left; margin-bottom: 10px;"><style>
 p {
 font-size: 14px;
 }
 </style>
</div>
优点：
实现了结构和样式的初步分离，css只负责样式，html负责结构
多个标签能够利用一个代码设置相同的样式，节省代码量
缺点：
结构和样式并无完全分离，代码依旧写在html文件的<style>标签内部
css样式只能给一个html文件运用，不可狗被多个html文件同期利用
在html中倘若css代码太多，会导致问文件头重脚轻
<h3 style="color: black; text-align: left; margin-bottom: 10px;">外联式</h3>
外联式css，亦能够叫做外链式css、外边css
书写位置：在一个单独的扩展名为xx.css的文件中
书写语法：内部代码与内嵌式样式表中<style>标签内部的代码同样的，必须经过选取器去选中标签，添加对应的样式
重视：文件中只需写样式，不必须再写<style>标签
<div style="color: black; text-align: left; margin-bottom: 10px;">p {
 font-size: 14px;
 }</div>
外联式引用：
外联式样式表必要引入到html文件中，才可正常进行加载
引入方式：在html中的<head>标签内部运用<link>标签进行引入
<link>标签属性：
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic4.zhimg.com/80/v2-d6243ffc750726e4bb43ae146515c8cf_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><link rel="stylesheet" href="xxx.css"></div>
优点：
实现了html和css完全分离
多个html文件能够公用一个css文件，便于提取公共css，减少代码量
能够实现一个css变化，多个html页面同期变化，减少工作量
一个html文件能够引入多个css文件，能够实现同一个页面中css代码分层
<h3 style="color: black; text-align: left; margin-bottom: 10px;">导入式</h3>
书写位置：在内嵌式样式表<style>标签内部，或在外联式样式表内部，导入其他的外边的.css文件
导入方式：利用一条@import url(路径)语句进行引入

m5k1umn 发表于 2024-10-25 01:32:23

对于这个问题，我有不同的看法...

7wu1wm0 发表于 2024-11-5 19:38:33

论坛是一个舞台，让我们在这里尽情的释放自己。

4zhvml8 发表于 2024-11-12 19:33:39

你的见解真是独到，让我受益良多。

页: [1]

天涯论坛's Archiver

css基本语法