要注意看文档,文档比较稳妥而且会有细节提示(比如元素是否具有继承性)。
加粗
<strong></strong>或者<b></b>
font-weight:400;(正常字体)
font-weight:800(加粗)
元素选择符
在口语中,多称为元素选择器。
标签选择器 E{属性}
直接以标签开头:例如,设置整个页面的背景颜色(需要给html{background-color:red;},此处不需要走自定义标签名而可以直接设置样式,即为:标签选择器)
类选择器 .E{} -> class="E"
类标签选择器
注意:可读性较强,不能以中文和数字开头,可以在字母后面添加数字"a~Z 数字 -连接符"都可。
类标签选择器,以点开头设置样式,在引用中则是使用class标记采用样式。
id选择器 #E{} -> id="E"
注意:id选择器是唯一选择,和类选择的命名规范一样,只是id选择器在命名的时候采用的是#,而类选择器是以.来规范。
浏览加载网页的简化版本:
1. 浏览器载入HTML文件(比如从网络上获取)。
2. 将HTML文件转化成一个DOM(Document Object Model),DOM是文件在计算机内存中的表现形式,下一节将更加详细的解释DOM。
3. 接下来,浏览器会拉取该HTML相关的大部分资源,比如嵌入到页面的图片、视频和CSS样式。JavaScript则会稍后进行处理,简单起见,同时此节主讲CSS,所以这里对如何加载JavaScript不会展开叙述。
4. 浏览器拉取到CSS之后会进行解析,根据选择器的不同类型(比如element、class、id等等)把他们分到不同的“桶”中。浏览器基于它找到的不同的选择器,将不同的规则(基于选择器的规则,如元素选择器、类选择器、id选择器等)应用在对应的DOM的节点中,并添加节点依赖的样式(这个中间步骤称为渲染树)。
5. 上述的规则应用于渲染树之后,渲染树会依照应该出现的结构进行布局。
6. 网页展示在屏幕上(这一步被称为着色)。
DOM补充说明:
文档对象模型DOM
DOM即文档对象模型,是W3C制定的标准接口规范,是一种处理HTML和XML文件的标准API。DOM提供了对整个文档的访问模型,将文档作为一个树形结构,树的每个结点表示了一个HTML标签或标签内的文本项。DOM树结构精确地描述了HTML文档中标签间的相互关联性。将HTML或XML文档转化为DOM树的过程称为解(parse)。HTML文档被解析后,转化为DOM树,因此对HTML文档的处理可以通过对DOM树的操作实现。DOM模型不仅描述了文档的结构,还定义了结点对象的行为,利用对象的方法和属性,可以方便地访问、修改、添加和删除DOM树的结点和内容。
标签的分类:
标签有三类,分别是块状标签、行内标签还有衍生出来的行内块标签。
第一大类:块级标签
(1)例如:html、body、header、footer、div、h1~h6、p、ul、ol、li等
(2)同一级的标签,从上向下依次排列,各独占一行,即【竖排】;
(3)标签的宽度,默认把父标签(上一级标签)横向【填满】;
(4)标签的高度,默认为标签内的内容的高度,当没有内容时为0;
(5)可以设置标签的宽度和高度;
(6)可以设置标签的上右下左四个方向的内外间距;
第二大类:行内标签
(1)例如:<a>、<span>、<b>、<i>、<em>等;
(2)同一级的标签,从左向右,行内依次排列,一行显示不下换行,即【行内横排】;
(3)标签的宽度和高度,为标签内的内容的宽高,当没有内容时宽为0;
(4)设置宽度和高度被浏览器忽略;
(5)只能设置标签左右两个方向的内外间距;
第三大类:行内块标签
(1)例如 :<img>、<input>、<button>等;
(2)可以在一行内横着排的块,即【行内横排的块】;
(3)除宽度默认由内容决定、横排外,其它跟块相同;
如何快速分辨一个标签的分类
(1)标签复制一份,各占一行则是块状标签;
(2)排成一行时,设置标签的高度,无效则是行内元素;
(3)否则是行内块。
标签的盒子模型知识要点
(1)浏览器为了计算并排版标签,把每一个标签都看作一个长方形的【盒子】,即盒子模型;
(2)一个盒子包括:
(2.1)盒子在排版时,四周要不要留空白间距呢?即盒子的【外间距】,英文margin;
(2.2)盒子被目视时,有多大呢?需要从盒子的四个边框算起,即【边框】,英文border;
(2.3)盒子能盛放东西,需要为被盛放的东西预留多大空间,即内容区的【宽】和【高】,英文width和height;
(2.4)盒子内盛放的内容是挨着边框放,还是留点间距呢?即【内填充】,英文padding;
calc()=calc(四则运算)
/* 1.利用calc()函数,把页头区内四个子模块的高度相加,
动态计算出页头区的高度;
2. calc与(之间不能有空格;
3. 运算符号+ 和 - 两边都需要留空格;
4.可以实现不同类型数值之间的运算*/
height: calc(36px + 121px + 30px + 522px);
在上图案例中该元素的宽度始终小于其父宽度的100%