1. display 属性的使用display 属性是用来设置元素的类型及隐藏的，常用的属性有：none 元素隐藏且不占位置inline 元素以行内元素显示block 元素以块元素显示2.
文章目录 一、CSS 继承性 1、样式的继承性 2、代码示例 一、CSS 继承性 ---- 1、样式的继承性 CSS 样式 具有 继承性 , 字标签 自动 继承 父标签 的 CSS 样式 , 如下标签结构中..., CSS 继承性测试 如果 为 div 标签设置 字体为红色 , 那么 在 div 标签下的字标签 p 标签 会自动继承 父标签 div 标签的样式..., 其文本也为红色 ; 子标签继承 父标签 样式 , 可以降低 CSS 代码复杂性 , 便于维护 ; 不是所有的 CSS 样式都可以继承 , 可继承的样式有 : 文本相关的 CSS 样式 , text-xxx...样式 ; 字体相关的 CSS 样式 , font-xxx 样式 ; 线相关的 CSS 样式 , line-xxx 样式 ; 字体颜色相关 CSS 样式 , color 样式 ; 元素的宽高样式 , 背景设置...由于 CSS 样式具有继承性 , div 盒子的字标签默认的字体都是红色的 ; 代码示例 : <!
CSS三大特性 层叠性：解决样式冲突的问题 原则： 样式冲突，遵循就近原则，哪个样式离结构近，就执行哪个样式，可以理解为覆盖也就是层叠，第二个样式把第一个样式覆盖了 样式不冲突，不会层叠 继承性：子标签会继承父标签的某些样式...，如文本颜色和色号 降低CSS样式的复杂性 部分样式（text-，font-，line- 这些开头的以及color属性） 行高的继承 注意：font: 12px/1.5 'Microsoft YaHei...'; 这里的行高“1.5”是字体大小的1.5倍，也就是12*1.5=18px 优先级：同一个元素指定多个选择器，就会有优先级的产生 选择器相同，则执行层叠性 选择器不同，则根据选择器权重执行 选择器权重表...important 重要的 无穷大 注意：给**"a"标签指定样式时，只能用a{样式声明}，**不能通过父子级关系来指定样式，因为浏览器默认给"a"标签指定了样式，权重大于继承的 权重叠加:复合选择器会有权重叠加的问题
1.CSS复合选择器 CSS复合选择器：复合选择器是由两个或多个基础选择器通过不同的方式组合而成的 1.1 标签指定式选择器：又称交集选择器，由两个选择器构成，其中第一个选择器为标记选择器，第二个为class...两个选择器之间不能有空格。...如果某些选择器定义的样式完全相同，或部分相同，都可以利用并集选择器为他们定义相同的CSS样式。...2.1 层叠性 所谓层叠性是指多种CSS样式的叠加。...原则： 1、样式冲突，遵循的原则是就近原则，即CSS的书写位置。 2、样式不冲突，不会层叠 2.2 继承性 所谓继承性是指书写css样式表时，子标记会继承父标记的某些样式。
CSS属性书写顺序 布局定位属性：display / position / float / clear / visibility / overflow 自身属性：width / height / margin...无序列表dl dt dd 写了2个晚上终于把这个写完了 定位 将盒子定在某一个位置，所以定位是在摆盒子，按照定位的方式移动盒子 定位=定位模式+边偏移 定位模式 通过CSS中的position值来设定...，定位元素相对于其父元素右边线的距离 相对定位 是元素在移动位置的时候，相对于原来的位置来说的 选择器{position：relative；} 绝对定位 在移动的时候，相对于它的祖先元素来说的 选择器...粘性定位占有原先的位置 必须加一个边偏移才能有效 定位叠放次序 通过z-index的值来确定哪个靠上面 数值越大，盒子越靠上，可正可负 {z-index:2;} 绝对定位的盒子居中 加了绝对定位的盒子不能通过...margin来居中 水平 先走父元素宽度的一半 在往左走定位盒子的宽度的一半 垂直 高度的一半 往下走盒子高度的一半 扩展 特性 行内元素加绝对或者固定定位，可直接设置高度和宽度 块级元素加绝对或固定定位
CSS初学感觉很简单，但随着学习的深入才感觉CSS的水由多深，平常总会遇到各种坑，先总结一些经常遇到的坑 大小写不敏感 虽然我们平时在写CSS的时候都是用小写，但其实CSS并不是大小写敏感的 .test...，但是即使不是xhtml还是写成小写比较好，美观、易读而且可以应对可能的转换需求 选择器优先级 当两个规则都作用到了同一个html元素上时，如果定义的属性有冲突，那么应该用谁的值的，CSS有一套优先级的定义...rem：rem是CSS新增的，em是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小，在多次使用时，就会带来无法预知的错误风险。...option id="t2">test test2 对于前两个...[](images/5.jpg) 我们可以发现图片0和4没有被下载，0是没有用到的CSS，4是父容器的display被设为none的情况，这两种情况下的CSS
二、CSS特性 CSS具有两大特性： 继承性 层叠性 1.继承性 CSS的继承性，指的是子元素继承父元素的某些样式属性，例如：在父元素定义字体颜色（color属性），子元素会继承父元素的字体颜色...CSS继承性示例2.png Ⅰ.a标签的继承 按照例1 体现的CSS继承性，例 2 的子元素也应该是蓝色，但是子元素（a元素）却显示深紫色。...在实际开发中，应充分利用CSS的继承性，从而减少重复代码的编写，这样也可使得CSS代码更精简优雅。...2.层叠性 在网页中，对于同一个元素，我们重复定义了多个相同的属性时，CSS将会怎样处理？ （1）“后来者居上”原则 CSS的层叠性，指的是样式的覆盖。...对于同一个元素来说，若我们重复定义多个相同的属性，并且这些样式具有相同的权重，CSS会以最后定义的属性的值为准，这就是“后来者居上”原则。
样式表常用写法及特性（组合、继承、关联性、权值性、层叠性、重要性） 1.样式的组合：把具有相同声明定义的选择符组合在一起，并用逗号隔开。...(但注意有一些css样式是不具有继承性的。如border:1px solid red;) 继承时会一直向上找，如果在父级找到了就继承父的样式，如果父级没找到会去祖级去找，找到后会继承祖级的样式。...green是正确的颜色，那么为什么呢？是因为浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式。...下面是权值的规则： 标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。... 这时 p 段落中的文本会显示的red红色。
多列布局（Multi-column Layout） MDN - CSS Multi-column Layout Can I Use - CSS3 Multi-column Layout CSS 提供了对多列布局的支持...CSS Shapes MDN - CSS Shapes Can I Use - CSS Shapes Level 1 CSS Shapes 用于描述元素的几何形状。...元素的常规形状就是矩形，使用 CSS Shapes 可以将元素定义为圆、椭圆或多边形。 对于 Level 1 规范，CSS Shapes 可以应用于浮动元素。...Use - CSS property: accent-color CSS 的 accent-color 属性用于设置由某些元素生成的 UI 控件的强调色。...滚动捕捉（Scroll Snap） MDN - CSS Scroll Snap Can I Use - CSS Scroll Snap CSS Scroll Snap 引入了对滚动位置的捕捉，它强制执行滚动操作完成后滚动容器的滚动端口可能结束的位置
CSS3颜色特性 “佛靠金装，人靠衣装”，网页也是如此。随着互联网的迅速发展，一个网页给人们留下的第一印象，既不是它的内容，也不是它的设计， 而是整体颜色。...RGB色彩模式，RGB色彩模式是光的三原色 红、 绿、 蓝 混合产生的。 Web页面中使用的图片在大多数是在RGB色彩模式中制作的。 RGB色彩是颜色相加混合产生的， 这样的混合称为加色混合。...加色混合中， 补色是指相关的两个颜色混合时， 成为白色的情况。...CSS3 颜色模式在 CSS2....的基础 CSS3上 新增了 RGBA、 HSL 和 HSLA： RGBA在RGB基础上增加了控制alpha透明度的参数，其中RGB颜色模式（ 也称为三原色） 是工业界的一种颜色标准，通过对红（ R）、绿
【CSS三大特性】 本文档是个人对 Pink 老师课程的总结归纳及补充，转载请注明出处！ CSS 有三个非常重要的特性：层叠性、继承性、优先级。...CSS 中的继承：子标签会继承父标签的某些样式，如：文本颜色和字号，简单的理解就是：子承父业。...恰当地使用继承可以简化代码，降低 CSS 样式的复杂性 子元素可以继承父元素的样式（ text-、font-、line-、color ） 文本、字体、段落、颜色 body { color: pink; /* font: 12px...三大特性之优先级——注意问题 /* 父亲的权重是 100 */ #father { color: red
CSS 三大特性 层叠 继承 优先级 是我们学习CSS 必须掌握的三个特性。 CSS层叠性 所谓层叠性是指多种CSS样式的叠加。...是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉 比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的情况...样式不冲突，不会层叠 CSS继承性 所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，子元素可以继承父元素的样式（text-，font-，line-这些元素开头的都可以继承，以及color...想要设置一个可继承的属性，只需将它应用于父元素即可。 CSS优先级 定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。...CSS特殊性（Specificity） 关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity，我们称为CSS 特性或称非凡性，它是一个衡量CSS值优先级的一个标准 具体规范入如下
CSS进阶内容 在学习了CSS基本知识之后，我们需要进一步了解CSS，因此写下了这篇文章 当然如果没有学习之前的知识，可以到我的主页中查看之前的文章：秋落雨微凉 - 博客园 CSS三大特性 首先我们先来了解...CSS的三大特点，以便于我们下面知识点的讲解 CSS三大特性包括： 层叠性 继承性 优先级 层叠性 当相同的选择器设置相同的样式，却含有不同的样式值时，此时一个样式就会覆盖掉另一个冲突的样式，层叠性就是为了解决这个问题...-- 对于下方div我们给出两个div的css设置 --> /* 下面这种情况，颜色就出现了层叠性，因就近原则，这里div呈blue色 */...中的继承： 当子类未设置对应属性时，子类继承成父类的某些样式（例如：字体颜色，字体大小等） 恰当使用可以简化代码，降低css复杂性 子元素只能够继承父类的某些样式（text-，font-，line-这些元素开头的...：这里的角仍旧可以单独设置 当两个值时顺序分别是左上和右下，右上和左下 当四个值时顺序分别是左上，右上，右下，左下 */ border-radius：length; }
CSS层叠性 所谓层叠性是指多种CSS样式的叠加。...是浏览器处理冲突的一个能力,如果一个属性通过两个相同权重选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉 比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的情况...简单的理解就是： 子承父业。 恰当地使用继承可以简化代码，降低CSS样式的复杂性。...子元素可以继承父元素的样式（text-，font-，line-这些元素开头的都可以继承，以及color属性） CSS优先级 定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题...CSS特殊性（Specificity） 关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity，我们称为CSS 特性或称非凡性，它是一个衡量CSS值优先级的一个标准 具体规范入如下
计算 calc() 这个感觉是最常用也最实用的的一个方法。 这个函数，可用在如，左右布局，一边宽度固定，另一边撑开左右宽的情景。 calc() 函数用于动态计算长度值。...2.attr() 获取标签属性 attr(属性名) 获取当前所在选择器的标签的属性值，参数就是属性名，不用加引号。...注：还有很多CSS函数，除了这两个外，大部分是关于颜色渲染方面的函数，业务逻辑中我很少用到，但是这两个CSS函数对我们的帮助很大。
权重为 0,0,0,0 ; CSS 选择器 选择器优先级 - 权重计算 继承父标签的样式 , * 通配符选择器 0,0,0,0 标签选择器 0,0,0,1 类选择器，链接伪类选择器 0,0,1,0 ID...important 权重无穷大 1、继承权重示例 在下面的结构中 , CSS 继承权重测试 设置该 div 标签的颜色为红色 , p 标签会继承 div...> div { color: red; } CSS...继承权重测试 展示效果 : 2、继承权重+标签选择器权重示例 在下面的结构中 , CSS 继承权重测试 div { color: red; } p { color: blue; } CSS
新增选择器 p:nth-child(n){color: rgba(255, 0, 0, 0.75)} 弹性盒模型 display: flex; 多列布局 c...
⭐CSS三大特性 1、层叠性 相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题。 ...恰当地使用继承可以简化代码，降低 CSS 样式的复杂性。...网页布局的核心本质： 就是利用 CSS 摆盒子。...5.2、外边距典型应用 外边距可以让块级盒子水平居中的两个条件： 盒子必须指定了宽度（width）。 盒子左右的外边距都设置为 auto 。...margin-bottom 与 margin-top 之和，而是取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。
边框(borders): border-radius 圆角 box-shadow 盒阴影 border-image 边框图像 背景: background-size 背景图片的尺寸 background_origin...背景图片的定位区域 background-clip 背景图片的绘制区域 渐变： linear-gradient 线性渐变 radial-gradient 径向渐变 文本效果; word-break word-wrap
# CSS3 新特性 结构性伪类选择器（重点） 内容追加伪元素（重点） CSS3新增样式属性 background-image的渐变 线性渐变(重点) CSS3的opacity 属性(重点) CSS3...的filter(滤镜) 属性 如同人类的的进化一样，CSS3是CSS2的“进化”版本，在CSS2基础上，增强或新增了许多特性， 弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷。...# 结构性伪类选择器（重点） 结构性伪类选择器是CSS3中新增加的类型选择器。常用的的结构性伪类选择器如下所示： :nth-child(n) 对指定序号的子元素设置样式（从前往后数）。...(创建一个伪元素，其将成为匹配选中的元素的第一个子元素) ::after:向当前的元素内容后面追加内容(创建一个伪元素，作为已选中元素的最后一个子元素) //在每个 元素前面插入内容，并设置所插入内容的样式...radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊； 如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。 <!
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
