快乐的CSS基础

已于 2024-04-12 13:22:57 修改
阅读量601 收藏 11
点赞数 23
分类专栏： 前端 文章标签： css 前端
于 2024-04-12 13:18:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38423732/article/details/137677086
版权

!](https://img-blog.csdnimg.cn/direct/28a2f38e75f04020abc99391a0581b36.png#pic_center)

一、什么是CSS3

如何学习

SEO搜索引擎优化

  1. CSS是什么
    1. Cascading Sheet层叠级联样式表，表现，网页美化
    2. CSS发展史：CSS1.0 CSS2.0 DIV + CSS HTML和CSS结构分离 CSS 2.1 CSS3.0
  2. CSS怎么用
  3. CSS选择器
  4. 美化网页
  5. 盒子模型
  6. 浮动
  7. 定位
  8. 网页动画（菜鸟教程）

二、快速入门

规范：在<style>中写CSS代码

CSS的注释是/**/

选择器 {

声明1;

声明2；

}

在CSS文件里不用写

CSS的优势：

  1. 内容和表现分离
  2. 网页结构表现统一可以复用
  3. 样式十分丰富
  4. 建议使用独立于html的css文件
  5. 利用SEO，容易被搜索引擎搜索

三、CSS的三种导入方式

  1. 行内样式，在标签元素中编写一个style属性，编写样式即可

    <h1 style="color:red">我是标题</h1>有多个属性用;分开

  2. 内部样式

    在<style></style>中的

  3. 外部样式

    写在外部CSS文件的

    优先级：就近原则，谁里这个元素最近

    拓展：外部样式两种写法

    • 链接式：属于HTML的

      在head中<link rel="stylesheet" href="path">

      好处就是结构和样式一起渲染出来

    • 导入式：属于CSS2.1

      <style>
    @import url("path");
</style>

      缺点就是先渲染结构，在渲染样式

四、选择器

作用：选择页面上的某一个或者某一类元素

1.基本选择器

  1. 标签选择器

    标签 {
key:value;
}
标签1，标签2，.... {

}

  2. 类选择器 class

    <style>																												
    .类的名称 {
        
    }
</style>
好处是可以多个标签复用类，选择所有class属性一致的标签，可以有多个用空格隔开

  3. id选择器

    <style>
    #id名称 {
        
    }
</style>
id必须保证全局唯一，一个id只能一个标签使用

    优先级：id > class > 标签

2.高级选择器

  1. 层次选择器

    1. 后代选择器：后代选择器用于选取某元素的后代元素

      父元素 后代元素 {

}

    2. 子选择器：子元素选择器（Child selectors）只能选择作为某元素直接/一级子元素的元素

      body>p {

}

    3. 相邻兄弟选择器：相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素

      div+p
{
  background-color:yellow;
}

    4. 通用选择器：选取所有指定元素之后的相邻兄弟元素

      div~p
{
  background-color:yellow; 
}

3.结构伪类选择器

伪类：就是有一些条件

1.选择第一个子元素

ul li:first-child {

}

2.选择最后一个子元素

ul li:last-child {

}

3.选择当前元素的父级元素的子元素的第一个，且是p，在本例中。这个是按照类型进行选择

p:nth-child(1) {

}

4.选中父元素下的p元素的第二个，这个是按照顺序选择

p:nth-of-type(1) {

}

4.属性选择器

属性选择器的格式
1.属性名：存在id属性的元素 a[id]{

}
2.属性名 = 属性值：a[id=first]{

}
注意：=是绝对等于	*=是包含这个元素
3.a中href中以http开头的 a[href^=http]{

}
注意：可以使用正则表达式

五、美化网页

1.为什么要美化

  1. 有效的传递界面信息
  2. 美化网页吸引用户
  3. 凸显页面的主题
  4. 提高用户的体验

span标签：重点要突出的字使用span标签括起来

2.字体样式

1.字体	font-family:字体1, 字体2,...;
2.字体大小	font-size:20px;
3.字体粗细	font-wigth:bold或者使用数字最大是900;
4.字体的颜色	color:颜色;
5.字体风格	font-style:italic;
综合写法：
font:字体粗细, 字体大小/字体行高, 字体, 字体颜色, 字体的;

3.文本样式

1. 颜色	color
2. 文本对齐方式	text-slign:center;
3. 首行缩进	text-indent:2em;//1em代表一个字符
4. 行高	line-height:200px;行高和块的高度一致，就可以上下居中
5. 下划线	text-decoration: underline;
6. 中划线	text-decoration: line-through;
7. 上划线	text-decoration: overline;
8. 超链接伪类	
	a{
    	默认颜色
	}
	a:hover {
    	鼠标触及的颜色
	}
	a:active {
    	鼠标点击未释放的颜色
	}
9. 文本阴影	text-shadow:颜色 水平偏移 垂直偏移 模糊半径;

在这里插入图片描述

4.列表样式

<style>
    li {
        list-style:nonoe;  //列表去掉点
    }
</style>

5.背景图像应用及渐变

背景图片

background-image:url("path");
默认是平铺的
background-repeat: ;
background-position:x y;
综合写法：
background:背景颜色 url("") x方向位置 y方向位置 平铺

背景颜色渐变

六、盒子模型

1.什么是盒子

在这里插入图片描述

  • margin：外边距

  • padding：内边距

  • border：边框

    注意：body默认会有一个外边距

2.边框

  1. 边框的粗细
  2. 边框的颜色
  3. 边框的样式
<style>
    form{
     border: 1px red solid;   
    }
</style>

3.外边距

综合写法：
margin:上 下 左 右;
外边距的妙用：居中元素
margin:0 auto;居中 前提：外面的元素是个块元素，块元素有固定的宽度

内边距一样

盒子的计算方式，你这个元素到底多大?

元素的大小 = margin +border + 内容的宽度

4.圆角边框

border-radius: 左上 右上 右下 左下;

5.阴影

box-shadow:阴影样子, x偏移量, y偏移量, 模糊半径, 阴影颜色;

七、浮动

1.标准文档流

自上而下的排布

行内元素可以被包含在块级元素中，反之不可以

2.display

  1. block转换成块元素
  2. inline-block行内快元素，保持块元素的性质，但是可以内联，在一行
  3. inline行内元素
  4. none不显示元素

3.浮动

**1.浮动：**会使元素向左或向右移动，其周围的元素也会重新排列。

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

如果图像是右浮动，下面的文本流将环绕在它左边：

**2.相邻的浮动元素：**如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。

**3.清除浮动：**元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。clear 属性指定元素两侧不能出现浮动元素。这样既有浮动的效果，也有块元素的效果

clear:right;右侧不允许有浮动
clear:left;左侧不允许有浮动
clear:both;两侧都不允许有浮动

float:right;右浮动
float:left;左浮动

4.父级元素边框塌陷

浮动后，元素不在父级元素里

解决方案：

  1. 增加父级元素的高度

  2. 在浮动元素后增加一个空的div标签，清除浮动

  3. overflow，解决溢出问题，在父级元素中增加一个overflow属性‘

  4. 在父类添加一个伪类，:after

    #father：after {
content: '';
diaplay: block;
clear: both;
}

5.对比

  • display

    方向不可控制

  • float

    浮动起来，会脱离文档标准流，所以要解决父级元素边框塌陷问题

八、定位

1.相对定位

相对于自己原来的位置，进行偏移

position: relative;
top: -20px;
botom: 20px;
left: 20px;
right: 20px;

相对定位的话，他原来的位置会被保留，不会脱离标准文档流

2.绝对定位

  1. 父级元素没有定位的前提下，相对于浏览器定位
  2. 父级元素有定位时，相对与父级元素
position: absolute;
top: 20px;
bottom: 20px;
left: 20px;
right: 20px;

绝对定位后，他不在文档标准流，原来的位置不保留

3.固定定位

position: fixed;
top: 10px;
bottom: 10px;
left: 20 px;
right: 20px;

相对于浏览器的位置，固定不动

4.z-index

就是把图层置顶、置地

opacity:0.5;设置透明度

filter:alpha(opacity=0.5);

九、动画

什么是CSS3动画

  • 动画是使元素从一种样式逐渐变化为另一种样式的效果。

  • 您可以改变任意多的样式任意多的次数。

  • 请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。

  • 0% 是动画的开始，100% 是动画的完成。

    示例：

    @keyframes myfirst
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
 
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

1.创建动画

@keyframes规则是创建动画，规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式

示例：

@keyframes myfirst {
from {background: red;}
to {background: yellow;}
}

2.把动画绑定到一个选择器上

使用@keyframes创建动画，把他绑定到一个选择器上，否则动画不会有效果，指定至少把这两个CSS3的动画属性绑定向一个选择器：
1.规定动画名称
2.规定动画的时长  不指定时长，动画无效，因为默认的时长为0

示例：

把myfirst动画绑定到div元素上，动画时长5秒
div {
	animation: myfirst 5s;
}

3.CSS3动画的属性

属性描述CSS
@keyframes规定动画。3
animation所有动画属性的简写属性。3
animation-name规定 @keyframes 动画的名称。3
animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是 0。3
animation-timing-function规定动画的速度曲线。默认是 “ease”。3
animation-fill-mode规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。3
animation-delay规定动画何时开始。默认是 0。3
animation-iteration-count规定动画被播放的次数。默认是 1。3
animation-direction规定动画是否在下一周期逆向地播放。默认是 “normal”。3
animation-play-state规定动画是否正在运行或暂停。默认是 “running”。3

十、过度

1.过度

CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候

2.如何工作

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点，必须规定两项内容：

  • 指定要添加效果的CSS属性
  • 指定效果的持续时间。

示例：

div {
transition: width 2s;
}

3.多项改变

div {
transition: width 2s, height 2s transfrom 2s;
}

4.过度属性

属性描述CSS
transition简写属性，用于在一个属性中设置四个过渡属性。3
transition-property规定应用过渡的 CSS 属性的名称。3
transition-duration定义过渡效果花费的时间。默认是 0。3
transition-timing-function规定过渡效果的时间曲线。默认是 “ease”。3
transition-delay规定过渡效果何时开始。默认是 0。3

十一、CSS32D转换

1.转换

CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。

2.如何工作

转换的效果是让某个元素改变形状，大小和位置。

3.2D转换

1.translate(): translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

示例：

div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
}

2.rotate()：在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

示例：

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}

3.scale()：该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数

示例:

-ms-transform:scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3); /* 标准语法 */

4.skew(): 包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。

  • skewX();表示只在X轴(水平方向)倾斜。
  • skewY();表示只在Y轴(垂直方向)倾斜。

示例：

div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}

4.3D转换

1.rotateX()：围绕其在一个给定度数X轴旋转的元素。

示例：

div
{
    transform: rotateX(120deg);
    -webkit-transform: rotateX(120deg); /* Safari 与 Chrome */
}

2.rotateY()：围绕其在一个给定度数Y轴旋转的元素。

示例：

div
{
    transform: rotateY(130deg);
    -webkit-transform: rotateY(130deg); /* Safari 与 Chrome */
}

3.转换属性

属性描述CSS
transform向元素应用 2D 或 3D 转换。3
transform-origin允许你改变被转换元素的位置。3
transform-style规定被嵌套元素如何在 3D 空间中显示。3
perspective规定 3D 元素的透视效果。3
perspective-origin规定 3D 元素的底部位置。3
backface-visibility定义元素在不面对屏幕时是否可见。3

十二、弹性盒子

1.flex是什么

  • flex是弹性布局，是一种非常流行的web页面快速布局解决方案
  • flex可以实现子元素在父元素中自动伸缩，特别适合移动端布局

2.flex术语

在这里插入图片描述

序列术语
1容器和项目是容器的子元素，容器为父元素(container / item)
2主轴与交叉轴(main-axis / cross-arxis)
3起始线与结束线(flex-start / flex-end)
  • 项目必须沿着主轴排列，所以布局的时候，第一件事就是确定好主轴
  • 起始线与结束线，就是主轴的起点和终点，也就是两端
  • 交叉轴，依赖于主轴存在，不能单独存在，垂直于主轴

3.容器属性

序号属性描述
1flex-direction设置容器中的主轴方向：行/水平方向，列/垂直方向
2flex-wrap是否允许创建多行容器，即flex项目一行排列不下时，是否允许换行
3flex-flow简化flex-direction和flex-wrap属性
4justify-content设置flex项目在主轴上的对齐方式
5align-items设置flex项目在交叉轴上的对齐方式
6align-content多行容器中，项目在交叉轴上的对齐方式

4.项目属性

序号属性描述
1flex-basis项目宽度：项目分配主轴剩余空间之前，项目所占据的主轴空间高度
2flex-grow项目的宽度扩展：将主轴上的剩余空间按比例分配给指定项目
3flex-shrink项目的宽度收缩：将项目上多出空间按比例在项目间进行缩减
4flex上面三个属性的简化缩写flex: flex-grow flex-shrink flex-basis
5align-self单独定义某个项目在交叉轴上的对齐方式
6order自定义项目在主轴上的排列顺序，默认为0书写顺序，值越小位置越靠前

5.创建flex容器和flex项目

  • 给一个元素添加display: flex; 创建flex块级容器，内部的子元素自动成为flex项目
  • 或者给一个元素添加display: inline-flex; 创建flex行内容器， 内部子元素自动成为flex项目

6.设置容器主轴方向与多行容器

1.创建容器属性

序号属性描述
1flex-direction设置主轴方向
2flex-wrap设置多行容器
3flex-flowflex-direction和flex-wrap缩写

​ 1.flex-direction属性值

序号属性描述
1row默认：主轴为水平方向(从左到右)
2row-reverse主轴为水平方向(从右到左反序)
3column设置主轴为垂直方向(从上到下)
4column-reverse设置主轴为垂直方向(从下到上)

​ 2.flex-wrap属性值

序号属性描述
1nowrap默认：不换行，此时忽略项目尺寸
2wrap允许换行此时项目尺寸有效，即允许创建多行容器

​ 3.flex-flow属性值

flex-flow: 主轴方向 多行容器

2.容器中项目对齐方式

1.主轴项目对齐方式 justify-content属性

主轴上要有剩余空间对齐才有效

序号属性值描述
1flex-start默认：所有项目与主轴起始线对齐
2flex-end所有项目与主轴终止线对齐
3center所有项目与主轴中间线对齐，居中对齐
4space-between两端对齐：剩余空间在头尾项目之外的项目平均分配
5spcae-around分散对齐：剩余空间在每个项目两侧平均分配，每个项目两边的空间一样
6space-evenly平均对齐：剩余空间在每个项目之间平均分配
2.交叉轴上的项目对齐方式align-items
序号属性值描述
1flex-start默认所有项目与交叉轴起始线对齐
2flex-end所有项目与交叉轴终止线对齐
3center所有项目与交叉轴中间线对齐，居中对齐

注意

  • 单行容器中，交叉轴上只有一个项目，所有剩余空间不需要在项目间分配
  • 因此没有像主轴对齐的三个属性：space-between，spcae-around，space-evenly
3.多行容器的项目对齐方式

属性：align-content

序号属性值描述
1stretch默认：项目拉伸占据整个交叉轴
2flex-start所有项目与交叉轴起始线(顶部)对齐
3flex-end所有项目与交叉轴终止线对齐
4center所有项目与交叉轴中间线对齐：居中对齐
5space-between两端对齐：剩余空间在头尾项目之外的项目间平均分配
6space-around分散对齐：剩余空间在每个项目两侧平均分配
7space-evenly平均分配：剩余空间在每个项目之间平均分配

注意：多行容器中，交叉轴上可能会有多个项目，剩余空间在项目之间分配才有意义

多行容器也只是只有一个主轴和一个交叉轴，只是在主轴上放不下了换行形成的

3.单个项目对齐方式

1.设置单个项目在交叉轴上的对齐方式

属性：align-self

序号属性值描述
1auto默认值：auto，继承align-items属性值
2flex-start与交叉轴起始线对齐
3flex-end与交叉轴终止线对齐
4center与交叉轴中间线对齐：居中对齐
5stretch在交叉轴方向上拉伸
6baseline与基线对齐
  • 如果项目设置了高度，则stretch值无效
  • baseline：除非全部 项目与基线对齐，否则效果与起始线对齐是相同的

4.单个项目的排列顺序

1.属性order

用来调整每个项目在主轴上排列顺序

属性值为0，默认值按书写顺序显式，属性值为值越大越靠后显示

5.单个项目的放大/缩小因子

1.设置项目在主轴 上的放大因子

flex-grow属性

  • 在主轴上存在剩余空间是，flex-grow才有效

  • 该属性的值，成为放大因子

    常见属性

    1. 0 默认值，不放大，保持原值
    2. n 放大因子，正整数
2.设置项目在主轴上的缩小因子

flex-shrink属性

  • 在主轴上空间容纳不下所有项目时，flex-shrink才有意义
  • 该属性的值名称为最小因子，
    1. 1 默认值，允许缩小适应主轴空间变化
    2. 0 不缩小，保持原始大小
    3. n缩小因子，正整数
3.设置项目在主轴上的计算计准尺寸

flex-basis属性

  • 再分配多余空间之前，项目暂居的主轴空间
  • 浏览器根据这个属性，计算主轴是否有多余空间
  • 该属性会覆盖项目原始大小
  • 该属性会被项目最小高度/最小宽度值覆盖
    1. auto 默认值项目原始大小
    2. px像素
    3. %百分比

优先级：项目大小<flex-basis<min-width/height

vision0day
关注
  • 23
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html+css+js 生日快乐网站模板（多页面功能版本+音乐）
07-31
【HTML+CSS+JS 生日快乐网站模板：构建互动式庆祝平台】 HTML（HyperText Markup Language）是网页设计的基础，用于定义网页的结构和内容。在这个生日快乐网站模板中，HTML 文件将承载着所有文本、图像和其他媒体...
纯CSS3圣诞节日快乐动画特效
06-24
CSS3是层叠样式表（Cascading Style Sheets）的第三个版本，它在继承了CSS2.1的基础上，引入了许多新的特性和功能，例如选择器、边框和背景、过渡、动画、多列布局以及自定义字体等。这些新特性使得开发者能够创建出...
css基础
weixin_59204311的博客
08-11 899
css基础
CSS基础知识
weixin_47280394的博客
09-21 561
主要是跟着pink老师上课做的笔记。
CSS——基础学习
weixin_63056061的博客
10-27 377
每一个 HTML 元素就相当于是一个矩形的 "盒子"这个盒子由这几个部分构成外边距 margin 边框 border 内边距 padding 内容 content。
CSS基础2
只此一生
10-09 148
学习目标： 提示：这里可以添加学习目标 例如：一周掌握 Java 入门知识 学习内容： 提示：这里可以添加要学的内容 例如： 1、 搭建 Java 开发环境 2、 掌握 Java 基本语法 3、 掌握条件语句 4、 掌握循环语句 学习时间： 提示：这里可以添加计划学习的时间 例如： 1、 周一至周五晚上 7 点—晚上9点 2、 周六上午 9 点-上午 11 点 3、 周日下午 3 点-下午 6 点 学习产出： 提示：这里统计学习计划的总量 例如： 1、 技术笔记 2 遍 2、CSDN 技术博客 3 篇
css基础01
weixin_44191425的博客
06-22 98
时间：2016年5月16号 前三天，HTML5的基础已经完结。网页中涉及的样式就跟我们今天学习的css有关。首先，在HTML的基础上再来学习css的样式，总是觉得要轻松很多，但是总是存在记忆的问题，且不说css的样式多而杂，就连属性也有一大堆，这样的大规模强制性接受和记忆并非可能。但是，总归一点，多练多些，孰能生巧。 首先，今天的内容分几大块。我们先来看看css的基本概述； 一、CSS概述： .CSS 的作⽤ • 什么是 CSS • CSS 与 HTML 之间的关系 • HTML 属性与 CSS 样式的使⽤
CSS基础篇（07）
m0_56947432的博客
07-11 732
网页中常见一些三角形，使用 CSS 直接画出来就可以，不必做成图片或者字体图标。一张图， 你就知道 CSS 三角是怎么来的了, 做法如下：div {width: 0;height: 0;我们用css 边框可以模拟三角效果宽度高度为0我们4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了为了照顾兼容性 低版本的浏览器，加上 font-size: 0;
CSS基础篇（02）
m0_56947432的博客
07-10 522
在 CSS 中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。后代选择器、子选择器、并集选择器、伪类选择器等等元素显示模式就是元素（标签）以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>。网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。学习元素显示模式的主要目的就是分清它们各自的特点，当我们网页布局的时候，在合适的地方用合适的标签元素。
CSS 基础
weixin_51927215的博客
04-24 162
CSS是指层叠样式表(Cascading Style Sheets)，样式定义如何显示HTML元素， 样式通常又会存在于样式表中。也就是说把HTML元素的样式都统一收集起来写 在一个地方或一个CSS文件里
CSS（基础）
qq_43605227的博客
03-22 365
如何学习 css是什么 css怎么用（快速入门） css选择器 美化页面（文字，阴影，超链接，列表渐变…） 盒子模型 浮动 定位 页面动画（特效） 1、1什么是css Cascading Style Sheet层叠级联样式表 CSS：表现（美化页面） 字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动… 1、2发展史 CSS1、0 CSS2、0：DIV（快）+CSS，HTML与CSS结构分离的思想，页面变得更加简单，SEO CSS2、1：浮动，定位 CSS3、0：圆角边框、阴影、动画…游览器兼
龙年快乐.zip html+jss+css
01-22
【标题】"龙年快乐.zip" 是一个包含HTML、JavaScript和CSS技术的压缩包，它专为2024年龙年设计，旨在提供一种庆祝龙年的互动或展示方案。这个压缩包可能包含了用于创建动态网页或者节日主题网站的相关文件。 【描述...
基于HTML 、CSS、Js生日快乐页面
06-15
这个"基于HTML、CSS、Js生日快乐页面"项目正好展示了它们的综合运用，旨在为独自过生日的人带来一份特别的祝福。下面我们将深入探讨这三个技术以及如何在实践中创建一个动态的生日快乐页面。 首先，HTML（HyperText...
css3+html5 svg新年快乐文字和喇叭闪烁动画特效
05-31
在本文中，我们将深入探讨如何使用CSS3、HTML5以及SVG技术来创建一个"新年快乐"的文字动画和闪烁的喇叭图标，为庆祝节日增添互动性和视觉吸引力。CSS（层叠样式表）是网页设计中用于定义布局和样式的语言，而HTML5则...
CSS的重绘和重排是什么？
沐爸的博客
08-12 1063
CSS的重绘和重排是什么？它俩有什么区别？如何对重绘和重排进行优化？快来一起看看吧！
PHP 实战：动态更改 CSS 值
withkai44的博客
08-15 162
在上面的代码中，我们首先设定了一个变量 $userFontSize 来模拟获取用户设置的字体大小，然后通过 echo 函数将 CSS 样式输出到页面中。除了直接在服务器端输出或生成 CSS 文件外，还可以结合 JavaScript 来动态更改样式。这种方式更为灵活，可以根据用户的行为实时更改样式。如果需要更改的样式较多，我们也可以选择生成一个新的 CSS 文件。直接输出 CSS 样式。生成新的 CSS 文件。
css设置元素居中显示
DN金猿的博客
08-18 130
CSS中实现居中显示可以通过不同的属性来实现，取决于你是要水平居中还是垂直居中，或者两者都要。4.水平和垂直居中 - 使用flexbox。选择合适的方法取决于你的具体需求和上下文。5.水平和垂直居中 - 使用定位和转换。6.水平和垂直居中 - 使用grid。1.水平居中 - 行内元素或文本。2.水平居中 - 块级元素。3.垂直居中 - 单行文本。
CSS的:host伪类：精粹自定义Web组件选择艺术
最新发布
2401_85702623的博客
08-18 350
Web组件是一种自定义HTML元素，允许开发者封装HTML、CSS和JavaScript，创建可重用的组件。影子DOM为这些组件提供了样式和DOM结构的封装。:host伪类允许CSS选择器穿透影子DOM，选择自定义元素的宿主元素。
js html css 生日快乐
09-27
HTML是用于网页结构的基础语言，CSS则用于美化和布局网页，而JS则为网页增加了更多功能和交互性。 首先，我们可以使用HTML来构建一个简单的页面框架，例如使用div元素创建一个容器，然后在其中添加文本“生日快乐”...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值