2021-08-20 叮~CSS 属性 层叠 继承
一、常见的CSS属性
属性 | 示例 | 描述 |
---|---|---|
color | color: red | 设置元素内容的颜色 |
text-align | text-align: center | 设置元素内容的对齐方式 |
font-size | font-size: 28px | 设置元素内容的文字大小 |
font-weight | font-weight: bold | 设置元素内容的文字粗细 |
background-color | background-color: red | 设置元素的背景颜色 |
圆角:border-radius: 20%;
圆 半径为100px
.circle{width: 100px;height: 100px;background-color: #c51e1e;border-radius: 100%;
}
文本相关属性
斜体:font-size: italic;
文字间隔:letter-spacing: 20px;
单词间距:word-spacing: 20px;
首行缩进:text-indent: 20px;
文本样式:text-decoration: none; 取消样式
text-decoration: overline; 上划线
text-decoration: underline; 下划线
text-decoration: line-through; 中划线
字体:font-family: "宋体","微软雅黑"; 设置多个属性值,直到识别到已安装的字体,若未识别到,则显示非衬线字体
非衬线字体(sans-serif):文字边缘未经过修饰,在电子设备上视觉效果良好 eg:幼圆
衬线字体(serif):文字边缘经过修饰,在纸张上视觉效果好 eg:宋体
二、颜色单位
CSS 中所有的颜色都是用RGB色域定义的,
表示RGB的方式:
关键字:red
HEX16进制表示法:#后跟3位数或6位数数字
数字用0-9以及大小写a~f字符组成,这些值映射到红绿蓝色彩通道
RGB值:由 rgb ()函数声明,共三个值,每个值范围在0-255,0为纯黑,255为纯白
HSL值:由 hsl ()函数声明,色度Hue值为0-360无单位数字;饱和度 Saturation 、亮度 lightness 值从0-100%表示。
/* 关键字 */color: blueviolet;/* 16进制 */color: #555;/* rgb函数,rgba:a代表饱和度,a的值在0-1*/color: rgb(255,57,157);color: rgba(255,57,157,0.6);
三、长度单位
一个尺寸是由长度+单位组成的
绝对长度:
px 一个像素的具体带下会根据设备的分辨率有所不同
计算机屏幕是由很多小点组成的,每一个点就是一个像素
其他尺寸单位,在经过浏览器计算后,都会变为px
相对长度:
%在不同的 CSS 属性中有不同的含义
em 相对于当前元素的字体大小(px)
rem 相对于根元素的大小
四、CSS 选择器
通配符 * 匹配页面上所有的元素
/* 通配符 */
*{ padding: 0;margin: 0;
}
后代 :书写格式:祖先元素 后代元素{声明块}
/* 后代 */
section a{color: black;text-decoration: none;background-color: cornflowerblue;
}
并集:同时选择多个选择器的内容,选择器之间用英文逗号 ,
/* 并集 */
a,p,h2{color: gold;font: xx-large;background-color: indigo;
}
伪类选择器
/* 第一个子元素 */
section>p:first-child{color: rgb(25, 241, 72);background-color: cornflowerblue;
}
/* 最后一个子元素 */
section>p:last-child{font-size: 150px;
}
a标签配套的伪类选择器
:link 访问前
/* 访问前 */ a:link{color: mediumspringgreen; }
:visited 访问后
/* 访问后 */ a:visited{color: rgb(153, 24, 228); }
:hover 鼠标移入
/* 鼠标移入 */ a:hover{color: yellow; }
:active 访问时,点击
/* 点击 */ a:active{color: royalblue; }
:nth-child() 匹配父元素的第N个子元素
括号里直接写数字
/* 括号里的数字为几,就表示为第几个子元素 */ p:nth-child(3){color: chartreuse; }
括号里写odd或even
/* odd为奇数,even为偶数 */ p:nth-child(even){color: rgb(19, 226, 191); }
括号里写公式an+b
/* an+b (n从0开始,a、b为整数) */ p:nth-child(2n+1){color: rgb(255, 0, 0); }
:nth-of-type() 匹配父元素中指定类型元素的第N个子元素
括号里直接写数字
p:nth-of-type(2){color: coral; }
括号里写odd或even
p:nth-of-type(odd){color: coral; }
括号里写公式an+b
p:nth-of-type(2n){color: coral; }
伪元素选择器
/* 伪元素选择器
元素名::after{content:"在之前";}*/
/*::before 在之前添加内容*/
p::before{content: "在之前";color: #488214;
}
/*::after 在之后添加*/
p::after{content: "在之后";color: #488214;
}
/*::first-letter 设置首字母的样式*/
p::first-letter{color: #488214;
}
/*::first-line 设置第一行的样式*/
p::first-line{color: #488214;
}
/*::selection 设置用户选中的内容的样式*/
h2::selection{background-color: blueviolet;color: chartreuse;
}
属性选择器
/* [target="_self"]{声明块} */
声明冲突:一个人元素的外观可能来自于多个规则的影响,这些规则共同作用于这个元素
这些规则的属性相同,值不同,就是声明冲突
div+p
层叠:
1、什么是层叠:
层叠是一种机制,用来解决CSS声明冲突、
2、层叠的过程:
比较优先级:优先级高的保留,反之淘汰
/* 重要声明 !important */ margin: 0px !important;
优先级从低到高:浏览器默认样式表中的声明;
用户样式表中的普通声明;
作者样式表中的普通声明;
作者样式表中的重要声明;
用户样式表中的重要声明;
比较特殊性:比较特殊性时,每一个冲突声明会生成4个数字分组(a,b,c,d)
规则适用范围越大,特殊性越低,适用范围越小,特殊性越高
特殊性从高到低:!important>行内>ID>类>元素>通配符
嵌入 id class 元素 a b c d style 1 0 0 0 id 0 1 0 0 class、属性、伪类 0 0 1 0 元素、伪类 0 0 0 1 通配符 0 !important 最高 比较源次序
继承
什么是继承:是指子元素会自动拥有父元素的某些CSS 属性
可继承的属性:color; font-size; font-weight; text-align
不可被继承的属性:background-color
继承具有传递性
强制继承:也叫显示继承,将CSS属性值设置为 inherit
原因:1.为了继承某些不可被继承的属性 2.为了继承已被声明的属性
属性值计算过程:
无属性值→确定声明值 →层叠冲突 →使用继承 →使用默认值→每个属性都有值
1. 确定声明值:
2. 层叠冲突:对样式表有冲突的声明使用层叠规则,确定CSS值
3. 使用继承:对仍然没有值的属性,若可以继承,继承父元素的属性
4. 使用默认值:对仍然没有值的属性,使用默认值。
2021-08-20 叮~CSS 属性 层叠 继承相关推荐
- [前端笔记——CSS] 10.层叠与继承+选择器
[前端笔记--CSS] 10.层叠与继承+选择器 1.层叠与继承 1.1 冲突规则 1.2 继承 1.3 层叠 1.4 CSS位置的影响 2.选择器 2.1 选择器是什么? 2.2 选择器列表 2.3 ...
- html5后代选择符,css选择符有哪些?哪些属性可以继承?
属性的名字是一个合法的标识符,它们是CSS语法中的关键字.一种属性规定了格式修饰的一个方面.CSS选择器用于选择你想要的元素的样式的模式. css选择符有哪些?哪些属性可以继承?下面我们来看一下css ...
- CSS 中哪些属性可以继承?
每个CSS属性定义的概述都指出了这个属性是默认继承的,还是默认不继承的.这决定了当你没有为元素的属性指定值时该如何计算 值. 当元素的一个继承属性没有指定值时,则取父元素的同属性的计算值.只有文档根元 ...
- 面试总结(CSS 的盒模型?、CSS 中选择器的优先级以及 CSS 权重如何计算?、CSS 中哪些属性可继承,哪些不可以?、CSS 单位中 px、em 和 rem 的区别?、rem 适配....)
CSS 的盒模型? 盒子模型(Box Modle)可以用来对元素进行布局,包括内边距,边框,外边距,和实际 内容这几个部分 第一种是 W3C 标准的盒子 ...
- CSS选择器有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先?
CSS选择器有哪些? 选择符类型 例子 例子描述 通用选择器 * 类别选择器(.class) .intro 选择class="intro"的所有元素 ID选择器(#id) #fir ...
- DW中CSS属性详解
作者:未知 来源:5D多媒体 在Dreamweaver的CSS样式里包含了W3C规范定义的所有CSS1的属性,Dreamweaver把这些属性分为Type(类型).Background(背 ...
- web前端入门学习 css(5)(浮动)(ps切图)(css属性书写顺序)(学成在线网站案例)
文章目录 传统网页布局的三种方式 标准流(普通流.文档流) 浮动(为什么需要浮动?) 浮动特性 浮动元素会脱离标准流,可以与普通流的元素相重叠 如果多个盒子都设置了浮动,则它们会按照属性值一行内显示并 ...
- css元素与浏览器边框,别具光芒CSS属性、浏览器兼容与网页布局
别具光芒CSS属性.浏览器兼容与网页布局 语音 编辑 锁定 讨论 上传视频 上传视频 <别具光芒CSS属性.浏览器兼容与网页布局>是2008年人民邮电出版社出版的图书.该书结合大量范例与实 ...
- (转)CSS样式表继承详解
什么是css 继承? 要想了解css样式表的继承,我们先从文档树(HTML DOM)开始.文档树由HTML元素组成. 文档树和家族树类似,也有祖先.后代.父亲.孩子和兄弟^_^.这很容易理解吧,笔者在 ...
最新文章
- C#学习笔记:预处理指令
- 为什么我强烈建议大家使用枚举来实现单例
- 策略模式应用场景和uml_策略模式
- 《自然》年度十大人物:天才曹原居首 贺建奎来去匆匆
- java中匿名数组_Swagger UI:数组中的多个匿名对象
- android 仿携程选择城市,类似携程商旅的城市选择器 CityPicker
- 最常用的 HTTP 方法:GET 和 POST
- 无人机在倾斜摄影时丢片的解决方案
- Nautilus获得了标签化支持
- 使用whistle代理
- 前端安全机制集合(不定期更新) -- 戴向天
- 【转】知识图谱构建全过程
- vscode终端显示中文字符乱码解决
- VMware Workstation 14中文破解版下载(附密钥)(笔记)
- matlab中dcd是什么,dcd是什么意思
- PCIe卡知识扫盲:你想了解的都在这里
- STM32汇编语言点亮led灯
- Annotation(注释):基本Annotation
- Android PackageManagerService分析一:PMS的启动
- echarts饼图百分比不为100%
热门文章
- [健康]巧用药茶疗慢性咽炎
- 世界上*最美*的英文
- 瞪羚优化算法(Gazelle Optimization Algorithm,GOA)
- 阿里云因Ak泄露,被攻击处理过程
- matlab gui静态文本框透明化,让所有的静态文本都透明好显示背景色
- 基于TC358870XBG和TC358775XBG之AR显示方案
- 计算机名师工作室活动个人总结,名师工作室个人年度工作计划范文(通用3篇)...
- 谷歌浏览器插件Automa_0.自我见解及官方文档
- 当实体类无法引用,有没有任何问题的时候,报红报错无法启动
- Maemo中如何启动应用程序。