1. display 属性的使用display 属性是用来设置元素的类型及隐藏的，常用的属性有：none 元素隐藏且不占位置inline 元素以行内元素显示bl...
1.CSS复合选择器 CSS复合选择器：复合选择器是由两个或多个基础选择器通过不同的方式组合而成的 1.1 标签指定式选择器：又称交集选择器，由两个选择器构成，其中第一个选择器为标记选择器，第二个为class...如果某些选择器定义的样式完全相同，或部分相同，都可以利用并集选择器为他们定义相同的CSS样式。...2.1 层叠性 所谓层叠性是指多种CSS样式的叠加。...原则： 1、样式冲突，遵循的原则是就近原则，即CSS的书写位置。 2、样式不冲突，不会层叠 2.2 继承性 所谓继承性是指书写css样式表时，子标记会继承父标记的某些样式。...并不是所有的css属性都可以继承。 不具有继承性的：边框属性，外边距属性，内边距属性，背景属性，定位属性，布局属性，元素宽高属性。
CSS属性书写顺序 布局定位属性：display / position / float / clear / visibility / overflow 自身属性：width / height / margin...我们不会直接用链接a而是用li包含的做法 无序列表dl dt dd 写了2个晚上终于把这个写完了 定位 将盒子定在某一个位置，所以定位是在摆盒子，按照定位的方式移动盒子 定位=定位模式+边偏移 定位模式 通过CSS...可正可负 {z-index:2;} 绝对定位的盒子居中 加了绝对定位的盒子不能通过margin来居中 水平 先走父元素宽度的一半 在往左走定位盒子的宽度的一半 垂直 高度的一半 往下走盒子高度的一半 扩展 特性
文章目录 一、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 样式 ; 元素的宽高样式 , 背景设置...target="_blank"/> div { color: red; } CSS 继承性测试
二、CSS特性 CSS具有两大特性： 继承性 层叠性 1.继承性 CSS的继承性，指的是子元素继承父元素的某些样式属性，例如：在父元素定义字体颜色（color属性），子元素会继承父元素的字体颜色...CSS继承性示例1.png ② 例2 <!...CSS继承性示例2.png Ⅰ.a标签的继承 按照例1 体现的CSS继承性，例 2 的子元素也应该是蓝色，但是子元素（a元素）却显示深紫色。...在实际开发中，应充分利用CSS的继承性，从而减少重复代码的编写，这样也可使得CSS代码更精简优雅。...CSS层叠性示例2.png
CSS 三大特性 层叠 继承 优先级 是我们学习CSS 必须掌握的三个特性。 CSS层叠性 所谓层叠性是指多种CSS样式的叠加。...样式不冲突，不会层叠 CSS继承性 所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，子元素可以继承父元素的样式（text-，font-，line-这些元素开头的都可以继承，以及color...CSS优先级 定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。 在考虑权重时，初学者还需要注意一些特殊的情况，具体如下： 继承样式的权重为0。...权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。 CSS定义了一个!important命令，该命令被赋予最大的优先级。...CSS特殊性（Specificity） 关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity，我们称为CSS 特性或称非凡性，它是一个衡量CSS值优先级的一个标准 具体规范入如下
CSS进阶内容 在学习了CSS基本知识之后，我们需要进一步了解CSS，因此写下了这篇文章 当然如果没有学习之前的知识，可以到我的主页中查看之前的文章：秋落雨微凉 - 博客园 CSS三大特性 首先我们先来了解...CSS的三大特点，以便于我们下面知识点的讲解 CSS三大特性包括： 层叠性 继承性 优先级 层叠性 当相同的选择器设置相同的样式，却含有不同的样式值时，此时一个样式就会覆盖掉另一个冲突的样式，层叠性就是为了解决这个问题...-- 对于下方div我们给出两个div的css设置 --> /* 下面这种情况，颜色就出现了层叠性，因就近原则，这里div呈blue色 */...中的继承： 当子类未设置对应属性时，子类继承成父类的某些样式（例如：字体颜色，字体大小等） 恰当使用可以简化代码，降低css复杂性 子元素只能够继承父类的某些样式（text-，font-，line-这些元素开头的...注意：不可进位 盒子模型 盒子模型是我们网络布局的最基础元素 网络布局过程： 先准备相关网页元素，网页元素基本都是盒子Box 利用css设计好盒子样式，并摆放到相应位置 往盒子里装内容 盒子模型组成部分
【CSS三大特性】 本文档是个人对 Pink 老师课程的总结归纳及补充，转载请注明出处！ CSS 有三个非常重要的特性：层叠性、继承性、优先级。...三大特性之层叠性 div { color: red; } div {...CSS 中的继承：子标签会继承父标签的某些样式，如：文本颜色和字号，简单的理解就是：子承父业。...三大特性之继承性 div { color: pink; font-size: 14px;...三大特性之继承性——行高的继承 body { color: pink; /* font: 12px
CSS层叠性 所谓层叠性是指多种CSS样式的叠加。...样式不冲突，不会层叠 CSS继承性 所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。...恰当地使用继承可以简化代码，降低CSS样式的复杂性。...权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。 CSS定义了一个!important命令，该命令被赋予最大的优先级。...CSS特殊性（Specificity） 关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity，我们称为CSS 特性或称非凡性，它是一个衡量CSS值优先级的一个标准 具体规范入如下
继承权重示例 2、继承权重+标签选择器权重示例 3、继承权重+标签选择器权重+类选择器示例 一、继承权重 ---- 在下面的 基础选择器 权重 中 , 继承父标签样式 的 权重为 0,0,0,0 ; CSS...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三大特性 层叠性：解决样式冲突的问题 原则： 样式冲突，遵循就近原则，哪个样式离结构近，就执行哪个样式，可以理解为覆盖也就是层叠，第二个样式把第一个样式覆盖了 样式不冲突，不会层叠 继承性：子标签会继承父标签的某些样式...，如文本颜色和色号 降低CSS样式的复杂性 部分样式（text-，font-，line- 这些开头的以及color属性） 行高的继承 注意：font: 12px/1.5 'Microsoft YaHei
CSS初学感觉很简单，但随着学习的深入才感觉CSS的水由多深，平常总会遇到各种坑，先总结一些经常遇到的坑 大小写不敏感 虽然我们平时在写CSS的时候都是用小写，但其实CSS并不是大小写敏感的 .test...xhtml标准的关系，但是即使不是xhtml还是写成小写比较好，美观、易读而且可以应对可能的转换需求 选择器优先级 当两个规则都作用到了同一个html元素上时，如果定义的属性有冲突，那么应该用谁的值的，CSS...rem：rem是CSS新增的，em是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小，在多次使用时，就会带来无法预知的错误风险。...，我们也经常使用backgroung-image等css属性为页面添加图片，这些图片是不是一定会被加载呢，看个例子 我们可以发现图片0和4没有被下载，0是没有用到的CSS，4是父容器的display被设为none的情况，这两种情况下的CSS
⭐CSS三大特性 1、层叠性 相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题。 ...层叠性原则: 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式 样式不冲突，不会层叠 2、继承性 CSS中的继承: 子标签会继承父标签的某些样式，如文本颜色和字号。...恰当地使用继承可以简化代码，降低 CSS 样式的复杂性。...利用 CSS 设置好盒子样式，然后放置到相应位置。...CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距、和 实际内容 3、边框（border） 3.1、边框的使用 1、border可以设置元素的边框。
CSS3新特性 CSS3是最新的CSS标准，旨在扩展CSS2.1。 圆角 通过border-radius属性可以给任何元素制作圆角。...https://github.com/WindrunnerMax/EveryDay/blob/master/CSS/Grid布局.md 多列布局 CSS3可以将文本内容设计成像报纸一样的多列布局。...中增加了一些新的用户界面特性来调整元素尺寸，框尺寸和外边框。...DOCTYPE html> CSS3新特性 div{.../css3-tutorial.html https://developer.mozilla.org/zh-CN/docs/Archive/CSS3
# CSS3 新特性 结构性伪类选择器（重点） 内容追加伪元素（重点） CSS3新增样式属性 background-image的渐变 线性渐变(重点) CSS3的opacity 属性(重点) CSS3...的filter(滤镜) 属性 如同人类的的进化一样，CSS3是CSS2的“进化”版本，在CSS2基础上，增强或新增了许多特性， 弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷。...# 结构性伪类选择器（重点） 结构性伪类选择器是CSS3中新增加的类型选择器。常用的的结构性伪类选择器如下所示： :nth-child(n) 对指定序号的子元素设置样式（从前往后数）。.../style> 商城系统 结果 # CSS3...radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊； 如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。 <!
样式表常用写法及特性（组合、继承、关联性、权值性、层叠性、重要性） 1.样式的组合：把具有相同声明定义的选择符组合在一起，并用逗号隔开。...(但注意有一些css样式是不具有继承性的。如border:1px solid red;) 继承时会一直向上找，如果在父级找到了就继承父的样式，如果父级没找到会去祖级去找，找到后会继承祖级的样式。...是因为浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式。 下面是权值的规则： 标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。
文章目录 一、CSS 层叠性 1、样式层叠冲突 2、样式层叠不冲突 一、CSS 层叠性 ---- 1、样式层叠冲突 CSS 层叠性 : 为 标签 设置 多种 CSS 样式 , 会出现 CSS 样式叠加的情况..., 如果有 两个相同类型 的 CSS 样式 作用在了 同一个 标签 上 , 那么就出现了 样式冲突 , 样式冲突 后 , 根据 " 就近原则 " , 选择 最近设置 的样式 , 也就是 后设置的样式...DOCTYPE html> CSS 层叠性 CSS 层叠性 <base...red; font-size: 30px; } div { color: blue; } CSS
CSS三大特性简介 我们来看运动会开幕式的例子。仪仗队需要穿仪仗队服，你只需要指定仪仗队需要穿红色的队服即可，只要该同学是仪仗队员，他自然会穿上红色的队服。...我们的css继承也一样，并不是所有的样式都是可以继承的，那么哪些样式是可以继承的呢？ 3.可继承样式 哪些样式是可以继承的呢？...我这里不会一一列举，有兴趣的同学可以看CSS中可以和不可以继承的属性，并在实际操作中去验证。...test06.3 参考 CSS默认可继承样式 CSS三大特性之继承性 CSS 继承深度解析 css的三大特性（继承，层叠，优先级） CSS中可以和不可以继承的属性
多列布局（Multi-column Layout） MDN - CSS Multi-column Layout Can I Use - CSS3 Multi-column Layout CSS 提供了对多列布局的支持...书写模式（Writing Modes） MDN - CSS Writing Modes Can I Use - CSS writing-mode property Writing Modes 定义了各种国际书写模式...CSS Shapes MDN - CSS Shapes Can I Use - CSS Shapes Level 1 CSS Shapes 用于描述元素的几何形状。...元素的常规形状就是矩形，使用 CSS Shapes 可以将元素定义为圆、椭圆或多边形。 对于 Level 1 规范，CSS Shapes 可以应用于浮动元素。...滚动捕捉（Scroll Snap） MDN - CSS Scroll Snap Can I Use - CSS Scroll Snap CSS Scroll Snap 引入了对滚动位置的捕捉，它强制执行滚动操作完成后滚动容器的滚动端口可能结束的位置
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
