CSS
文章平均质量分 52
CSS 学习
一个优雅的搬砖人
猛兽总是独行,牛羊才成群结队。
展开
-
CSS24:CSS预处理器
本文主要是介绍了CSS预处理器,其中提到了三种预处理器。原创 2022-02-28 15:26:03 · 317 阅读 · 0 评论 -
CSS23:总结
原创 2022-02-28 13:30:36 · 68 阅读 · 0 评论 -
CSS22:z-index及透明度
z-index 属性z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。默认是0,最高无限制(但是一般最多到999)。注意:1、元素可能有负的 z-index 属性值2、z-index 仅能在定位元素上有效值 描述 auto 默认。堆叠顺序与父元素相等。 number 设置元素的堆叠顺序。 inherit 规定应该从父元素继承 z-index 属性的值。 其实就是一个“图...原创 2022-02-25 17:57:41 · 700 阅读 · 0 评论 -
CSS21:绝对定位和固定定位
绝对定位 position: absolute绝对定位分两种情况:1、没有已定位的父级元素时,那么它相对于最初的包含块(浏览器)定位2、如果有已定位的父级元素,元素会相对于已定位的父级元素进行偏移注意:在父级元素或浏览器范围内进行指定的偏移,不会超出。绝对定位时元素不在标准文档中,原来的位置不会被保留示例现在只给第二个盒子设置了绝对定位,没有给外层的 div 定位;属于第1种没有已定位的父级元素时,它在相对于浏览器的右侧50像素的位置。&...原创 2022-02-25 17:46:11 · 1600 阅读 · 0 评论 -
CSS20:相对定位的使用
相对定位 position: relative相对于自身原来的位置进行指定的偏移注意:该元素仍然在标准文档流中,原来的位置会被保留语法positive: relative;top: 20px; /* 向下偏移20像素,和 bottom: -20px; 相同 */bottom: 10px; /* 向上偏移10像素,和 top: -10px; 相同 */left: -10px; /* 向左偏移10像素,和 right: 10px; 相同 */right: 60px;原创 2022-02-25 17:32:46 · 760 阅读 · 0 评论 -
CSS19:display和float对比
display 和 float 都可以使元素在同一行,但是也各有缺点。display:元素方向不可能控制float:浮动起来的话会脱离标准文档流,所以要解决父级边框塌陷的问题原创 2022-02-25 17:29:05 · 494 阅读 · 0 评论 -
CSS18:overflow及父级边框塌陷问题
父级边框塌陷问题示例代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #father { border: 2px dashed slateblue; } #img {原创 2022-02-25 17:27:29 · 651 阅读 · 0 评论 -
CSS17:浮动float
浮动 floatfloat 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是哪种元素。注意:如果只有极少的空间可供浮动元素,那么这个元素会跳至下一行,直到某一行拥有足够的空间为止。可能的值值 描述 left 元素向左浮动。 right 元素向右浮动。 none 默认值。元素不浮动,并会显示在其文本中出现的位置。 inherit 规定应该从父原创 2022-02-24 16:16:04 · 348 阅读 · 0 评论 -
CSS16:块级元素、行内元素和display
示例代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 100px; height: 100px; border: 1px solid salmo原创 2022-02-24 15:50:44 · 584 阅读 · 0 评论 -
CSS15:圆角边框及阴影
圆角边框 border-radiusborder-radius 可以设置元素的外边距圆角是一个简写属性,是为了将这四个属性 border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius 简写为一个属性语法border-radius: 50px;/* 等价于 */border-top-left-radius: 50px;border-top-rig原创 2022-02-24 15:17:13 · 580 阅读 · 0 评论 -
CSS14:内外边距及div居中
外边距 marginmargin 可以单独改变元素的上、下、左、右外边距,也可以一次改变所有的外边距。语法/* margin 单边外边距属性 *//* 上边距为25px 下边距为50px 左边距为100px 右边距为40px */margin-top: 25px;margin-bottom: 50px;margin-left: 100px;margin-right: 40px;/* margin 指定所有边距属性,可以有一到四个值,顺时针旋转赋值 *//* 上边距为25px 右原创 2022-02-24 15:06:36 · 798 阅读 · 0 评论 -
CSS13:盒子模型及边框使用
什么是盒子模型所有 HTML 元素可以看作盒子,在 CSS 中 “box model” 这一术语是用来设计和布局时使用。CSS 盒子模型本质上是一个盒子,封装周围的 HTML 元素,它包括边距,边框,填充和实际内容。margin:外边距padding:内边距border:边框边框1、边框的粗细可以指定长度值,如 2px 或者 0.1em,或者使用3个关键字之一,分别是 thick、medium(默认值)和 thin2、边框的...原创 2022-02-24 15:02:39 · 906 阅读 · 0 评论 -
CSS12:渐变
首先介绍一个炒鸡好用的工具;渐变配色在线调试生成工具:Grabient通过在线调整渐变的颜色、角度及占比,然后可以直接复制出 CSS 代码CSS 定义了两种渐变类型:线性渐变(向下 / 向上 / 向左 / 向右 / 对角线) 径向渐变(由其中心定义)CSS 线性渐变如需创建线性渐变,必须定义至少两个色标。还可以设置起点和方向(或角度)以及渐变效果。语法background-image: linear-gradient(dire原创 2022-02-11 10:31:58 · 807 阅读 · 0 评论 -
CSS11:背景图像应用
背景图像 background-image: url(图片路径);默认是全部平铺的div { background-image: url("images/tx.jpg");} background-repeat 背景图像的重复方式 background-repeat: repeat-x; 水平平铺div { background-image: url("images/tx.jpg"); background-rep...原创 2022-02-11 10:02:39 · 131 阅读 · 0 评论 -
CSS10:列表样式练习
列表样式 list-style<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/style.css"></head><body><ul> <li>&l原创 2022-02-11 09:39:03 · 402 阅读 · 0 评论 -
CSS09:文本阴影和超链接伪类
文本阴影 text-shadowtext-shadow: h-shadow v-shadow blur color;h-shadow:必需。水平阴影的位置。允许负值(x轴) v-shadow:必需。垂直阴影的位置。允许负值(y轴) blur:可选。模糊的距离 color:可选。阴影的颜色/* 颜色参数的顺序可以在最前面或最后面 *//* text-shadow: 阴影颜色 水平偏移 垂直偏移 阴影半径 */#price { text-shadow: #0016ff 4px ..原创 2022-02-11 09:34:29 · 229 阅读 · 0 评论 -
CSS08:文本样式
1、颜色 color值可以用单词,也可以用 RGB 0~F 如:#000000,#45FAD1也可以用 RGBA 0~255 第四位参数是透明度值为0~1 如:rgb(0, 255, 255, 0.5)2、对齐方式水平对齐 text-align:值为 left(左对齐)、center(水平居中)、right(右对齐) 垂直对齐 vertical-align:值为 top(上对齐)、middle(垂直居中)、bottom(下对齐),如果...原创 2022-02-11 09:28:46 · 487 阅读 · 0 评论 -
CSS07:CSS的作用及字体样式
为什么要美化网页有效的传递页面信息 美化网页,页面漂亮才能吸引用户 凸显页面的主体 提高用户的体验span 标签重点要突出的字,使用 span 标签套起来<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #title1 {原创 2022-02-10 17:25:58 · 1104 阅读 · 0 评论 -
CSS06:属性选择器
格式 元素[属性名] {}选择元素中包含该属性名的元素/* 选中有id属性的a元素 */a[id] { background: gold;} 元素[属性名=属性值] {}其中属性值可以使用正则表达式符号 = 是绝对等于*= 代表包含该属性值^= 以属性值开头$= 以属性值结尾...原创 2022-02-10 17:17:23 · 312 阅读 · 0 评论 -
CSS05:结构伪类选择器
伪类用于定义元素的特殊状态。如,它可以用于:设置鼠标悬停在元素上时的样式 为已访问和未访问链接设置不同的样式 设置元素获得焦点时的样式本文只列举了一部分应用,其他的可以看CSS 伪类 (w3school.com.cn)元素:first-child 选择作为其父的首个为当前元素的子元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...原创 2022-02-10 17:09:29 · 834 阅读 · 0 评论 -
CSS04:层级选择器
后代选择器 在某个元素的后面;比如祖爷爷的“后代选择器”有爷爷、爸爸、你举例:body 后的所有 p 元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /* 后代选择器 */ body p { ...原创 2022-02-10 16:58:16 · 1778 阅读 · 0 评论 -
CSS03:三种基本选择器
选择器作用:选择页面上的某一个或者某一类元素基本选择器标签选择器 使用标签作为选择器: 标签 {} ,这种选择器会选择到页面上所有是这个标签的元素 其中 * {} 代表通配选择器,选择页面上所有的元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title&...原创 2022-02-10 16:47:03 · 396 阅读 · 0 评论 -
CSS02:四种CSS导入方式
行内样式在标签元素中,编写一个 style 属性,编写样式即可<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><h1 style="color: rebeccapurple">我是标题</h1></body&原创 2022-02-10 16:36:41 · 2231 阅读 · 0 评论 -
CSS01:CSS的简单介绍
前端三剑客:HTML + CSS + JavaScript结构 样式 行为什么是CSSCSS:Cascading Style Sheet (层叠级联样式表),主要是美化网页,可以美化的元素有字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动等等。CSS 发展史CSS 1.0:美化基本样式,HTML 的属性也可以实现的美化CSS 2.0:DIV(块) + CSS,HTML 与 CSS 结构分离的思想,网页变得简单,SEO(搜索引擎优化)CSS 2.1:浮动,定位原创 2022-02-10 16:27:47 · 561 阅读 · 0 评论