css学习

最新推荐文章于 2024-11-11 00:01:33 发布

被作业逼疯的孩子

最新推荐文章于 2024-11-11 00:01:33 发布

阅读量520

点赞数

文章标签： css 学习 css3

本文链接：https://blog.youkuaiyun.com/jiatenghui1/article/details/124781822

版权

categories: 前端

CSS层叠样式表

简介

但用HTML写一个页面并不够美观，并且HTML也并不适合用来做简单的样式。

CSS：网页的美容师

CSS语法规范

使用HTML时，需要遵从一定的规范，CSS也是如此。想要熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则

CSS 规则集（rule-set）由选择器和声明块组成：

CSS 选择器

选择器指向您需要设置样式的 HTML 元素。

声明块包含一条或多条用分号分隔的声明。

每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。(键值对)

多条 CSS 声明用分号分隔，声明块用花括号括起来。

CSS代码风格

风格并非强制规范，而是符合实际开发书写方式

样式格式书写
样式大小写风格
样式空格风格

样式格式书写

样式大小写风格

样式空格风格

CSS选择器

作用

选择器（选择符）就是根据不同的需求把不同的标签选择出来这就是选择器的作用。简单来说，就是选择标签用的。

CSS 选择器

以上CSS做了两件事：

找到所有的h1标签。选择器（选对人）。
设置这些标签的样式，比如颜色为红色（作对事）。

选择器分类

我们可以将 CSS 选择器分为五类：

简单选择器：（根据名称、id、类来选取元素）
组合器选择器：（根据它们之间的特定关系来选取元素）
伪类选择器：（根据特定状态选取元素）
伪元素选择器：（选取元素的一部分并设置其样式）
属性选择器：（根据属性或属性值来选取元素）

CSS `id` 选择器

id 选择器使用 HTML 元素的 id 属性来选择特定元素。

元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！

要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。

#para1 {
  text-align: center; 内容居中
  color: red; 文本颜色为红色
}

CSS 类选择器

类选择器选择有特定 class 属性的 HTML 元素。

如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。

.center {
  text-align: center;
  color: red;
}

p.center { /*标签p中的center类*/
  text-align: center;
  color: red;
}

多类名使用方式

	.red {
            width: 100px;
            height: 100px;
            /* 背景颜色 */
            background-color: red;
        }
        
        .font35 {
            font-size: 35px;
        }

<div class="red font35">刘德华</div>

多类名开发场景：

总结：

CSS 通用选择器

通用选择器（*）选择页面上的所有的 HTML 元素。

不用主动调用，自动给所有元素使用样式

特殊情况才使用

下面的 CSS 规则会影响页面上的每个 HTML 元素：

* {
  text-align: center;
  color: blue;
}

CSS 分组选择器

分组选择器选取所有具有相同样式定义的 HTML 元素。(即直接选择标签)

请看下面的 CSS 代码（h1、h2 和 p 元素具有相同的样式定义）：

h1 {
  text-align: center;
  color: red;
}

h2 {
  text-align: center;
  color: red;
}

p {
  text-align: center;
  color: red;
}

在这个例子中，我们对上述代码中的选择器进行分组：

h1, h2, p {
  text-align: center;
  color: red;
}

id选择器

口诀: id选择器的口诀: 样式**#定义**，结构id调用，只能调用一次，别人切勿使用。

    <style>
        #p {
            color: rgb(230, 100, 100);
        }
    </style>

复合选择器

后代选择器

子选择器

只能够选择作为某元素最近的一级子元素.

并集选择器

链接伪类选择器

注意事项:

链接伪类选择器实际工作开发中的写法:

:focus伪类选择器

小样例：

<!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>Document</title>
    <style>
        .red {
            width: 100px;
            height: 100px;
            /* 背景颜色 */
            background-color: red;
        }
        div.green {
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="red">红色</div>
    <div class="green">红色</div>
    <div class="red">红色</div>
</body>
</html>

CSS字体属性

字体

CSS使用font-family属性定义文本的字体系列。

        h2,p {
            font-family: 'Microsoft Yahei';
        }

字体粗细

CSS使用font-weight设置字体粗细

        body {
            font-weight: bold;
        }

文字样式

CSS使用font-style设置文字样式

        body {
            font-style: italic; /*倾斜的字体*/
        }
        h2 {
            font-weight: normal; /*正常的字体 不倾斜*/
        }

复合属性

CSS使用font设置字体系列、大小、粗细、和文字样式（如斜体)

        div {
            /* font-style: italic;
            font-weight: 700;
            font-size: 16px;
            font-family: 'Microsoft yahei'; */
            /* 上面的代码可以使用复合属性设置 font */
            font: italic 700 16px 'Microsoft yahei';
            /* 但是严格要求顺序 不能更换顺序 */
        }

<div>
    今天是个好天气
</div>

font: 100px 'Microsoft yahei';

字体属性总结

装饰文本

文本缩进

CSS的元素显示模式

作用: 网页的标签非常多，在不同的地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。

元素显示模式就是元素（标签）以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>.

HTML元素一般为块元素和行内元素两种类型

块级元素

注意：

行内元素

注意：

行内块级元素

CSS的元素显示模式的总结

元素显示模式的切换

常用于行内元素转化为块级元素的地方

因为行内元素不能够指定宽高的参数.

可以使用display属性来切换元素显示模式

        a {
            display: block;/*转换为块级*/
        }

        a {
            display: inline;/*转换为行内*/
        }

    a {
        display: inline-block;/*转换为行内块级元素*/
    }

侧边栏案例

<!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>Document</title>
    <style>
        /* 设置链接属性 将其设置为块级 背景颜色 缩进 字体大小 下划线 */
        a {
            display: block;
            width: 230px;
            height: 40px;
        
            background-color: #55585a;
            font-size: 14px;
            color: #fff;
            text-decoration: none;
            text-indent: 2em;
        }
        a:hover {
            background-color: #ff6700;
        }
    </style>
</head>
<body>
    <a href="">手机 电话卡</a>
    <a href="">电视 盒子</a>
    <a href="">笔记本 平板</a>
    <a href="">出行 穿戴</a>
    <a href="">智能 路由器</a>
    <a href="">健康 儿童</a>
    <a href="">耳机 音响</a>
</body>
</html>