CSS基础知识

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

极致千叶

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

阅读量135

点赞数 1

分类专栏：前端知识文章标签： css css3 html

本文链接：https://blog.csdn.net/mzpqq/article/details/124519580

版权

前端知识专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.CSS 是什么？

CSS：层叠样式表 (Cascading Style Sheets)。
CSS能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离。

2.CSS 基本语法

选择器 + {一条/N条声明(描述)}
☻选择器决定针对谁修改 (找谁)
☻声明决定修改啥. (干啥)
代码示例：

    <style>
        h2{
            color: blue;
        }
    </style>
    <h2>基本信息</h2>

注意:
● CSS 要写到 style 标签中(后面还会介绍其他写法)
● style 标签可以放到页面任意位置. 一般放到 head 标签内.
● CSS 使用 /* */ 作为注释. (使用 ctrl + / 快速切换) .

3.CSS 类型

CSS 类型分为 3 种：

行内样式
内部样式
外部样式

3.1 行内样式（适用范围小）

通过 style 属性, 来指定某个标签的样式.
只适合于写简单样式. 只针对某个标签生效.
缺点: 不能写太复杂的样式.
这种写法优先级较高, 会覆盖其他的样式.

<h2 style="color: aqua;">教育背景</h2>

3.2 内部样式（适用范围适中）

写在 style 标签中，嵌入到 html 内部的样式叫做内部样式。
一般是放到 head 标签中.
优点: 这样做能够让样式和页面结构分离.
缺点: 分离的还不够彻底. 尤其是 css 内容多的时候.
内部样式基本用法如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>我的简历</title>
    <style>
        h2{
            color: blue;
        }
    </style>
</head>
<body>
    <h2>基本信息</h2>
</body>
</html>

3.3 外部样式（适用范围最大）

实际开发中最常用的方式.

创建一个 css 文件.
使用 link 标签引入 css
在html文件中引用css文件

<link rel="stylesheet" href="[CSS文件路径]">

示例：
创建一个html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个CSS示例</title>
    <Link rel="stylesheet" href="D:/Users/Administrator/Desktop/html/CSS.css"></Linkrel>></Link>
</head>
<body>
    <div>你好，CSS</div>
</body>
</html>

创建css文件：

div{
    color: chartreuse;
    font-size: 30px;
}

效果如图：
在这里插入图片描述
优点: 样式和结构彻底分离了.
缺点: 受到浏览器缓存影响, 修改之后不一定立刻生效.

3.4 多种样式优先级

行内样式 > 内部样式 > 外部样式

4.代码风格

1. 紧凑风格

div{color: chartreuse;font-size: 30px;}

2. 展开风格

div{
    color: chartreuse;
    font-size: 30px;
}

推荐使用展开风格。
开发统一使用小写字母。

5.选择器

5.1 选择器功能

选中页面中指定的标签元素.
要先选中元素, 才能设置元素的属性.

5.2 选择器种类

常见选择器
● 标签选择器
● 类选择器
● id 选择器
● 通配符选择器

5.2.1 标签选择器

特点:
●能快速为同一类型的标签都选择出来.
●不能差异化选择
示例：

 <style>
        h2{
            color: blue;
        }
    </style>
    <h2>基本信息</h2>

5.2.2 类选择器

特点:
●差异化表示不同的标签
●可以让多个标签的都使用同一个标签.

        <style>
            .div1{
                color: blue;
            }
        </style>
    <div class="div1">你好，CSS</div>

a）类样式定义
.类样式名称{
…
}
b)类样式使用
<div class="类样式名称"></div>

注意: 一个标签可以同时使用多个类名
●类名用 . 开头的
●下方的标签使用 class 属性来调用.
●一个类可以被多个标签使用, 一个标签也能使用多个类(多个类名要使用空格分割, 这种做法可以让代码更好复用)
●如果是长的类名, 可以使用 - 分割.
●不要使用纯数字, 或者中文, 以及标签名来命名类名.

5.2.3 id 选择器

和类选择器类似.
●CSS 中使用 # 开头表示 id 选择器
●id 选择器的值和 html 中某个元素的 id 值相同
●html 的元素 id 不必带 #
●id 是唯一的, 不能被多个标签使用 (是和类选择器最大的区别)

        <style>
            #ha{
                color: blueviolet;
            }
        </style>
    <div id="ha">你好，CSS</div>

类比：
姓名是类选择器, 可以重复.
身份证号码是 id 选择器, 是唯一的.

5.2.4 通配符选择器

使用 * 的定义, 选取所有的标签.

        <style>
            *{
                color: crimson;
            }
        </style>

页面的所有内容都会被修改 .
不需要被页面结构调用.

5.2.5 选择器小结

	作用	特点
标签选择器	能选出所有相同的标签	不能差异化选择
类选择器	能选出一个或多个标签	根据需求选择，最灵活，最常用
id选择器	能选出一个标签	同一个id在html中只能出现一次
通配符选择器	选择所有标签	特殊情况下使用

6.常用元素属性

6.1 字体属性

6.1.1 设置字体

        <style>
            .a1 .one{
                font-family: "SimSun";
            }
            .a1 .two{
                font-family: "SimHei";
            }
        </style>
    <div class="a1">
        <div class="one">
            这是宋体
        </div>
        <div class="two">
            这是黑体
        </div>
    </div>

字体英文查询
●字体名称可以用中文, 但是不建议.
●多个字体之间使用逗号分隔. (从左到右查找字体, 如果都找不到, 会使用默认字体. )
●如果字体名有空格, 使用引号包裹.
●建议使用常见字体, 否则兼容性不好.

6.1.2 字体大小

 .a1 .one{
     font-size: 40px;
     }

●不同的浏览器默认字号不一样, 最好给一个明确值. (chrome 默认是 16px)
●可以给 body 标签使用 font-size
●要注意单位 px 不要忘记.
●标题标签需要单独指定大小

6.1.3 字体粗细

 .a1 .one{
      font-weight: 700;
 }

●可以使用数字表示粗细.
●700 == bold, 400 是不变粗, == normal
●取值范围是 100 -> 900

6.1.4 文字样式

/* 设置倾斜 */
font-style: italic;
/* 取消倾斜 */
font-style: normal;

很少把某个文字变倾斜，但是经常要把 em / i 改成不倾斜.

6.1.5 文本属性

① 文本颜色
我们的显示器是由很多很多的 “像素” 构成的. 每个像素视为一个点, 这个点就能反映出一个具体的颜色.
我们使用 R (red), G (green), B (blue) 的方式表示颜色(色光三原色). 三种颜色按照不同的比例搭配, 就能混合出各种五彩斑斓的效果.
计算机中针对 R, G, B 三个分量, 分别使用一个字节表示(8个比特位, 表示的范围是 0-255, 十六进制表示为 00-FF).
数值越大, 表示该分量的颜色就越浓. 255, 255, 255 就表示白色; 0, 0, 0 就表示黑色.
设置文本颜色

color: red;
color: #ff0000;
color: rgb(255, 0, 0);

② 文本对齐
控制文字水平方向的对齐.
不光能控制文本对齐, 也能控制图片等元素居中或者靠右

        <style>
            .a1 .one{
                text-align: left;
            }
            .a1 .two{
                text-align: center;
            }
            .a1 .three{
                text-align: right;
            }
        </style>
    <div class="a1">
        <div class="one">
            居左
        </div>
        <div class="two">
            居中
        </div>
        <div class="three">
            居右
        </div>
    </div>

●center: 居中对齐
●left: 左对齐
●right: 右对齐

6.2 背景属性

6.2.1 背景颜色

background-color: 指定颜色;

默认是 transparent (透明) 的. 可以通过设置颜色的方式修改.

6.2.2 背景图片

background-image: url(路径);

注意:

url 不要遗漏.
url 可以是绝对路径, 也可以是相对路径
url 上可以加引号, 也可以不加.

6.2.3 背景平铺

background-repeat: 平铺方式

重要取值:
●repeat: 平铺
●no-repeat: 不平铺
●repeat-x: 水平平铺
●repeat-y: 垂直平铺

默认是 repeat.
背景颜色和背景图片可以同时存在. 背景图片在背景颜色的上方

6.2.4 背景尺寸

background-size: length|percentage|cover|contain;

●可以填具体的数值: 如 40px 60px 表示宽度为 40px, 高度为 60px
●也可以填百分比: 按照父元素的尺寸设置.
●cover: 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法
●显示在背景定位区域中。
●contain: 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域.

7.页面布局—盒模型

每一个 HTML 元素就相当于是一个矩形的 “盒子”
这个盒子由这几个部分构成
●边框 border
●内容 content
●内边距 padding
●外边距 margin
在这里插入图片描述

7.1 边框

基础属性：
粗细: border-width
样式: border-style, 默认没边框. solid 实线边框 dashed 虚线边框 dotted 点线边框
颜色: border-color
以下的代码只给上边框设为红色, 其余为蓝色.
利用到的层叠性, 就近原则的生效.

border: 1px solid blue;
border-top: red;

通过 box-sizing 属性可以修改浏览器的行为, 使边框不再撑大盒子.

* {
box-sizing: border-box;
}

7.2 内边距

padding 设置内容和边框之间的距离.
padding-top
padding-bottom
padding-left
padding-right

复合写法

可以把多个方向的 padding 合并到一起. [四种情况都要记住, 都很常见]

padding: 5px; 表示四个方向都是 5px
padding: 5px 10px; 表示上下内边距 5px, 左右内边距为 10px
padding: 5px 10px 20px; 表示上边距 5px, 左右内边距为 10px, 下内边距为 20px
padding: 5px 10px 20px 30px; 表示 上5px, 右10px, 下20px, 左30px (顺时针)

7.3 外边距

控制盒子和盒子之间的距离.
可以给四个方向都加上边距
margin-top
margin-bottom
margin-left
margin-right

复合写法

规则同 padding

margin: 10px; // 四个方向都设置
margin: 10px 20px; // 上下为 10, 左右 20
margin: 10px 20px 30px; // 上 10, 左右 20, 下 30
margin: 10px 20px 30px 40px; // 上 10, 右 20, 下 30, 左 40