CSS复习笔记

CSS复习笔记

CSS 引入方式

使用HTML标签的style属性（行内式）

将style属性直接加在单个的HTML元素标签上，控制HTML标签的表现样式。

这种引入CSS的方式是分散灵活方便，但缺乏整体性和规划性，不利于后期的修改和维护，当需要修改网站的样式时，一个相同的修改可能涉及多个地方，维护成本高。使用STYLE属性的样式效果最强，会覆盖掉其它几种引入方式的相同样式效果。

不推荐此方法

<div style="color:red"></div>

使用style标签（内嵌式）

将样式代码写在页面<style>...</style>标签之中

标签结构可以位于页面标签中的任何位置，也可以多次出现。通常是将整个结构写在页面的...部分中。

这种引入CSS方式的特点是每个页面的CSS代码可能具有统一性和规划性，一个页面内部便于复用和维护，但多个页面之间的CSS代码复用仍然不够。

<style> 

bdoy {font-size:14px;}

</style>

使用link标签引入外部CSS文件（链接式）

将css代码写在一个单独的文件中，用link标签直接引入该文件到页面中。一个页面可以多次使用LINK标签引入多个外部css文件，注意这些CSS代码的相互影响，通常是后引入的CSS文件会覆盖前面引入的CSS文件的相同效果。

这种引入CSS的方式是目前最为流行的，可以在站个网站范围内进行CSS代码的规划，方便复用和维护，但这样将代码高度集中，代码量可能过大，维护不当的话又容易出现混乱。

<link rel="stylesheet" type="text/css" href="style.css">

CSS 选择器

CSS 选择器是一种用于选择要应用样式的 HTML 元素的方式。选择器可以基于元素的类型、属性、ID、类和其他特征来选择元素。

选择器demo

<!DOCTYPE html>
<html>

<head>
    <title>CSS Selectors Example</title>
</head>

<body>
    <div id="header">
        <h1>CSS Selectors Example</h1>
    </div>
    <div class="intro">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fringilla mi sit amet nulla cursus, ac auctor
            augue malesuada.</p>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    </div>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
    <h2>Section Title</h2>
    <p>This paragraph has some text.</p>
    <a href="https://www.cnblogs.com/dapenson/">dapenson blog</a>
    <form>
        <input type="submit" value="Submit">
    </form>
</body>

<style>
    /* 元素选择器 */
    h1 {
        color: blue;
    }

    /* ID 选择器 */
    #header {
        background-color: gray;
    }

    /* 类选择器 */
    .intro {
        font-size: 1.2em;
    }

    /* 后代选择器 */
    div p {
        text-align: justify;
    }

    /* 子选择器 */
    ul>li {
        font-weight: bold;
    }

    /* 相邻兄弟选择器 */
    h2+p {
        font-style: italic;
    }

    /* 存在属性选择器 */
    [href] {
        color: green;
    }

    /* 值属性选择器 */
    [type="submit"] {
        background-color: yellow;
    }

    /* 子串值属性选择器 */
    a[href*="dapenson"] {
        font-weight: bold;
        font-size: 1.2em;
    }
</style>

</html>

这个例子包含了一个标题、一个 ID 为 header 的 div 元素、一个类为 intro 的 div 元素、一个无序列表、一个 h2 元素、一个 p 元素和一个超链接。在样式表中，我们使用了所有基础选择器种类来选择不同的元素并设置不同的样式，包括元素选择器、ID 选择器、类选择器、后代选择器、子选择器、相邻兄弟选择器、存在属性选择器、值属性选择器和子串值属性选择器。这些选择器的使用可以使我们更加精确地选择并样式化 HTML 元素。

基础选择器

元素选择器

元素选择器是选择指定 HTML 元素的最基本的选择器。它们是通过元素的名称来定义的。例如：

p {
  color: red;
}

这将选择所有 <p> 元素，并将它们的文本颜色设置为红色。

ID 选择器

ID 选择器使用元素的 ID 属性来选择元素。ID 属性应该是唯一的，因此每个 ID 只能选择一个元素。例如：

#myElement {
  font-weight: bold;
}

这将选择 ID 为 myElement 的元素，并将其字体加粗。

类选择器

类选择器使用元素的 class 属性来选择元素。一个元素可以有多个类名。例如：

.highlight {
  background-color: yellow;
}

这将选择所有类名为 highlight 的元素，并将它们的背景颜色设置为黄色。

层次选择器

层次选择器是指基于元素之间的层次关系来选择元素的选择器。

后代选择器

后代选择器可以选择指定元素的所有后代元素。例如：

container p {
  margin: 10px;
}

这将选择所有 <p> 元素，但只有在它们是 .container 元素的后代时才应用规则。

子选择器

子选择器可以选择指定元素的直接子元素。例如：

ul > li {
  list-style: none;
}

这将选择所有 <li> 元素，但只有在它们是 <ul> 元素的直接子元素时才应用规则。

相邻兄弟选择器

相邻兄弟选择器可以选择指定元素之后紧随的相邻兄弟元素。例如：

h2 + p {
  font-style: italic;
}

这将选择 <h2> 元素之后的第一个 <p> 元素，并将其字体样式设置为斜体。

属性选择器

属性选择器可以基于元素的属性值来选择元素。

存在属性选择器

存在属性选择器可以选择带有指定属性的元素，无论该属性的值是什么。例如：

a[target] {
  color: blue;
}

这将选择所有带有 target 属性的链接，并将它们的文本颜色设置为蓝色。

值属性选择器

值属性选择器可以选择具有特定属性值的元素。例如：

a[href="https://www.google.com"] {
  font-weight: bold;
}

这将选择所有 href 属性等于 `https://www.google.com的链接，并将其字体加粗。

子串值属性选择器

子串值属性选择器可以选择具有包含指定子串的属性值的元素。例如：

img[src*="logo"] {
  border: 1px solid black;
}

这将选择所有 src 属性包含子串 logo 的图像，并将它们的边框设置为 1 像素的黑色边框。

选择器小结

CSS 选择器是一种强大的工具，可以让我们更轻松地选择并样式化 HTML 元素。

本章介绍了 CSS 选择器的一些基础知识和常见用法，包括元素选择器、ID 选择器、类选择器、后代选择器、子选择器、相邻兄弟选择器、存在属性选择器、值属性选择器、子串值属性选择器和伪类选择器。

CSS盒子模型

CSS 盒子模型 | 菜鸟教程 (runoob.com)

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：

  • Margin(外边距) - 清除边框外的区域，外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域，内边距是透明的。
  • Content(内容) - 盒子的内容，显示文本和图像。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model)：

box-model.gif (536×289) (runoob.com)

链接教程

CSS定位

position 属性指定了元素的定位类型。

position 属性的五个值：

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。

元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：

元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动：

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于:

sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。

position: sticky; 基于用户的滚动位置来定位。

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。

posted @ 2023-02-17 14:59  Dapenson  阅读(31)  评论(0)  编辑  收藏  举报