【Java Web】前端三剑客之 CSS- 汇维网

(目录),上面的代码，就是最典型的例子。其中 style 标签的内容，就是一个 CSS的代码。,,,,,CSS 是不区分大小写，但是我们开发时统一使用小写。,,这个类选择器，可以说是我们最常使用的一个选择器，而且也是最灵活的。通过类选择器，我们可以随心所欲的选择任意想要的元素。,类选择器怎么创建？,,id 选择器的用法，和类选择器有点相似。但是，与类选择器相比，id选择器还是具有一定的局限性。
想要使用 id 选择器，先给被选中的元素，设定一个 id 属性,,通配符选择比较简单，就是一个
单单的 * 号,,后代选择器：,,子代选择器,,这两个有什么区别？,,,比如：链接伪类选择器,我演示两个：,,弹性布局，主要是安排页面上的元素的位置 / 排序方式。,先来看水平方向的布局,,举例：,,flex 布局中的最常见的三种操作：,基于上述内容，就可以实现一些主流的页面布局效果了,实现一个典型的页面最典型的布局,,下面我们就来基于弹性布局，来实现出这样的一个页面布局。,,,内部样式表,

(目录)

CSS

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

内部样式表

内部样式表

<style>
p {
/* 设置字体颜色 */
color: red;
/* 设置字体大小 */
font-size: 30px;
}
</style>
<p>hello</p

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

内联样式

内联样式 / 行内样式表

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

外部样式

外部样式

这种样式，在实际开发中是用的最多的。这种样式，就是把 CSS 代码给单独提取出来，放到一个 CSS 文件中。然后在 HTML 代码量，通过 link 标签，来引入CSS文件

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

样式大小写

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

HTML 和 CSS 一样，都是不区分大小写的，并且同时使用小写。正是因为统一使用小写，所以在 CSS中就不存在 “驼峰命名法”。比如：将 hello world 挨在一起。

小驼峰：helloWorld 大驼峰：HelloWorld

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

选择器

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

选择器的分类

主分成 2 大类：

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

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

1. 基础选择器

标签选择器

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

类选择器

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

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

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

类选择器怎么创建？

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

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

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

id 选择器

id 选择器的用法，和类选择器有点相似。但是，与类选择器相比，id选择器还是具有一定的局限性。 想要使用 id 选择器，先给被选中的元素，设定一个 id 属性

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

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

通配符选择器

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

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

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

% 和 _

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

CSS中 * 号，也是类似。

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

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

2.复合选择器

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

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

后代选择器

后代选择器：

ul .name{
    color: red;
}

子代选择器

子代选择器

ul >.name{
    color: red;
}

这两个有什么区别？

并集选择器

并列的写多个选择器

中间使用逗号来分割

伪类选择器

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

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

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

比如：链接伪类选择器

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

我演示两个：

弹性布局 ( flex )

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

默认的网页布局，是从上到下的。（尤其是块级元素独占一行）实际中的网页不仅仅需要从上到下，也需要从左到右。

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

先来看水平方向的布局

举例：

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

justify-content ：

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

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

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

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

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

实战

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

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

<!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>

1 原创文章作者：成功人士，如若转载，请注明出处： https://www.52hwl.com/36575.html

2 温馨提示：软件侵权请联系469472785#qq.com（三天内删除相关链接）资源失效请留言反馈

3 下载提示：如遇蓝奏云无法访问，请修改lanzous(把s修改成x)

4 免责声明：本站为个人博客，所有软件信息均来自网络修改版软件，加群广告提示为修改者自留，非本站信息，注意鉴别

【Java Web】前端三剑客之 CSS

CSS

内部样式表

内联样式

外部样式

样式大小写

选择器

选择器的分类

1. 基础选择器

标签选择器

类选择器

id 选择器

通配符选择器

2.复合选择器

后代选择器

子代选择器

并集选择器

伪类选择器

弹性布局 ( flex )

实战

关于作者

成功人士注册用户

【Java Web】前端三剑客 之 CSS

CSS

内部样式表

内联样式

外部样式

样式大小写

选择器

选择器的分类

1. 基础选择器

标签选择器

类选择器

id 选择器

通配符选择器

2.复合选择器

后代选择器

子代选择器

并集选择器

伪类选择器

弹性布局 ( flex )

实战

关于作者

成功人士注册用户

相关推荐

【Java Web】前端三剑客之 CSS