css
不会写代码的菜
这个作者很懒,什么都没留下…
展开
-
CSS简单网页示例
运行结果如下:原创 2022-06-20 17:05:17 · 830 阅读 · 0 评论 -
CSS实战栗子
运行结果如下: 运行结果如下: 运行结果如下:原创 2022-06-20 17:03:11 · 225 阅读 · 0 评论 -
CSS粘滞定位
当我们将元素的position属性设置为sticky时,则开启了元素的粘滞定位用法: position: sticky;特点:粘滞定位与相对定位的特点基本一致与相对定位的不同点在于: 粘滞定位可以在元素到达某个位置时将其固定缺点: 粘滞定位的包容性并不高,不能兼容所有的浏览器下面我们来看一个栗子,实际体验一下使用粘滞定位: 在上述代码中我们设置了5个块元素box1,2,3,4,5.且我们设置了box2为相对定位,其背景色为橙色;box3为绝对定位,其背景色为绿色;box4为固定原创 2022-06-20 16:52:28 · 793 阅读 · 1 评论 -
CSS固定定位
将元素的position属性设置为fixed,则开启了元素的固定定位用法: position: fixed;固定定位的特点:固定定位也是一种绝对定位,所以固定定位的大部分特点都和绝对定位一样与相对定位一样.开启了固定定位以后,如果不设置偏移量,元素的位置不会发生任何改变与绝对定位的不同点: 固定定位永远是参照于浏览器的窗口进行定位固定定位的元素不会随着网页的滚动条滚动下面我们来看一个栗子,实际体验一下使用固定定位: 在上述代码中我们设置了4个块元素box1,2,3,4.且我们设置原创 2022-06-20 16:51:18 · 5789 阅读 · 0 评论 -
CSS绝对定位
当元素的position设置为absolute时,则开启了元素的绝对定位用法: position: absolute;绝对定位的特点:与相对定位一样.开启了绝对定位以后,如果不设置偏移量,元素的位置不会发生任何改变开启绝对定位之后,元素会从原有的文档流中脱离.只是相对于它的包含块定位,包含块可能是文档流中的另一个元素或者是初始包含块绝对定位会改变元素的性质.行内元素变为块元素,块元素的宽度被内容撑开(即块元素中原有内容有多宽,开启绝对定位之后的块元素就有多宽)绝对定位会使元素提升一个层级下面我们来看一个栗子原创 2022-06-20 16:50:13 · 8941 阅读 · 0 评论 -
CSS相对定位
当元素的position设置为relative时,则开启了元素的相对定位用法: position: relative ;相对定位的特点:元素开启相对定位之后, 如果不设置偏移量,元素不会发生任何变化(因此,我们在使用相对定位的时候,一定要设置元素的偏移量)相对定位是参照于元素在文档流中的位置进行移动的相对定位会提升元素的层级即当我们设置一个元素的位置与另一个元素冲突时,设置了相对定位的元素会显示在未设置定位元素的上面相对定位不会使元素脱离文档流相对定位不会改变元素的性质.块元素还是块元素,行元素还是行元素下原创 2022-06-20 16:49:21 · 4654 阅读 · 0 评论 -
CSS包含块(containing block)
正常情况下,包含块就相当于一个相对参考系,某元素的包含块就是最高包裹当前元素的块级元素或者是离它最近的祖先元素(大多数是父元素)(除static之外)初始包含块是一个视窗大小的矩阵,即HTML的父级document,它是根元素HTML的包含块;而非根元素的包含块.详细介绍如下:如果position值是relative或static,包含块由最近的块级框,表单元格或行内祖先框的内容边界构成如果position值是absolute,包含块设置为最近的position值不是static的祖先元素(可以是任意类型)原创 2022-06-20 16:47:51 · 385 阅读 · 0 评论 -
CSS定位
我们在了解相对定位之前,先来看一个案例: 要想实现上述操作,我们可以使用外边距margin对标签进行处理,也可以使用浮动来进行标签的设置.将2号标签进行向左浮动,使之上移,接着对3号标签进行设置.这两种方法虽然能达到我们想要的结果,但是需要改动的步骤较多,不!利于我们开发.因此我们需要使用到定位定位是一种更加高级的布局手段,通过定位可以将元素摆放到页面的任意位置.这样十分方便我们进行页面的布局使用position属性来进行设置定位可选值:static: 默认值.元素是静止的,没有开启定位将posi原创 2022-06-20 16:45:10 · 116 阅读 · 0 评论 -
CSS复合选择器
复合选择器分为交集选择器和并集选择器,下面我们来逐一介绍: 首先,我们来看一个需求: 将class属性值为aaa的p字体设置为20px;这样我们单独使用简单选择器就不能完成需求,因为我们不能使用简单选择器来同时满足两个条件,这时我们就会用到复合选择器作用: 选中同时符合多个条件的元素语法: 选择器1选择器2选择器n{ }注意点: 交集选择器中如果有元素选择器,必须使用元素选择器开头栗子: 加: 一般不建议这样使用.因为#abc也可以直接定位我们需要选择的元素,这种写法虽原创 2022-06-20 16:28:45 · 267 阅读 · 0 评论 -
CSS关系选择器
想要了解关系选择器,我们首先要了解都有什么关系父元素直接包含子元素的叫做父元素子元素被包含的元素称为子元素祖先元素直接或间接包含其他元素的元素称为祖先元素一个元素的父元素也是它的祖先元素后代元素直接或间接被祖先元素包含的元素子元素也是后代元素兄弟元素拥有相同父元素的元素之间称为兄弟元素我们可以注意到,祖先元素和后代元素的范围比子元素和父元素的范围更大下面我们从一个需求开始介绍关系选择器需求: 为div的子元素span设置字体颜色为红色子元素选择器: 作用: 选中一个指定父元素的指原创 2022-06-20 16:24:54 · 121 阅读 · 0 评论 -
CSS盒子模型(box-model)
我们在进行网页设计的时候,可以将一切的HTML元素看作为盒子.在CSS中盒子模型用来设计和布局时使用CSS处理网页时,它认为每个标签都包含在一个不可见的盒子里.如果把所有的标签都想象成盒子,那么我们对网页的布局就相 当于是放盒子我们只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局一个盒子分为以下几个部分:内容区(content),内边距(padding),边框(border),外边距(margin) 上述图片展示的即为一个盒子模型,可以使我们更加形象的了解,下面我们来逐对盒子模型的几个部分进行介绍原创 2022-06-19 23:09:52 · 945 阅读 · 0 评论 -
CSS文档流及浮动
文档流指的是文档中的标签在排列时所占用的位置。 将窗体自上而下分成一行行 ,并在每行中按从左至右的顺序排放标签,即为文档流也就是说在文档流中标签默认会紧贴到上一个标签的右边,如果右边不足以放下标签,标签则会另起一行,在新的一行中继续从左至右摆这样一来每一个块标签都会另起一行,那么我们如果想在文档 流中进行布局就会变得比较麻烦所谓浮动指的是使标签脱离原来的文档流,在父标签中浮动起来 我们可以抽象的理解为,浮动使一个二维的网页页面变为一个三位的立体模型当一个标签浮动以后,其下方的标签会上移浮动会使标签完全脱离文原创 2022-06-19 23:02:25 · 295 阅读 · 0 评论 -
CSS背景
我们使用CSS可以对网页添加背景颜色,背景图片等操作,使网页更加美观,下面就将一些常用的设置网页背景的方法介绍如下:background-color设置背景颜色我们可以自己设置自己喜欢的背景颜色background-image设置背景图片通过url导入我们已经存放在项目中的图片并将其设置为网页的背景background-repeat设置背景重复(即背景平铺)设置背景重复的目的是,当我们的背景图片大小不符合时,我们可以让背景图片重复铺满我们所要填充的位置background-size设置背景尺寸使用此方法可以原创 2022-06-19 22:30:10 · 178 阅读 · 0 评论 -
CSS伪类
CSS伪类专门用来表示标签的一种的特殊的状态,当我们需要为处在这些特殊状 态的标签设置样式时,就可以使用伪类伪类的语法:: hover 伪类表示鼠标移入的状态: active 表示的是被点击的状态: focus 向拥有键盘输入焦点的标签添加样式代码示例入下: 运行结果如下:...原创 2022-06-19 22:28:17 · 1006 阅读 · 0 评论 -
CSS透明度[简述]
CSS中设置透明度有两种方式: GRBA和opacity. 下面我们就这两种方式进行简要介绍:语法如下: rgba只是单纯的设置颜色的透明度,但是标签上的文字不会透明. 即透明元素的子元素不会继承其透明效果.代码示例如下: 运行结果: 我们可以看到,使用grba方法只是颜色发生了变化,两个div的文字都没有改变语法如下: 其中,value的取值为[0~1].opacity属性具有继承性,因此会使得容器中所有的元素都原创 2022-06-19 22:26:20 · 1729 阅读 · 0 评论 -
css文本[简述]
通过文本可以改变文本的颜色,字符间距,对齐方式,装饰文本,对文本进行缩进等等一系列操作 代码的运行结果如下: 在这里我们一定要搞清楚选择器所选择的元素都有哪些.就比如上面的示例中,我们只给clas为p2的文本设置了样式,因此class为p2的文本还保留着其原本的样式...原创 2022-06-19 22:21:12 · 134 阅读 · 0 评论 -
CSS标签分类
块级标签: 无论内容的多少,都只会占用一行的标签称为块级标签常用块级标签如下: ,,,块级标签可以设置标签的宽高默认大小: 宽: 与父级标签的宽一致 高: 0/与内容的高一致行级标签: 只占自身大小的标签,不会占一行的称为行级标签行级标签不能设置宽高常见的行级标签如下: ,,行级块标签:可以设置大小,但不占一行的标签称为行级块标签常见的行级块标签如下: ,运行结果如下: 我们可以看到,块级标签每次占用了一行的位置.而行级标签只占...原创 2022-06-19 22:15:33 · 990 阅读 · 0 评论 -
CSS列表[简述]
列表项的标记使用特殊图形.如小黑点,图片等列表项的标记使用数字或字母等有序标记其常用列表设置方法如下:代码示例如下: 代码部分内容示例: list-style-image : 将图象设置为列表项标志。list-style-position : 设置列表中列表项标志的位置。list-style-type : 设置列表项标志的类型。list-style-type: none; 设置为none即为去除原有图标list-style: 简写属性...原创 2022-06-19 22:11:05 · 352 阅读 · 0 评论 -
CSS基本语法及简单选择器
这里可将CSS语法大致分为两类: 选择器和声明块选择器: 通过选择器可以选中页面中的指定元素 例如:通过p可以选择页面中的所有元素声明块: 通过声明块来指定要为元素设计的样式声明块又一个一个的声明组成: 例如: color : red ;声明是一个名值对结构 一个样式名对应一个样式值,名值之间以 : 连接.以 ; 结尾这里有多选择器可用来选择页面中的元素,下面哦们一一介绍:作用: 根据标签名来选中指定的元素语法: 标签名{ }栗子: p{ } h1{ } div{ } 使用元素选原创 2022-06-19 18:30:14 · 174 阅读 · 0 评论 -
CSS概述
CSS也称为层叠样式表CSS是一种样式表语言,用于为HTML文档修饰样子(只是修饰,没有内容)使用CSS语言,可以将页面的内容与表现形式分离,通过某种关系关联起来,做到相同的内容只写一次我们通过表来给元素设置样式,网页实际上是一个多层结构,通过CSS,可以分别为网页的每一个层来设置样式,而最终我们只能看到网页上的最上一层我们通过CSS来修改元素的样式,共有3个位置可实现第一种方式(内联样式,行内样式) 此方式是在标签内部通过style属性来设置元素的样式<!DOCTYPE html><原创 2022-06-19 18:27:23 · 139 阅读 · 0 评论