CSS基础

最新推荐文章于 2023-08-18 20:40:23 发布

贾维斯Echo

最新推荐文章于 2023-08-18 20:40:23 发布

阅读量269

点赞数

分类专栏：前端学习笔记文章标签： css

本文链接：https://blog.csdn.net/weixin_44621343/article/details/114417620

版权

前端学习笔记专栏收录该内容

29 篇文章 10 订阅

订阅专栏

CSS基础

一、什么是CSS？

CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。

样式指的是HTML标签的显示效果，比如换行、宽高、颜色等等

层叠属于CSS的三大特性之一，我们将在后续内容中介绍

表指的是我们可以将样式统一收集起来写在一个地方或者一个CSS文件里

当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。

CSS3就是css语言，数字3是该语言的版本号

css语言开发的文件是以.css为后缀，通过在html文件中引入该css文件来控制html代码的样式（css语言代码也可以直接写在html文件中）

采用的语言是级联样式表（Cascading Style Sheet），也属于标记语言。

二、为什么要用CSS

在没有CSS之前，我们想要修改HTML标签的样式则需要为每个HTML标签定义样式属性，如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>

<h1 align="center">
    <font color="pink" size="5">天净沙·秋思</font>
</h1>
<p align="center">
    <font color="pink" size="5">锦瑟无端五十弦，一弦一柱思华年。</font>
</p>
<p align="center">
    <font color="pink" size="5">庄生晓梦迷蝴蝶，望帝春心托杜鹃。</font>
</p>
<p align="center">
    <font color="pink" size="5">沧海月明珠有泪，蓝田日暖玉生烟。</font>
</p>
<p align="center">
    <font color="pink" size="5">此情可待成追忆，只是当时已惘然。</font>
</p>
</body>
</html>

这么做的缺点是：

记忆困难：需要记忆每个标签的所有样式相关属性，如果标签没有某个样式相关的属性，那么设置了也没有效果
代码耦合性高：HTML语义与样式耦合到一起
扩展性差：当某一类样式需要修改时，我们需要找到所有设置了该样式标签进行修改

于是CSS应运而生，很好的解决了以上三个问题

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        h1,p {
            color: pink;
            font-size: 24px;
            text-align: center;
        }
    </style>
</head>
<body>

<h1>天净沙·秋思</h1>
<p>锦瑟无端五十弦，一弦一柱思华年。</p>
<p>庄生晓梦迷蝴蝶，望帝春心托杜鹃。</p>
<p>沧海月明珠有泪，蓝田日暖玉生烟。</p>
<p>此情可待成追忆，只是当时已惘然。</p>
</body>
</html>

三、css语法

1. css实例

每个CSS样式由两个组成部分：选择器和声明。

声明由包括属性和属性值。每个声明之后用分号结束。

选择器 {
  属性1:值1;
  属性2:值2;
  属性3:值3;
  属性4:值4;
}

2. 注释

注释是代码之母

/*单行注释*/

/*
多行注释1
多行注释2
多行注释3
*/

通常我们在写css样式的时候也会用注释来划定样式区域(因为HTML代码多所以对呀的css代码也会很多)
/*这是博客园首页的css样式文件*/
/*顶部导航条样式*/
...
/*左侧菜单栏样式*/
...
/*右侧菜单栏样式*/
...

四、CSS的三种引入方式

css是来控制页面标签的样式，但是可以根据实际情况书写在不同的位置，放在不同位置有不同的专业叫法，可以分为行间式、内联式和外联式三种。

1. 行间式

css样式书写在标签的style全局属性中，一条样式格式为样式名: 样式值单位;，可以同时出现多条样式

<!-- 关键代码 -->
<!-- 给div标签设置宽高背景颜色 -->
<div style="width: 200px; height: 200px; background-color: orange;"></div>

2. 内联式

css样式书写在head标签内的style标签中，样式格式为 css选择器 { 样式块 }，样式块由一条条样式组成

<!-- 关键代码 -->
<head>
    <style>
        /* css语法下的注释语法 */
        /* 设置页面中所有h2标签宽高背景颜色 */
        h2 {
            width: 50px; 
            height: 50px; 
            background-color: orange;
        }
        /* 设置页面中所有h3标签宽高背景颜色 */
        h3 {
            width: 100px; 
            height: 100px; 
            background-color: red;
        }
    </style>
</head>
<body>
    <h2></h2>
    <h2></h2>
    <h3></h3>
    <h3></h3>
</body>

3. 外联式

css样式的写法同内联式，但样式书写在css文件中，在html页面中用link标签引入css文件（建议在head标签中引入）

css文件夹下的my.css

/* html文件会引入该css文件，设置所有引入了html文件中的所有p标签宽高背景颜色 */
p {
    width: 50px; 
    height: 50px; 
    background-color: orange;
}

根目录下的first.html

<!-- 关键代码 -->
<head>
    <!--
	rel="stylesheet"：引入的是层级样式表，也就是css文件
	type="text/css"：引入文件采用的是css语法书写文本类型代码
	href="css/my.css"：采用相当路径引入目标css文件
	-->
    <link rel="stylesheet" type="text/css" href="css/my.css">
</head>
<body>
    <!-- 该页面中的p标签样式都被my.css文件控制 -->
    <p></p>
    <p></p>
</body>

跟目录下的second.html

<head>
    <link rel="stylesheet" type="text/css" href="css/my.css">
</head>
<body>
    <!-- 该页面中的p标签样式也都被my.css文件控制 -->
    <p></p>
    <p></p>
</body>