@TOC


CSS

CSS的语法规则非常简单!
每一个CSS语句包含两个部分:选择器 + 应用属性。


内部样式表

  1. 内部样式表
<style>
p {
/* 设置字体颜色 */
color: red;
/* 设置字体大小 */
font-size: 30px;
}
</style>
<p>hello</p

上面的代码,就是最典型的例子。
其中 style 标签的内容,就是一个 CSS的代码。

image-20220627160305131


内联样式

  1. 内联样式 / 行内样式表

image-20220627160459049

这种内联样式,是属于一种比较特殊的用法,通常会搭配 JS 来使用。

另外,这种写法只适合于样式特别简单的情况。
如果样式比较复杂,这里就会显得很乱。
内联样式只是针对当前元素生效。
也就是说,不需要写选择器,也不用写 {},直接写CSS属性和值即可。

image-20220627160629534


外部样式

  1. 外部样式

这种样式,在实际开发中是用的最多的。

这种样式,就是把 CSS 代码给单独提取出来,放到一个 CSS 文件中。
然后在 HTML 代码量,通过 link 标签,来引入CSS文件

<link rel="stytlesheet" herf="test.css">

image-20220627160918785


样式大小写

CSS 是不区分大小写,但是我们开发时统一使用小写。

HTML 和 CSS 一样,都是不区分大小写的,并且同时使用小写。

正是因为统一使用小写,所以在 CSS中 就不存在 “驼峰命名法”。
比如:将 hello world 挨在一起。

小驼峰:helloWorld
大驼峰:HelloWorld

CSS 里面通常会使用“脊柱命名法”:hello-world
也就是使用 - 号来进行分割单词。


选择器

首先,我们选择器的功能,就是选中页面的元素(标签)。
选择器可以一次选中一个,也可以一次选中一批。


选择器的分类

主分成 2 大类:

1、基础选择器(单个选择器构成的)

2、复合选择器(把多种基础选择器综合运用起来.)

1. 基础选择器

标签选择器

写的选择器,就是一个 HTML 的标签名

image-20220627161554549


类选择器

这个类选择器,可以说是我们最常使用的一个选择器,而且也是最灵活的。
通过 类选择器,我们可以随心所欲的选择任意想要的元素。

理论上来说:只要有这一种选择器就够了。

就是说:有了类选择器,其它的选择器都可以不用。

类选择器怎么创建?

首先,需要在 CSS 代码中,创建一个 类名。

在对应的 HTML 元素中,通过 .class 属性来引用这个类名

此时,具有该类名的元素,就都会应用上相关 CSS 属性

image-20220627161731149


id 选择器

id 选择器的用法,和类选择器有点相似。
但是,与类选择器相比,id选择器还是具有一定的局限性。

想要使用 id 选择器,先给被选中的元素,设定一个 id 属性

首先,要注意 id 在 一个页面中,是唯一的,不可重复的

因此, id 选择器只能选中一个元素,不能选中多个元素

image-20220627161859414


通配符选择器

通配符选择比较简单,就是一个单单的 * 号

通配符,在将 MySQL的时候,概念相似

比如 select 操作中,有一个 模糊匹配的操作,里面就涉及到 通配符的概念。

% 和 _

%: 代表 任意个字符【任意个:大小不做限制,可以是很大或者很小的数。包括0】,且每个字符又可以表示为任意字符(就是打牌中赖子一样,可以将它当做任意一张牌)。
_ :下划线它只能代表一个字符,但是这一个字符是“赖子”,即:可以表示任意字符。

CSS中 * 号,也是类似。

起到的作用:直接选中了页面上的所有元素

最大的用途就是:取消浏览器的默认样式

image-20220627162514097


2.复合选择器

复合选择器,其实就是把上面的基础选择器,进行了组合操作。
通过这个组合,来完成更方便选择元素的一个效果


后代选择器:可以通过多个选择器的组合,能够选中 某个元素里面的子元素,孙子元素(后代元素)

子选择器:通过多个选择器的组合,能够选中某个元素里面的子元素.

后代选择器

后代选择器:

ul .name{
    color: red;
}

image-20220627162816969


子代选择器

子代选择器

ul >.name{
    color: red;
}

image-20220627163117590

这两个有什么区别?

image-20220627163346149


并集选择器

并列的写多个选择器

中间使用逗号来分割

image-20220627163813996


伪类选择器

这个选择器,就不展开介绍了

伪类选择器,其实它是属于一些特殊场景的应用。

伪类选择器个数:选择器 + 冒号 + 不同元素的状态+{应用属性}。

比如:链接伪类选择器

a:link 选择未被访问过的链接
a:visited 选择已经被访问过的链接
a:hover 选择鼠标指针悬停上的链接
a:active 选择活动链接(鼠标按下了但是未弹起)

link 和 visited 不常用。
hover 和 active 比较常用

我演示两个:

image-20220627164513701


弹性布局 ( flex )

弹性布局,主要是安排页面上的元素的 位置 / 排序方式。

默认的网页布局,是从上到下的。(尤其是块级元素独占一行)

实际中的网页不仅仅需要从上到下,也需要从左到右。

所以,我们就可以借助弹性布局,既能完成 水平方向的布局,又能完成垂直方向的布局

先来看水平方向的布局

image-20220627165500721


举例:

通过 水平方向排列方式查看 弹性布局

justify-content :

image-20220627165746868


flex 布局中的最常见的三种操作:

1、设置为弹性布局 – display: flex 来实现

2、设置水平方向的排序 – justify-content: flex-start/center/flex-end

3、设置垂直方向的排序 – align-items: flex-start/center/flex-end

基于上述内容,就可以实现一些主流的页面布局效果了


实战

实现一个典型的页面最典型的布局

image-20220627170132375


下面我们就来基于 弹性布局,来实现出这样的一个页面布局。

<!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>基于弹性布局: 实现典型的页面结构</title>
</head>
<body>
    <style>
        *{
            /* 外边距设置为 0 */
            margin: 0;
            /* 内边距设置为 0 */
            padding: 0;
            /* 盒子模型,保证不影响页面排版 */
            box-sizing: border-box;

        }
        .navigation{
            /* 宽度设置页面的宽度 */
            width: 100%;
            /* 高度一般为50px */
            height: 50px;
            /* 当行背景,取自本题图片城市 */
            background-image: url(城市.jpg);
            /* 字体颜色 白色 */
            color: white;
            /* 文本居中 */
            text-align: center;
            /* 文本垂直居中 */
            line-height: 50px;
            /* 字体大小:20像素 */
            font-size: 20px;
            /* 字体样式:楷体 */
            font-family: "楷体";
        }
        .container{
            width: 100%;
            height: 1000px;
            background-image: url(城市.jpg);
            /* 字体颜色 白色 */
            color: white;
            /* 字体大小:20像素 */
            font-size: 20px;
            /* 字体样式:楷体 */
            font-family: "楷体";
            display: flex;
            justify-content: center;
            align-items: center;

        }
        .container .left, .container .right{
            height: 100%;
            width: 8%;
            background-image: url(海.jpg);
        }
        .container .content{
            height: 100%;
            /* 左右边框占16% */
            width: 84%;
            background-image: url(城市.jpg);
            background-size: cover;
        }

    </style>

    <div class="navigation">导航栏</div>

    <div class="container">
        <div class="left">
            左侧边栏
        </div>
        <div class="content">
            内容区域
        </div>
        <div class="right">
            右侧边栏
        </div>
    </div>

    <div class="footer">
        页脚
    </div>
</body>
</html>

image-20220627170719850