CSS精讲（二）
CSS体系知识介绍
大家好，我是空城。初学web前端的小伙伴经常会遇到的问题，1.没方法 2.没资源 3.没经验，不知道从何开始，我也是新手，很能理解web前端新手的难处。为了更好的帮助大家自学好web前端开发，关注我的零基础前端入门教程专栏，我把自己精心梳理的web自学资料、心得及完整的web前端学习路线统统汇总分享出来，跟着我这一套流程走，帮助你在一个月之内快速入门前端，3到6个月找到工作。
我把CSS后续要学习的知识体系首先做一个大致的介绍。
首先我们要学习选择器包括选择器种类、组合选择器、权重计算，介绍常见的样式，文本、盒子模型、背景、单位、继承、块和行的概念、文档流（普通流的概念）等等，然后介绍盒子模型、边距合并。其后开始学习布局包括flex布局、grid布局、两栏、三栏、垂直水平居中等，讲完布局之后学习定位：几种定位、层叠上下文，然后开始学习BFC，学完之后我们需要用伪元素做形状、字体图标、svg图标，最后我们要学习响应式布局、移动端适配，还有CSS3包括特效、背景渐变、过渡、动画3D。
选择器优先级
为什么关注优先级
- 不同的选择器组合修改同一个元素的同一个属性，谁说了算？
- 看下列代码：
<style>
p{
color: yellow;
}
#app p{
color: red;
}
.hrader .user{
color: blue;
}
</style>
<body>
<div id = "app">
<div id = "header">
<p class="user">前段学习</p>
</div>
</div>
</body>
大家猜猜前段学习字体是什么颜色？
点击预览结果
大家猜对了吗？为什么会是这样的结果呢？这就不得不要提到选择器优先级处理原则。
优先级处理原则
!important > 内联样式 > 选择器设置样式 （id选择器样式>class选择器>标签选择器且权重比为100:10:1）> 浏览器默认样式 > 来⾃继承的样式
如果优先级完全相同，后⾯的覆盖前⾯的
在上一道题中字体颜色红色的样式权重大于蓝色大于黄色，所以会产生上述结果。
!important 和 内联样式
- 以下前端学习⽂字的颜⾊是什么？为什么？
<style>
p{
color: red !important;
}
.box p{
color:blue;
}
</style>
<body>
<div class="box">
<p style="color: yellow;">前端学习</p>
</div>
</body>
!important的优先级最高。
三种写法都需要直接选中目标元素。
样式继承
以下文字颜色是什么？为什么？
<style>
.box {
color: red !important;
/*低*/
}
.box p {
color: blue;
/*中*/
}
</style>
<div class="box">
<p style="color: yellow;">饥人谷</p>
</div>
来自继承的样式优先级最弱，哪怕他加了!important。
结果预览
一个继承的例子
- a链接的颜色是是什么？为什么？
<style lang="">
.box{
color: red !important;
}
</style>
<body>
<div class="box">
<a href="#">前端学习第八课</a>
</div>
</body>
继承属性和非继承属性
- 继承属性：设置后自动继承给后代元素
○ color、font-size、font-familt、line-height… - 非继承属性：只对当前元素生效
○ border、background、margin、padding、display
范例
- 给body设置font，body内部所有元素都继承该font。
<style>
body {
font: 12px/1.5 tahoma, arial, sans-serif
}
</style>
选择器权重计算
优先级计算
- 千位：如果声明在style的属性（内联样式）则该位得一分。
- 百位：选择其中包含ID选择器则该位的一分。
- 十位：选择其中包含类选择器、属性选择器或者伪类则该位得一分。
- 个位：选择器中包含标签选择器、伪元素选择器则该位得一分。
Tips：优先级权值实际并不是按十进制，用数字表示只是说明思想，一万个 class 也不如一个 id 权值高
Tips：通用选择器（*），组合符（+,>,~,‘’），和否定伪类（:not）不会影响
范例1
<style>
#detail span { /*101*/
color: red;
}
#detail.box > span.title { /*121*/
color: blue;
}
.box span:hover { /*021*/
color: yellow;
}
#detail span#title { /*201*/
color: pink;
}
</style>
<p id="detail" class="box">
<span class="title" id="title" >饥⼈⾕</span>
</p>
范例2
以下文字的颜色是什么？为什么？
<style>
#detail.box { /*110 ?*/
color: red;
}
span.title { /*011 ?*/
color: blue;
}
</style>
<p id="detail" class="box">
<span class="title" id="title" >前端学习</span>
</p>
继承的样式，权重最弱
结果预览
文本样式
color属性
- 设置字体颜色
○ 单词表示法：red、blue、green、grey…
○ 十六进制表示法：#ff00ff、#f0f
○ rgb（255,255,255）、rgba(0,0,0,0.2)、hsl、hsla
○ 关键字：currentColor、transparent。 - 以下代表什么颜色
○ #000、#333、#666、#999、#eee、#fff、#f00、#0f0、#00f、rgba(255,255,255,1)、rgba(0,0,0,0.3)
设置背景透明和整体透明
- 背景透明
- background-color:transparent;
- background-color:rgba(255,255,255,0)
- 整体透明
- opacity:0;
font-size
● 设置字号大小
○ font-size: 20px; 中文最小12px。
○ font-size: 2em; 设置为来自继承的font-size的2倍。
○ font-size: 2rem; 设置为html根节点(默认16px)font-size的2倍。
font-size范例
● 以下文字字号和缩进是多少？
<div class="wrap">
<div class="inner-1">2em</div>
<div class="inner-2">2rem</div>
</div>
<style>
.wrap {
font-size: 20px;
}
.wrap .inner-1 {
font-size: 2em;
text-indent: 2em;
}
.wrap .inner-2 {
font-size: 2rem;
text-indent: 2rem;
}
</style>
font-family
- 用法：
font-family: tahoma, arial, ‘Hiragino Sans GB’, ‘\5b8b\4f53’ ,
sansserif, ‘微软雅⿊’ , ‘Microsoft YaHei’;
- 注意
- 先找一个字体，找不到再第二个，依次往后…
- 字体里包含空白字符最好要加引号（可以不加，但如果字体包含数字和其他特殊字符，一定要加引号）。
- 如果字体是中文，最好转unicode。
@font-face
- 设置自定义字体
@font-face {
font-family: "jirengu";
src: url("https://mdn.mozillademos.org/files/2468/
VeraSeBd.ttf");
}
body { font-family: jirengu, serif; }
font-style
● 设置文字是否以斜体显示
p {
font-style: nonrmal; /*正常*/
font-style: italic; /*斜体*/
}
font-weight
- 设置文字粗细。
- 设置字体的粗细还取决于字体库是否存在该粗细尺寸的字体的图形描述。
p {
font-weight: bold;
font-weight: normal;
font-weight: 100;
font-weight: 400;
font-weight: 900;
}
text-align
- 设置文本对齐方式。
- 需设置在块容器上。
p {
text-align: left; /*左对⻬*/
text-align: center; /*居中对⻬*/
text-align: right; /*右对⻬*/
text-align: justify; /*两侧对⻬，对最后⼀⾏⽆效*/
}
text-decoration
- 设置文字划线样式
<style>
.a { text-decoration: none; }
.a { text-decoration: underline; }
.b { text-decoration: line-through; }
.c { text-decoration: overline; }
.d { text-decoration: green wavy underline; }
</style>
<a href='#'>饥⼈⾕</a>
<div class='a'>饥⼈⾕a</div>
<div class='b'>饥⼈⾕b</div>
<div class='c'>饥⼈⾕c</div>
<div class="d">饥⼈⾕d</div>
一行超出…
- 将文字设置为单行，超出则展示为…
<style>
h1 {
width: 200px;
white-space: nowrap; /* ⽂字遇边界不折⾏，1⾏展示 */
overflow: hidden; /* 超出边界隐藏 */
text-overflow: ellipsis; /* ⽂本溢出时...展示 */
}
</style>
<h1>hello world, hello world, hello world</h1>
结果预览
多行超出…
- 将文字设置为双行，超出则展示为…
<style>
h1{
width: 200px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<h1>招落气玉人音是尘智会人韩了介，高己宫婵尘得韩遗子，虑登秦到慷白帝作然冈德尝生没绛时人于了，得等丑才快洪慷知沫收氏家磊事冇，不九尺越秦撒变
说牛我杨，气卅水也卞乏定来变你无要路，搏见为承范人归中则叩韩谓，中今嗣爻，国罪快羊帮司后意守，终要让别范反，司失艳谋支。</h1>
</body>
-webkit line clamp：css属性允许将块容器的文字限制为指定的行数,并用省略号填充尾部。
display:-webkit-box/-webkit-inline-box：设置容器显示为webkit盒子。
-webkit-box-orient: vertical：设置盒子内文字显示方向。*
overflow:hidden:隐藏不需要显示的部分，当然，就算你不写，设置的行数属性位置也会出现省略号，但是，注意但是它就不会按照指定的行数显示了，而是显示全部。
常见面试题及解答
1.css 选择器优先级？
!important > 行内样式（比重1000）> ID 选择器（比重100） > 类选择器（比重10） > 标签（比重1） > 通配符 > 浏览器默认属性>继承
这里加粗部分要注意：以免面试题中出错，而且有些面试官自己都不知道浏览器默认属性大于继承
2.垂直居中有几种方式？
单行文本: line-height = height
图片: vertical-align: middle;
absolute 定位: top: 50%;left: 50%;transform: translate(-50%, -50%);
flex: display:flex;margin:auto
3.rgba和opacity的透明效果有什么不同？
opacity 会继承父元素的 opacity 属性，而 RGBA 设置的元素的后代元素不会继承不透明属性。
结束语
选择器优先级、样式继承、⽂本样式、单位就已经讲完啦，下一篇文章将讲解块、行的特性。都看到这里了，不妨点个赞吧，您的认可是我最大的鼓励
大家可以关注我，之后我还会一直更新最新的零基础前端入门学习的文章来供大家学习，并且我会把这些文章放到【零基础前端入门学习】这个专栏里，供大家学习使用。
然后大家可以关注一下我的微信公众号：前端精选，等这个专栏的文章完结以后，我会把所有的资料和笔记放到公众号上，大家可以去那获取。
2381
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
