Daotin的梦呓
从零基础学 Web 前端系列
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程。此文首发于「Daotin的梦呓」公众号,同时也会同步到我的相关博客,可以从关于我找到我的博客地址,也欢迎大家订阅关注。在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!
一、文本元素
1、属性
2、文本属性连写
注意:font:后边写属性的值。一定按照书写顺序。
PS:文本属性连写中文字大小和字体为必写项。
3、文字的表达方式
1. 直接写中文名称
2. 写字体的英文名称
3. unicode 编码(解析更快)
如何找到某一字体相对应的unicode编码呢?
第一步:一般打开浏览器,按F12
第二步:找到console
第三步:输入escape(“宋体”); 注意英文的括号和双引号。
二、样式表书写位置
内嵌式写法
外链式写法
行内样式表
三种写法特点:
内嵌式写法:样式只作用于当前文件,没有真正实现结构表现分离。
外链式写法:作用范围是当前站点,谁调用谁生效,范围广,真正实现结构表现分离。
行内样式表:作用范围仅限于当前标签,范围小,结构表现混在一起。 (不推荐使用)
三、标签分类
1、块元素
特点:
1.独占一行;
2.可以设置宽高;
3.嵌套(包含)下,子块元素宽度(没有定义情况下)和父块元素宽度默认一致。
2、行内元素
特点:
1.在一行上显示;
2.不能直接设置宽高(需要转行内块);
3.元素的宽和高就是内容撑开的宽高。
3、行内块元素(内联元素)
特点:
1.在一行上显示;
2.可以设置宽高。
4、三者相互转换
1. 块元素转行内元素
2. 行内元素转块元素
3. 块和行内元素转行内块元素(用的最多)
四、CSS三大特性
1、层叠性
当多个样式作用于同一个(同一类)标签时,样式发生了冲突,总是执行后边的代码(后边代码层叠前边的代码)。和标签调用选择器的顺序没有关系。
2、继承性
继承性发生的前提是包含(嵌套关系)
★ 文字颜色可以继承
★ 文字大小可以继承
★ 字体可以继续
★ 字体粗细可以继承
★ 文字风格可以继承
★ 行高可以继承
总结:文字的所有属性都可以继承。
特殊情况:
h系列不能继承文字大小。(继承了但是不显示)
实际上:h1显示的是你设置的 font-size * 2;
h2显示的是:你设置的 font-size * 1.5
…….
a链接标签不能继承文字颜色(继承了但是不显示,链接标签默认是蓝色)
3、优先级
PS:这里的数字不是准确的,实际上100个标签选择器叠加的权重也比不过一个类选择器的权重。
特点:
1.继承的权重为0(当没有自己的样式时,听继承的;有自己的样式时,继承的权重为0)
2.权重会叠加。
(上图:类选择器10+标签选择器1=11,所以最后14期威武显示的是黄色)
欢迎关注
Daotin的梦呓
如果觉得不错,欢迎分享给其他的小伙伴们 :)
领取专属 10元无门槛券
私享最新 技术干货