蓝桥杯web备赛---css篇

发布于：2025-03-30 ⋅ 阅读:(31) ⋅ 点赞:(0)

2、CSS

写在前面：css一定要掌握flex,grid以及position布局方式，另外之前考过文字溢出的问题，需要注意一下。

position:sticky 粘性定位

记住要设置top:定位在什么位置，不然是不起作用的

一些题目：

文字溢出的问题：文字很多导致文字溢出，我们如下列设置就可以达到：显示 2 行，剩余的内容用省略号（…）替代

  .more2_info_name{
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;
        }
(1)、css背景

  • background-color

  • background-image

  • background-repeat

    repeat-x，repeat-y, no-repeat

  • background-attachment

    背景图像附着：属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）：

    fixed:固定背景图像

    scroll:背景图像应随页面的其余部分一起滚动

  • background-position

    指定背景图像的位置

(2)、css外边距合并

当两个垂直外边距相遇时，它们将形成一个外边距。

(3)、css轮廓

注意：轮廓与边框不同！不同之处在于：轮廓是在元素边框之外绘制的，并且可能与其他内容重叠。同样，轮廓也不是元素尺寸的一部分；元素的总宽度和高度不受轮廓线宽度的影响。

  • outline-style
  • outline-color
  • outline-width
  • outline-offset：在元素的轮廓与边框之间添加空间
  • outline
(4)、文字间距

text-indent 属性用于指定文本第一行的缩进：

letter-spacing 属性用于指定文本中字符之间的间距。

line-height 属性用于指定行之间的间距：

word-spacing 属性用于指定文本中单词之间的间距。

white-space 属性指定元素内部空白的处理方式(nowrap不允许换行)

(5)、阴影效果

  • text-shadow

    h1 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

    text-shadow:水平阴影，垂直阴影，模糊，颜色

  • box-shadow

    同上

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
  font-family: "Sofia";
  font-size: 22px;
}
</style>
</head>
<body>

<h1>Sofia Font</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

</body>
</html>

引入谷歌字体，感觉能用

(6)、css列表

list-style-type 属性指定列表项标记的类型

属性：circle、square、upper-roman、lower-alpha、url()

list-style-position 属性指定列表项标记（项目符号）的位置

outside、inside

(7)、css表格
属性 描述
border 简写属性。在一条声明中设置所有边框属性。
border-collapse 规定是否应折叠表格边框。
border-spacing 规定相邻单元格之间的边框的距离。
caption-side 规定表格标题的位置。
empty-cells 规定是否在表格中的空白单元格上显示边框和背景。
table-layout 设置用于表格的布局算法。

text-align:水平对齐

vertical-align:垂直对齐

(8)、清除浮动

clear 属性指定哪些元素可以浮动于被清除元素的旁边以及哪一侧

如果一个元素比包含它的元素高，并且它是浮动的，它将“溢出”到其容器之外：

然后我们可以向包含元素添加 overflow: auto;，来解决此问题：

变化代码：

<div class="clearfix">
  <h1>With Clearfix</h1>
  <img class="img2" src="/i/logo/w3logo-3.png" alt="W3School" width="180" height="167">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...
</div>
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
(9)、颜色渐变

线性渐变：

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

默认从上到下，也可以从左到右(to right ),对角线(to bottm right)

径向渐变：径向渐变由其中心定义。

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

默认地，shape 为椭圆形，size 为最远角，position 为中心

(10)、文本效果

  • text-overflow：如何向用户呈现未显示的溢出内容

    clip:直接被剪裁

    ellipsis:省略号代替

  • word-wrap

  • word-break：强制对文本进行换行

    breakword:强制换行：keep-all:此行将连字符打断,break-all:全部打断

  • writing-mode：书写方式

    horizontal-tb：水平

    vertical-rl：竖直

使用文本方式使表格怎么竖列

思路：表格竖直书写，里面的内容水平书写

    <style>
       table {
         writing-mode: vertical-lr;
         border: 1px solid #555;
         border-collapse: collapse;
     }
     td,
     th {
         width: 80px;
         border: 1px solid #555;
         writing-mode: horizontal-tb;
     }
    </style>
    <table>
        <tr>
            <th>单元格1</th>
            <th>单元格2</th>
            <th>单元格3</th>
        </tr>
        <tr>
            <td>单元格4</td>
            <td>单元格5</td>
            <td>单元格6</td>
        </tr>
    </table>
(11)、2d转换

transform属性：

  • translate()

    移动元素

  • rotate()

    根据给定的角度顺时针或逆时针旋转元素

  • scaleX()

    增加或减少元素的宽度

  • scaleY()

    增加或减少元素的高度

  • scale()

    增加或减少元素的大小

  • skewX()

    使元素沿 X 轴倾斜给定角度

  • skewY()

    元素沿 Y 轴倾斜给定角度

  • skew()

    使元素沿 X 和 Y 轴倾斜给定角度`

(12)、3d转换

transform:

  • rotateX()

    元素绕其 X 轴旋转给定角度

  • rotateY()

    使元素绕其 Y 轴旋转给定角度

  • rotateZ()

    元素绕其 Z 轴旋转给定角度

    ​

transform-origin:允许你改变被转换元素的位置

transform-style:规定被嵌套元素如何在 3D 空间中显示

perspective:规定 3D 元素的透视效果

perspective-origin:规定 3D 元素的底部位置

backface-visibility:定义元素在不面对屏幕时是否可见

(13)、css过渡

允许您在给定的时间内平滑地改变属性值

  • transition：改变的属性值，持续时间，速度
  • transition-delay：延迟过度效果
  • transition-duration：过渡效果要持续多少秒或毫秒
  • transition-timing-function：定义过渡的速度曲线
    • ease - 规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）
    • linear - 规定从开始到结束具有相同速度的过渡效果
    • ease-in -规定缓慢开始的过渡效果
    • ease-out - 规定缓慢结束的过渡效果
    • ease-in-out - 规定开始和结束较慢的过渡效果
(14)、css动画

  • @keyframes：规定css样式

    @keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

  • animation-name：动画名称

  • animation-duration：动画持续时间

  • animation-delay：动画的延迟时间

  • animation-iteration-count:运行多少次

    infinite：一直运行下去

  • animation-direction:向前播放、向后播放还是交替播放动画

    • normal - 动画正常播放（向前）。默认值
    • reverse - 动画以反方向播放（向后）
    • alternate - 动画先向前播放，然后向后
    • alternate-reverse - 动画先向后播放，然后向前

  • animation-timing-function:速度曲线，见上

  • animation-fill-mode:动画的填充方式

    • none - 默认值。动画在执行之前或之后不会对元素应用任何样式。
    • forwards - 元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iteration-count）。
    • backwards - 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。
    • both - 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。

  • animation：简写：动画名称，持续时间，速度曲线，延迟时间，进行多少次，方向

(15)、object-fit

当我们改变图片的大小破坏了原始宽高比的时候，我们就可以使用这个，会剪切图像的侧面，保留长宽比

object-fit: cover;"，因此如果我们调整浏览器窗口大小，图像的高宽比会被保留：

  • fill - 默认值。调整替换后的内容大小，以填充元素的内容框。如有必要，将拉伸或挤压物体以适应该对象。
  • contain - 缩放替换后的内容以保持其纵横比，同时将其放入元素的内容框。
  • cover - 调整替换内容的大小，以在填充元素的整个内容框时保持其长宽比。该对象将被裁剪以适应。
  • none - 不对替换的内容调整大小。
  • scale-down - 调整内容大小就像没有指定内容或包含内容一样（将导致较小的具体对象尺寸）
(16)、object-position

用于指定 或 在其容器中的位置

object-fit: cover; 来保持宽高比并填充给定的尺寸

(17)、遮罩层

mask-image:指定遮罩层图像

mask-image 属性指定用作元素遮罩层的图像。

mask-repeat 属性指定遮罩图像是否重复或如何重复。no-repeat 值表示遮罩图像不会重复

-webkit-mask-image: linear-gradient(black, transparent);

在使用之前我们可以添加一句-webkit-mask-image，内容和我们想要的内容是相同的

(18)、css多列属性
  • column-count：创建多列
  • column-gap：间隙
  • column-rule-style：列的规则
  • column-rule-width：列之间的规则宽度
  • column-rule-color：列之间的规则颜色
  • column-rule：联合
  • column-span：跨越多少列
  • column-width：列指定建议的最佳宽度
(19)、变量

全局作用域的变量，请在 :root 选择器中声明它

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}

使用：

background-color: var(--white);
  color: var(--blue);
(20)、flex
属性 描述
display 规定用于 HTML 元素的盒类型。
flex-direction 规定弹性容器内的弹性项目的方向。
justify-content 当弹性项目没有用到主轴上的所有可用空间时，水平对齐这些项目。
align-items 当弹性项目没有用到主轴上的所有可用空间时，垂直对齐这些项。
flex-wrap 规定弹性项目是否应该换行，若一条 flex 线上没有足够的空间容纳它们。
align-content 修改 flex-wrap 属性的行为。与 align-items 相似，但它不对齐弹性项目，而是对齐 flex 线。
flex-flow flex-direction 和 flex-wrap 的简写属性。
order 规定弹性项目相对于同一容器内其余弹性项目的顺序。
align-self 用于弹性项目。覆盖容器的 align-items 属性。
flex flex-grow、flex-shrink 以及 flex-basis 属性的简写属性。
(21)、grid布局

是一种二维布局系统，用于在网页上创建复杂的布局设计。它允许你将页面划分为多个行和列，并可以自由地放置元素在想要的网格区域中。

  • display: grid | inline-grid;
    • 将元素定义为一个网格容器。
    • grid：块级网格。
    • inline-grid：行内网格。
  • grid-template-columns 和 grid-template-rows
    • 定义网格的列和行的大小。
    • 可以使用像素、百分比、fr单位（fractional unit，表示可用空间的一部分）等。
  • grid-column-gap 和 grid-row-gap （或简写为 grid-gap）
    • 设置网格线之间的间隔。
  • grid-template-areas
    • 通过引用具名网格区域来定义网格布局。
    • 使用网格区域名称来指定网格布局。

项目属性：

  • grid-column-start、grid-column-end、grid-row-start、grid-row-end （或简写为 grid-column 和 grid-row）
  • grid-area
    • 是 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 的简写。
    • 也可以用于引用 grid-template-areas 中定义的网格区域名称。
  • justify-self 和 align-self
    • 分别用于覆盖网格项的默认水平对齐和垂直对齐。
    • 取值与 justify-items 和 align-items 相同。

示例：

创造一个网格布局，6 个纵列（column）：前后两列两等分（可用 fr 代表一份），中间 4 列均为 25px 宽度；4 个横行（row）：上下均为 50px，中间两等分。

display: grid;
  grid-template-columns: 1fr 25px 25px 25px 25px 1fr;
  grid-template-rows: 50px 1fr 1fr 50px;

.eye.left {
  /* 按照图示选取 grid-area */
  grid-area:2/2/3/3;
}
(22)、媒体查询

@media screen and (max-width : 800px) {}

当响应到宽度小于900px的时候执行

小tips:

.menu-btn:hover~ .collapse{
    display: block;
  }
  • ~：这是一个通用兄弟选择器，用于选择.menu-btn之后的所有.collapse兄弟元素。

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布