CSS笔记（一）

最新推荐文章于 2024-06-14 08:47:36 发布

小明的Fire计划

最新推荐文章于 2024-06-14 08:47:36 发布

阅读量35

点赞数

分类专栏： html+css 文章标签： css 笔记前端

本文链接：https://blog.csdn.net/AIMing_byte/article/details/132996002

版权

html+css 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

一、CSS简介

1.什么是CSS

CSS：Cascading Style Sheet 层叠样式表

是一组样式设置规则，用于控制页面的外观样式

2.为什么使用CSS

实现内容与样式的分离，便于团队开发

样式复用，便于网站的后期维护

页面的精确控制，让页面更精美

3.CSS作用

页面外观美化

布局和定位

二、基本用法

1.CSS语法

<head>
    <style>
    选择器{
        属性名1:属性值1;
        属性名2:属性值2;
}
     </style>
</head>

选择器：要修饰的对象（东西）

属性名：修饰对象的哪个属性（样式）

属性值：样式的取值

说明：

属性和属性值之间用“：”连接，多个“键值对”之间用";"进行区分。

实例：

h2{font-size:20px; color:red;}

注意：

如果属性值由多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的引号。

p{font-family:"Times New Roman";   }

2.CSS应用方式

也称为CSS引用方式，有三种方式：内部样式、行内样式、外部样式

2.1 内部样式

也称为内嵌样式，在页面头部通过style标签定义

对当前页面中所有符合样式选择器的标签都起作用

<head>
<style type="text/css"> //提示浏览器<style>标签包含的是CSS代码
  选择器{
    属性1：属性值1；
    属性2：属性值2；
    属性3：属性值3；
     }
</style>
</head>

2.2 行内样式

也称为嵌入样式，使用HTML标签的style属性定义

<h2 style="font-size:20px; color:red;">
  使用行内式CSS样式修饰二级标题的字号大小和颜色
</h2>

注意：

只对设置style属性的标签起作用

2.3 外部样式

使用单独的.css文件定义，然后在页面中使用 link标签或 @import指令引入

使用link标签链接外部样式表文件（推荐）

<link rel="stylesheet" type="text/css" href="CSS样式文件的路径">

type属性可以省略

@import 指令导入外部样式表文件

<style>
@import "CSS样式文件的路径";
@import url(CSS样式文件的路径);
</style>