1.2.4文本的颜色 方法1：color用于修改文本的颜色，color直接选取对应的颜色单词。...方法2：使用pycharm的取色版取出色值，在取出的色值前面加#作为color的值，如：color: #FF00FF; 方法3：使用RGB设置颜色，如：color: rgb(255,255,255);...;只在水平方向上平铺背景图片 background-repeat:repeat-y;只在竖直方向上平铺背景图片 background-repeat:no-repeat;不平铺背景图片 这三个功能只有在背景图片小于网页大小时才能够使用...border-radius: 50%; 1.6display属性 display用于控制HTML元素的显示效果。 值 描述 none HTML文档中元素存在，但是在浏览器中不显示。...浮动常用的三种方式：l left 向左浮动 right 向有浮动 none 默认值，不浮动 1.8.1浮动带来的影响 会使浮动框的父标签塌陷，就是当边框是父标签的时，如果子标签设置为浮动，则外边框就会塌陷成一条线
三、背景属性 背景颜色 /*背景颜色*/ background-color: red; 背景图片 /*背景图片*/ background-image: url('1.jpg');...值 意义 display:"none" HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。...display:"inline-block" 使元素同时具有行内元素和块级元素的特点。...三种取值 left：向左浮动 right：向右浮动 none：默认值，不浮动 clear clear属性规定元素的哪一侧不允许其他浮动元素。 值 描述 left 在左侧不允许浮动元素。...#i2 { z-index: 999; } 十三、透明属性 用rgba的方法来设置 这种方式只是改变背景颜色的透明度 .touming { width: 300px
您所要做的就是将半径设置为元素宽度或高度的一半。 border-radius: 50px; 而且，如果我们想找点乐子，我们还可以利用灵活框模型（在#8 中详细介绍）将文本在圆圈内垂直和水平居中。...让我们回到这个 text-stroke 问题。black 让我们为不支持这个属性的浏览器 设置一个后备颜色 （除了webkit 目前）。...在鼠标移出时，元素将立即返回其初始状态。 因为我们只是增强了效果，所以我们绝对没有对旧浏览器造成任何伤害。 最终项目 让我们结合我们在本文中学到的大部分技术，为显示翻转卡片创建一个简洁的效果。...有效的阴影 接下来，正如我们在本文前面所了解的，我们将通过使用 ::after 伪类来应用一个很酷的阴影。...固定正面 参考上图；注意我们卡片的背面是如何默认显示的？这是因为，由于元素在标记中出现的位置较低，因此它会收到较高的 z-index. 让我们解决这个问题。
框会变浅蓝色的那么个感觉 #outline: none; background-color: #eee; #框里面的背景色 } 12，伪元素选择器 #将p标签中的文本的第一个字变颜色变大小...div标签的文本颜色。...，right 在右侧不允许浮动元素，both 左右两侧都不允许，none 允许，inherit 从父元素继承clear属性的值 解决副作用，我们可以在div2标签中加上clear属性，是可以解决问题的，...但这种情况下，我们在添加标签时都要判断是否有浮动，很麻烦 所以我们在有浮动的标签之后加上一个标签，内容为空，含有clear属性也可以解决问题 <div class...我们为层叠的元素设置一个z-index值，值大的会盖住值小的，如果没有设置z-index，写在后面的会压着前面的 z-index：值 值为正整数就行 只有定位的元素才有z-index 从父现象：父级的
需要记住，这四种状态，在css中，必须按照固定的顺序：a:link 、a:visited 、a:hover 、a:active。如果不按照顺序，那么将失效。...最标准的，就是把link、visited、hover都要写。但是前端开发工程师在大量的实线中，发现不写link、visited浏览器也挺兼容，所以把a标签简化了。...CSS2.1中，颜色的表示方法有哪些？一共有三种：单词、rgb表示法、十六进制表示法。 3.1.1 用英文单词来表示 能够用英文单词来表述的颜色，都是简单颜色。...是一种CSS图像合并技术，该方法时将小图标和背景图像合并到一张图片上，然后利用css的背景定位技术来显示需要显示的图片部分。 CSS精灵有什么优点，就是减少了http请求。...7 z-index 1、z-index值表示谁压着谁。数值大的盖住数值小的。 2、只有定位了的元素，才能够有z-index值。也就是说，不管相对定位、决定定位、固定定位，都可以使用z-index值。
z-index 属性设置元素的堆叠顺序，拥有更高的堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面 该属性设置一个定位元素沿着 z 轴的位置，z 轴定义为垂直延申到显示区的轴，如果为正数，则离用户更加近...使用z-index有什么需要注意的地方？ 在开发中尽量避免层叠上下文的多层嵌套，因为层叠上下文嵌套过多的话容易产生混乱，如果对层叠上下文理解不够的话是不好把控的。...比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。...自适应暴露的一个问题，如果屏幕太小，即使网页能够根据屏幕大小进行适配，但是会感觉在小屏幕上查看内容太过拥挤。响应式正是针对这个问题衍生出的概念。...,字体也不能使用绝对大小（px），只能使用相对大小（em）或者高清方案（rem），rem不局限字体大小，而前面的width也可以使用，代替百分百。
text-align: center; 在当前容器中对齐方式，left,right,justify text-xxx具有继承性，后代标签会继承祖先中声明的这些属性，想让文本居中显示时，如果属性不生效...字体 4.背景 background-xxx background-color 设置元素背景颜色，属性值有三种方式：red, rgb(255, 0, 0), #ff0000 以上三种均表示红色。...这个属性既可以用于在一张包含各种 icon 种只显示指定区域的 icon，也可用于在文本四周添加 icon。...clear: both 表示当前元素不受之前浮动元素的影响 隔墙法（在两部分浮动元素中间，建一个墙。隔开两部分浮动，让后面的浮动元素，不去追前面的浮动元素。...默认的 z-index 值是0 如果大家都没有 z-index 值，或者 z-index 值一样，那么在 HTML 代码里写在后面，谁就在上面能压住别人。
浮动引起的问题： 父元素的高度无法被撑开，影响与父元素同级的元素 与浮动元素同级的非浮动元素（内联元素）会紧跟其后 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构 清除浮动的方法...flex，inline-flex，overflow 不为 visible 的元素 13、对 CSS 的新属性有了解过的吗？...多行文本垂直居中：需要设置display属性为inline-block。 21、元素竖向的百分比设定是相对于容器的高度吗？...rgba() 和 opacity 都能实现透明效果，但最大的不同是 opacity 作用于元素，以及元素内的所有内容的透明度， 而 rgba() 只作用于元素的颜色或其背景色。...通过background-position和元素尺寸调节需要显示的背景图案。
2、CSS注释 /*这是注释*/ 三、CSS的几种引入方式 1、行内样式 行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。...例如一个body定义了它的字体颜色也会应用到段落的文本中。 body { color: red; } 此时页面上所有标签都会继承body的字体颜色。...1.4 文本颜色 颜色属性被用来设置文字的颜色。...border（边框）：围绕在内边距和内容外的边框。 content（内容）：盒子的内容，显示文本和图像。 盒子模型： ?...opacity和rgba()的区别: 1. opacity改变元素\子元素的透明度效果 2. rgba()只改变背景颜色的透明度效果 六、综合示例 1、顶部导航菜单 <!
; background-color: #eee; #框里面的背景色} 伪元素选择器 （通过css来造标签，不推荐使用） first-letter 常用的给首字母设置特殊样式： #将p标签中的文本的第一个字变颜色变大小...文本颜色 颜色属性被用来设置文字的颜色。 ...首行缩进两个字符，因为我记得一个字在页面上的默认大小为16px } 背景属性 /*背景颜色*/background-color: red; /*背景图片*/ background-image: url(...display:"inline-block" 使元素同时具有行内元素和块级元素的特点。...可以将元素设置成relative，不设置任何的top、left、right、bottom等，它还是它原来的位置 absolute（绝对定位） 定义：设置为绝对定位的元素框从文档流完全删除，也会有父级标签塌陷的问题
--摘自哪吒语录 CSS的几种引入方式 行内样式 行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。 Hello world....例如一个body定义了的字体颜色值也会应用到段落的文本中。 body { color: red; } 此时页面上所有标签都会继承body的字体颜色。...文本颜色 颜色属性被用来设置文字的颜色。...display:"inline-block" 使元素同时具有行内元素和块级元素的特点。...三种取值 left：向左浮动 right：向右浮动 none：默认值，不浮动 参考示例 clear clear属性规定元素的哪一侧不允许其他浮动元素。 值 描述 left 在左侧不允许浮动元素。
文本颜色 颜色属性被用来设置文字的颜色。...颜色是通过CSS最经常的指定： 十六进制值 – 如: ＃FF0000 一个RGB值 – 如: RGB(255,0,0) 颜色的名称 – 如: red 文字属性 文字对齐 text-align 属性规定元素中的文本的水平对齐方式...display:”inline-block” 使元素同时具有行内元素和块级元素的特点。...取值方式： left：向左浮动 right：向右浮动 none：默认值，不浮动 详情参考： clear clear属性规定元素的哪一侧不允许其他浮动元素。 值 描述 left 在左侧不允许浮动元素。...2、clear: left;对自身起作用，一旦左边有浮动元素，即切换到下一行来保证左边元素不是浮动的，依据这一点解决父级塌陷问题。 overflow溢出属性 值 描述 visible 默认值。
strong:加粗 ins:下划线 em:倾斜 del:删除线 可以使用有语义化的意思 Img标签 作用：在页面显示一张图片 src 图片显示的路径 alt 如果图片加载不出来会显示这个属性中的文字...会显示元素的背景) Top|right|bottom|left 2>Margin:(边框以外，不显示元素的背景) Top|right|bottom|left margin叠加的问题（相邻两个元素上下...(问题) 分页的练习 块元素如何在同一行显示？...； position:fixed; 固定定位元素子级的浮动可以不用写清浮动方法；（IE6不兼容） 关于层级问题的一些思考。...:first-line 伪元素的样式将应用于元素文本的第一行。 :before 在元素内容的最前面添加新内容。 :after 在元素内容的最后面添加新内容。
所谓打狗看主人，A官员家里的管家和B官员家里的管家做PK实际上是没有意义的，因为他们牛不牛逼完全由他们的主子决定的。一人得道鸡犬升天，你说这和珅家里的管家和七侠镇娄知县县令家里的管家有可比性吗？...层叠顺序图可以找到答案，如下： 从上图可以看出负值z-index的层叠顺序在block水平元素的下面，而蓝色背景div元素是个普通元素，因此，妹子直接穿越过去，在蓝色背景后面的显示了。...会发现，妹子在蓝色背景上面显示了，为什么呢？...原因就是半透明元素具有层叠上下文，妹子图片的z-index:-1无法穿透，于是，在蓝色背景上面乖乖显示了。...同样的，因为蓝色背景元素升级成了层叠上下文，因此，z-index:-1无法穿透，在蓝色背景上显示了。
目录 控制标签元素样式 长宽属性、字体属性、文本对齐、文本装饰、首行缩进 背景属性、边框属性、圆角 display 显示方式 盒子模型 margin、padding... float浮动 overflow...清除溢出（超出div大小的部分） position 定位 对文档流的影响 z-index 层级 opacity 标签整体透明度 去掉li 前面的标识 文本垂直居中 单行文本居中 作业案例 关于自适应（...不需要了解） 控制标签元素样式 小心得： 样式有继承(遗传)效果（子元素将继承父元素的样式，如果子元素单独设置了该样式，那么子元素的样式就是子元素单独设置的样式） （可以做统一设置） 注意在调样式时...} 中间一堆css代码 .d1{color: red;}，你会发现 d1的css代码中color不生效，冲突，且优先级不够） 注意行内元素（标签）和块级元素的区别 行内元素的宽度(width)、...） 固定定位（fixed）的元素也是脱离文档流的（只要变了就脱离文档流了） z-index 层级 模态框（百度登录） <!
：鼠标指针浮动在上面的元素 伪元素选择器 有连续两个冒号(::)的选择器 ::before : 选择器在被选元素的内容前面插入内容 ::after : 选择器在被选元素的内容后面插入内容 关系选择器...元素默认的display值是table 基本特征:一个水平流上只能「单独显示」一个元素，多个块级元素则换行显示 由于块级元素具有换行特性,配合clear属性用来清除浮动 .clear::...❝一个存在于每个「行框盒子」前面，同时具有该元素的「字体」和「行高」属性的「0宽度的内联盒」 ❞ 「行框盒子(line box)」,每一行就是一个行框盒子,每个行框盒子又是由一个个内联盒子组成的。...-webkit-line-clamp: n：和①结合使用，用来限制在一个块元素显示的文本的行数(n) -webkit-box-orient: vertical：和①结合使用 ，设置或检索伸缩盒对象的子元素的排列方式...元素内文本，在垂直方向居中显示 我是一个多行文本信息 bala bala 利用display:table .center-table
:hover -> 该伪类将应用于有鼠标指针悬停于其上的元素，在IE6只能应用于a标签，IE7+所有元素都兼容。 ...例如，字体、字号、颜色、行距等可以在body元素中统一设置，然后通过继承影响文档中的所有文本。...3.一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动，这样才能一行对其显示。 4.浮动根据元素书写的位置来显示相应的浮动。...层叠等级属性 当对多个元素同时设置定位时，定位元素之间有可能发生重叠： 在css中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可以为正整数、负整数和0。...z-index的默认属性是0，取值越大，定位元素在层叠元素中越居上。 定义靠后的，默认在之前的元素之上，但切记不要滥用z-index。同时，父容器的z-index会影响子元素的层级级别。 <!
:hover -> 该伪类将应用于有鼠标指针悬停于其上的元素，在IE6只能应用于a标签，IE7+所有元素都兼容。 ...例如，字体、字号、颜色、行距等可以在body元素中统一设置，然后通过继承影响文档中的所有文本。...3.一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动，这样才能一行对其显示。 4.浮动根据元素书写的位置来显示相应的浮动。...层叠等级属性 当对多个元素同时设置定位时，定位元素之间有可能发生重叠： 在css中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可以为正整数、负整数和0。...z-index的默认属性是0，取值越大，定位元素在层叠元素中越居上。 定义靠后的，默认在之前的元素之上，但切记不要滥用z-index。同时，父容器的z-index会影响子元素的层级级别。 ? <!
1.1 contain 保持图片纵横比例缩放背景图片，使背景图片能够在背景区域完全显示 有可能出现图片无法完全覆盖背景区域 1.2 cover 保持图片纵横比不变，最大程度覆盖背景区域 有可能导致背景图片部分区域无法显示...：文本流在垂直方向，从上至下、从右至左排列（该属性值不兼容webkit内核浏览器） vertical-lr：文本流在垂直方向，从上至下、从左至右排列，文字方向为水平方向 vertical-rl：文本流在垂直方向...「C1见习能力认证」的字体颜色最终显示为_____?...块级元素 在浏览器显示时总是独占一行 宽高、内外边距可以控制，且上下左右的外边距均可对周围元素产生影响 可以包含内容、行内元素和其他块级元素 宽度未设置时默认为其父级元素的宽度，高度未设置时为内容的高度...属性值越高，层级越高，层级高的元素会覆盖层级低的元素 z-index值相同时，后面的元素会覆盖前面的 box2的z-index值为9，box1的z-index值设置小于或等于9时，即可实现box2定位在
当你学习CSS时，了解CSS属性是非常重要的，因为这些属性控制了网页上元素的外观和布局。本文将详细介绍一些常见的CSS属性，包括文本属性、盒子模型属性、背景和边框属性、定位属性等。...我们还将为每个属性提供示例代码，以便你更好地理解它们的用法。 1. 文本属性 1.1 color color 属性用于设置文本的颜色。你可以使用颜色名称、十六进制值或RGB值来定义颜色。...div { border: 2px solid #333; /* 2像素宽的实线边框，颜色为#333 */ } 2.4 display display 属性用于控制元素的显示方式，可以是块级元素、内联元素或行内块元素等...背景和边框属性 3.1 background-color background-color 属性用于设置元素的背景颜色。...5.2 z-index z-index 属性用于设置元素的堆叠顺序，决定了哪个元素位于哪个元素的上面。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
