初识css

最新推荐文章于 2025-12-23 21:31:13 发布

原创最新推荐文章于 2025-12-23 21:31:13 发布 · 390 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

web前端专栏收录该内容

21 篇文章

订阅专栏

本文详细介绍了CSS的基本语法规范，包括选择器、声明和注意事项。同时，阐述了三种CSS引入方式：内部样式表、行内样式表和外部样式表，重点推荐了外部样式表的使用，强调其在实际开发中的优势。每种引入方式的优缺点和适用范围也进行了总结。

前言：

css的主要使用场景就是美化页面布局页面
css是层叠样式表的简称
css也是一种标记语言

一，css的基本语法规范

css语法

css规则有两个主要部分构成：选择器以及一条或多条声明

div {
      font-size: 16px;
      color:red;
}

css总结及注意事项

选择器是用于指定css样式的HTML标签，花括号是对该对象设置具体的样式
属性与属性值之间以“键值对”的形式出现
属性是对指定对象设置的样式属性。例如：字体大小等
属性与属性值之间用:(英文冒号)分开
每个声明都是以属性开头以;（英文的分号）结尾
多键值对之间用;（英文的分号）隔开

二，css的引入方式

照css样式书写的位置或引入方式，css样式可以分为三大类：

行内样式表(行内式)
內部样式表（内部式）
外部样式表（链接式）

1.内部样式表

内部样式表是写到HTML页面内部，是将所有css代码抽取出来单独放到一的<style>标签中

<head>
  <style>
       div {
             font-weight:700;
             color:blue;
           }
  </style>
</head

内部样式表注意点

<style>标签理论上可以放在HTML文档的任意位置，但是一般会放在<head>标签中
通过这种方式，可以方便控制当前整个页面中的元素设置
代码的结构清晰，但是并没有实现结构与样式完全分离

2.行内样式表

行内样式表是在元素标签内部的style属性中设定css样式，适用于修改简单样式

语法：

<div style="color:red;" ><div>

行内样式表注意事项：

style其实是标签属性
在双引号中间写法要符合css规范
可以控制当前的标签
由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐使用，只有对当前元素添加简单的结构样式的时候，可以考虑使用

3.外部样式表（吐血推荐）

实际开发都是外部样式表适合于样式比较多的情况

核心是：样式单独写到css文件中，之后把css文件引入到HTML文件中

例如：

引入外部样式表分为两步

新建一个后缀名为css的样式文件把所有的css代码都写入其中
在HTML页面中使用<link>标签引入这个文件

语法：

<head>
   <link rel="stylesheet" herf="css文件地址">
</head>

rel：定义当前文档与被连接文档关系，这里需要指定为“stylesheet”表示被连接文本是一个样式表

使用外部样式表设定css，通常也被称为“外链接”或“链接式引入”这种方式是开发中常用的方式

4.css引入方式总结

样式表	优点	缺点	使用	控制范围
行内样式表	书写方便，权重高	结构样式混杂	较少	控制一个标签
内部样式表	部分结构样式分离	没有完全分离	较多	控制一个页面
外部样式表	完全分离	需要引入	吐血推荐	控制多个页面