响应式网页设计--css

时间：2024-11-18 07:02:25

CSS（Cascading Style Sheets，层叠样式表）是用来控制网页的外观和布局的语言。它与 HTML 一起工作，通过样式定义网页元素的显示方式。CSS 可以控制多种视觉效果，如字体、颜色、布局、间距等。

基本语法：

CSS内部 由多个 选择器和 声明 组成：

选择器 {
    属性: 值;
}
  • 选择器：指明要应用样式的 HTML 元素。
  • 属性：是你想要设置的样式属性（如颜色、字体等）。
  • 值：给属性赋的具体值（如 red, 16px 等）。

选择器

其中元素，类，ID都为常用选择器

元素选择器：选择特定 HTML 元素，如 div、p、h1 等。

p {
    color: blue;
}

类选择器：选择拥有特定类的元素，以 . 开头。

.my-class {
    font-size: 20px;
}

ID 选择器：选择特定 ID 的元素，以 # 开头。

#my-id {
    background-color: yellow;
}

属性选择器：选择具有特定属性的元素。

input[type="text"] {
    border: 1px solid gray;
}

通配符选择器：选择所有元素。

* {
    margin: 0;
    padding: 0;
}

常见属性

颜色：color 用来设置文字颜色，background-color 用来设置背景颜色， border-color 用来设置元素边框颜色的属性

body {
    color: white;
    background-color: black;
    border-color: red;
}

字体：font-size, font-family(指定字体类型), font-weight 等。

h1 {
    font-size: 24px;
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-style: normal | italic | oblique;
   /** normal：默认值，表示正常的字体样式，不应用斜体或倾斜效果。
       italic：表示斜体字。通常字体会以斜体显示，但并不是所有字体都支持斜体效果。如果字体本身不包含斜体样式，浏览器会尝试模拟斜体效果。
       oblique：表示倾斜的字体。与斜体类似，但倾斜效果通常比斜体稍微平缓。oblique 与 italic 的效果可能非常相似，具体取决于浏览器和字体的支持。
}

布局：margin, padding, border, width, height, display 等。

.container {
    width: 100%;
    padding: 20px;
    border: 1px solid #ccc;
}

位置：position, top, right, bottom, left, z-index 等。

.box {
    position: absolute;
    top: 50px;
    left: 100px;
}

布局+位置

margin（外边距）

margin: top right bottom left;

  • top：上边距
  • right：右边距
  • bottom：下边距
  • left：左边距
/* 设置上下左右的外边距 */
div {
    margin: 10px 20px 30px 40px;
}

/* 设置统一的外边距 */
div {
    margin: 20px; /* 四个边的外边距都为 20px */
}

margin-top, margin-right, margin-bottom, margin-left 分别设置四个方向的外边距。

/* 设置单独的上边距 */
div {
    margin-top: 20px;
}

/* 设置单独的右边距 */
div {
    margin-right: 10px;
}

padding（内边距）

padding 用于设置元素内容与其边框之间的内边距，也可以单独设置四个方向的内边距：上、右、下、左。

padding: top right bottom left;

  • top：上内边距
  • right：右内边距
  • bottom：下内边距
  • left：左内边距

同margin。

border（边框）

border 用于设置元素的边框，它同样可以单独设置四个方向的边框：上、右、下、左。每个方向可以设置边框的宽度、样式和颜色。

border: [width] [style] [color];

  • width：边框的宽度（例如：1px, 2px）
  • style：边框的样式（例如：solid, dotted, dashed）
  • color：边框的颜色（例如：red, #000000）
/* 设置四个边的边框 */
div {
    border: 1px solid red;
}

/* 设置单独的上边框 */
div {
    border-top: 2px dashed blue;
}

/* 设置单独的右边框 */
div {
    border-right: 3px solid green;
}

position（定位）

position 属性决定元素的定位方式，并影响元素的 top、right、bottom 和 left 的位置偏移。常见的定位方式包括 static、relative、absolute 和 fixed。

  • top：相对于定位元素的顶部偏移。
  • right：相对于定位元素的右侧偏移。
  • bottom：相对于定位元素的底部偏移。
  • left：相对于定位元素的左侧偏移。
/* 相对定位 */
div {
    position: relative;
    top: 20px;  /* 向下移动 20px */
    left: 30px; /* 向右移动 30px */
}

/* 绝对定位 */
div {
    position: absolute;
    top: 50px;   /* 离父元素顶部 50px */
    right: 10px; /* 离父元素右边 10px */
}

flexbox 布局的对齐属性

Flexbox 布局使得我们可以非常灵活地控制元素在容器内的对齐方式，包括在主轴和交叉轴上的对齐。与上下左右相关的属性主要包括：

  • justify-content：定义主轴（默认是水平轴）上的对齐方式。

    • flex-start: 对齐到主轴的起点
    • center: 居中对齐
    • flex-end: 对齐到主轴的终点
    • space-between: 在项之间均匀分配空间
    • space-around: 每个项周围都有均等的空间

  • align-items：定义交叉轴（默认是垂直轴）上的对齐方式。

    • flex-start: 对齐到交叉轴的起点
    • center: 垂直居中对齐
    • flex-end: 对齐到交叉轴的终点
    • stretch: 拉伸以适应容器（默认）
/* 使用 Flexbox 布局 */
.container {
    display: flex;
    justify-content: space-between; /* 水平对齐，项之间有间隙 */
    align-items: center;             /* 垂直对齐，居中 */
}

grid 布局的对齐属性

Grid 布局也提供了类似的对齐功能，可以让你对元素在网格单元格内的上下左右位置进行控制。

  • justify-items：定义网格项在水平方向上的对齐方式。
  • align-items：定义网格项在垂直方向上的对齐方式。
  • justify-content：定义网格容器在水平方向上的对齐方式。
  • align-content：定义网格容器在垂直方向上的对齐方式。
/* 使用 Grid 布局 */
.container {
    display: grid;
    justify-items: center; /* 水平居中对齐 */
    align-items: center;   /* 垂直居中对齐 */
}

transform 的偏移

transform 可以用来对元素进行位移、旋转、缩放等变换。translate 变换可以直接调整元素的上下左右位置。

div {
    transform: translate(50px, 100px); /* 向右移动 50px，向下移动 100px */
}

总结：

布局中上下左右 相关的 CSS 属性主要包括：

  • margin：设置元素的外边距（上、右、下、左）。
  • padding：设置元素的内边距（上、右、下、左）。
  • border：设置元素的边框（上、右、下、左）。
  • position：通过 top、right、bottom 和 left 设置元素的位置偏移。
  • flexbox 和 grid 布局中的对齐属性：如 justify-content, align-items 等。
  • transform：使用 translate 来偏移元素。

盒模型

CSS 的盒模型定义了每个元素的外边距、边框、内边距和内容区域。盒模型包括：

  • Content（内容区）
  • Padding（内边距）
  • Border（边框）
  • Margin（外边距）
div {
    width: 200px;
    padding: 20px;
    border: 5px solid black;
    margin: 30px;
}

浮动和清除浮动

浮动（float）：元素可以浮动到父元素的左边或右边。

.float-left {
    float: left;
}

清除浮动（clear）：用于控制元素周围的浮动元素的布局。

.clear {
    clear: both;
}

响应式设计

响应式设计允许网页在不同设备上显示合适的样式。例如，使用 @media 查询来为不同的屏幕尺寸应用不同的样式。

@media (max-width: 600px) {
    .container {
        width: 100%;
        padding: 10px;
    }
}

实际在写的时候需要时常在页面进行调整

常见骚操作

a {
  color: black;
}

a:visited {
  color: black;
}

a:hover {
  color: brown;
}

a:active {
  color: brown;
}

解释

a（普通状态）

  • 描述：这是默认的状态，表示用户没有与链接发生交互时，链接的样式。这里将链接颜色设置为黑色。
  • 效果：当用户未访问该链接时，链接的颜色为黑色。

a:visited（访问过的链接状态）

  • 描述：这个伪类选择器应用于用户已经点击并访问过的链接。通常我们希望在访问过的链接上应用不同的样式，以便用户能够识别哪些链接已经点击过。
  • 效果：在你的代码中，访问过的链接颜色仍然是黑色，所以它与未访问的链接颜色相同。你可以选择为访问过的链接设置其他颜色，以便用户区分。

a:hover（鼠标悬停状态）

  • 描述：这个伪类选择器应用于用户将鼠标指针悬停在链接上时。这个状态通常用于提供视觉反馈，例如改变链接的颜色，增强用户交互体验。
  • 效果：当用户将鼠标悬停在链接上时，链接颜色变为棕色。

a:active（点击状态）

  • 描述：这个伪类选择器应用于用户点击并保持鼠标按下的链接。它通常用于提供点击时的视觉反馈。
  • 效果：当用户点击链接时，链接的颜色会变为棕色。与 :hover 相似，但 :active 仅在点击时激活。

实操使用

随便打开一个网页，按F12进入开发者模式

使用选择器

选择你需要调整的模块

点击鼠标左键，进入目标所在代码行

直接修改元素内容即可及时显现

如简单把高改小

相关文章