CSS（一）CSS基础语法与样式引入

CSS基础语法与样式引入

1. CSS核心语法规则

CSS样式由选择器 和声明块两部分构成，核心语法格式：

选择器 {
  属性1: 属性值1;
  属性2: 属性值2;
  /* 多条声明用英文分号分隔，最后一条声明分号可省略 */
}

• 选择器：用于精准选中需要设置样式的HTML元素；
• 声明块：包裹在{}内，由一条或多条「属性: 属性值」的键值对组成，属性与属性值之间用英文冒号分隔。

例如：

h1 {
  font-size:20px;
  color: #00F;
}
所有的h1标签的内容，都遵循以上样式

2. 语法规范与注意事项

1. 大小写规则：选择器严格区分大小写，属性和属性值不区分大小写，开发中统一使用小写；

2. 引号规则：属性值由多个单词组成且包含空格时，必须为属性值添加英文双引号，例：p{font-family:"Microsoft YaHei";}；

3. 单位规则：属性值的数字和单位之间不允许出现空格，例：font-size:20px;为正确写法，20 px会导致浏览器解析失败；

4. CSS注释：使用/* 注释内容 */格式，单行/多行注释通用，注释内容不会渲染到页面中，常用于代码标注和样式临时禁用。

   div{
     color:#B91720;
     width:800px;
     /* height:300px;background:red; */ 
     /* 上述注释内容不会生效 */
   }

3. 四种样式引入方式

引入方式	语法格式	特点与适用场景
内联样式（行内样式）	<标签名 style="属性:值;属性:值;"></标签名>	仅对当前标签生效，优先级最高；无法复用样式，破坏结构与表现分离，不推荐大量使用
内部样式表（内嵌式）	<head>内写<style type="text/css">样式代码</style>	仅对当前HTML页面生效，代码结构清晰；适合单页面样式开发、教学演示
引入外部样式文件	<head>内写<link rel="stylesheet" type="text/css" href="css文件路径">	彻底实现结构与样式分离，一个CSS文件可被多个HTML页面复用；企业级开发首选
导入外部样式文件	<style>内写@import url(css文件路径);	与link功能类似，必须写在style标签内其他样式之前；加载性能弱于link，开发中少用

---