您的当前位置：首页 css基础知识(二)

css基础知识(二)

来源：华拓科技网

前言

写在开始：

今天我们继续学习css的一些知识,并且复复习一下之前的

文章有误敬请斧正不胜感恩！

以下是本篇文章正文内容，

1. 选择器类型

标签选择器

定义: 选择特定的 HTML 标签并应用样式。
示例:

p {
    font-style: italic; /* 将段落文字设置为斜体 */
}

用途: 常用于通用样式设置，如对所有段落统一字体风格。

类选择器

定义: 用于选择带有特定类的元素。类选择器以点(.)开头。
口诀: 样式点(.)定义，结构(class)调用。
示例:

.red {
    color: red; /* 文字颜色设置为红色 */
    width: 100px; /* 宽度设置为100像素 */
    height: 100px; /* 高度设置为100像素 */
    background-color: red; /* 背景颜色设置为红色 */
}

用途: 可用于多次应用相同样式，比如按钮、卡片等组件。

ID选择器

定义: 用于选择具有特定 ID 的元素。ID选择器以井号(#)开头，通常在页面中唯一。
示例:

#niuma {
    color: purple; /* 将ID为niuma的元素文字颜色设置为紫色 */
}

用途: 常用于特定元素的样式设置，如独特的导航条或特定的内容区域。

通配符选择器

定义: 选择所有元素，不带任何特定条件。
示例:

* {
    margin: 0; /* 清除所有元素的外边距 */
}

用途: 常用于重置样式或在样式表开头设置基础样式。

复合选择器

定义: 由两个或多个选择器组合而成，用于选择符合多个条件的元素。
示例:

div, p, .pig li {
    color: pink; /* 将div、段落和类为pig的li元素文字颜色设置为粉色 */
}

用途: 方便同时设置多种元素的样式，减少重复代码。

2. 元素显示模式

块级元素

特点: 独占一行，宽度、高度、内边距和外边距都可以控制，通常用于结构性元素。
示例:

<div>块元素</div> <!-- 块元素独占一行，后面的元素会换行 -->

用途: 用于布局和分隔内容，例如标题、段落、列表等。

行内元素

特点: 不会独占一行，设置宽高无效，宽度默认是内容宽度，常用于文本。
示例:

<span>行内元素,内联元素</span> <!-- 行内元素不会独占一行 -->

用途: 用于文本装饰或小范围内容，比如超链接和小图标。

行内块元素

特点: 结合了块级和行内元素的特性，可以设置宽高，但不会独占一行。
示例:

span {
    display: inline-block; /* 转为行内块元素，可以设置宽高 */
}

用途: 用于需要控制尺寸的文本或图形，例如图标按钮。

3. 背景属性

背景颜色:

background-color: #fff; /* 设置背景颜色为白色 */

用途: 用于设置元素的背景色，提高可读性。
背景图片:

background-image: url("picture/bgi.png"); /* 控制位置的装饰 */

用途: 用于美化界面，增强视觉效果。
背景平铺:

background-repeat: no-repeat; /* 不平铺 */

用途: 设定背景图像的重复方式，通常用于精美的背景图。
背景位置:

background-position: center center; /* 居中 */

用途: 控制背景图像的显示位置，使其在视觉上更协调。
背景附着:

background-attachment: fixed; /* 背景固定 */

用途: 用于创建滚动效果，使背景在滚动时保持固定。
背景半透明:

background: rgba(255, 255, 255, 0.5); /* 背景半透明 */

用途: 用于叠加效果，增加层次感。

4. 字体和文本属性

复合字体属性:

font: italic 700 16px 'Microsoft YaHei'; /* 顺序和属性重要 */

用途: 一次性设置多个字体属性，提高代码简洁性。
文本对齐:

h1 {
    text-align: center; /* 水平居中对齐 */
}

用途: 控制文本在元素中的排列方式，提升可读性。
文本装饰:

a {
    text-decoration: none; /* 删除链接自带的下划线 */
}

用途: 自定义链接样式，使其更符合整体设计。
段落的首行缩进:

p {
    text-indent: 20px; /* 段落的首行缩进 */
    line-height: 26px; /* 行间距 */
}

用途: 提高文本的可读性和美观度。

/* 必须按顺序且必须保留font-size和font-family属性不然不起作用 /
/ font: font-style font-weight font-size/line-height font-family */

5.垂直居中的实现方法

在 CSS 中，单行文字的垂直居中并没有直接的属性。我们可以通过使文字的行高与其父容器（盒子）的高度相等来实现这一效果。这样，文字就能在容器中垂直居中。

原理

行高的组成：行高不仅包括文字本身的高度，还包含文字上下的空隙（即行间距）。这些空隙是透明的，因此不会影响文本的可读性。
一致性：通过将行高设置为与盒子的高度一致，可以让文字在上下留白之间自动居中。
偏移现象：
- 如果行高大于盒子高度，文字会向下偏移。
- 如果行高小于盒子高度，文字会向上偏移。

示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>垂直居中示例</title>
    <style>
        .container {
            height: 100px; /* 盒子高度 */
            background-color: lightblue; /* 盒子背景色 */
            text-align: center; /* 水平居中 */
            line-height: 100px; /* 行高与盒子高度一致 */
            font-size: 24px; /* 字体大小 */
            color: darkblue; /* 文字颜色 */
        }
    </style>
</head>
<body>

<div class="container">
    垂直居中的文字
</div>

</body>
</html>

6. CSS引入方式

内部样式表: 写在<style>标签内。

<style>
    div {
        color: purple; /* 设置div元素的文字颜色为紫色 */
    }
</style>

用途: 适用于小型项目或临时样式。
行内样式表: 在元素标签内部的style属性中设定样式。

<p style="color: purple;">2是紫色</p> /* 直接设置段落的颜色 */

用途: 适合快速测试样式，但不建议在生产代码中广泛使用。
外部样式表: 通过<link>标签引入单独的 CSS 文件。

<link rel="stylesheet" href="css引入方式练习.css"> /* 引入外部 CSS 文件 */

用途: 推荐使用的方法，便于维护和复用样式。

7. CSS的三大特性

层叠性 (Cascading): 当多个样式规则应用于同一元素时，浏览器会根据样式的来源和位置决定哪个样式生效，遵循就近原则。
继承性 (Inheritance): 某些 CSS 属性会从父元素继承到子元素，父元素对子元素的样式有影响，但反之则不然。
优先级 (Specificity): 选择器的优先级决定样式的最终应用顺序，优先级为：inline styles > ID选择器 > class选择器 > 标签选择器。更具体的选择器会覆盖更一般的选择器。

总结

光说不练假把式,写这个css啊,还是得多写.

今天就到这里,下次见

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文