HTML与CSS入门--第四章 理解层叠样式表_html/css_WEB-ITnose
1.创建基本样式表的方法
2.使用样式类的方法
3.使用样式ID的方法
4.构建内部样式表和嵌入样式的方法
4.1 CSS工作原理:
CSS:层叠样式表的缩写,是一种定义样式结构如字体、颜色、位置等的语言,被用于描述网页上的信息格式化和实现的方式。
扩展名:.css
分内部样式表,外部样式表以及内联样式表
"层叠"的概念理解:(有助于理解CSS的优先级)CSS样式表中的样式会形成一个层次结构,更具体的样式会覆盖通用的样式。优先级由CSS根据这个层级结构决定,从而实现级联效果。可以用类似继承的关系来理解。
PS:元素的概念:表示标签及其内部的描述信息(如属性、文本、图像等)。
4.2 一个基本的样式表:
标准的额书写方式:一行一个样式规则,便于阅读。
字体专栏,需要抓一个时间段来分析一下,包括字体家族以及字体大小
简单地列一下字体大小的各种单位:
pt:点,1英寸相当于72点
in:英寸
cm:厘米
px:像素
em:字母m的宽度
4.3 CSS样式入门:
CSS中的样式属性分为两大类:
布局属性:影响网页上元素位置的属性。
格式化属性:影响网站中元素的视觉显示的属性。
布局属性之display: block:块元素,自带clear:both
list-item:列表项处理 /*从目前的实际角度来看与block没有什么区别*/
inline,none,其他……
布局属性之width,height
格式化属性之border:最新增加border-radius可以控制矩形的圆角
格式化属性之font:
1.text-decoration常用于删去链接的下划线
2.line-height设置文本行高
4.4 使用样式类:
当需要使网页中的有些文本域其他文本不同时,可以通过创建自定义HTML标签。
我们这里所说的定义的特殊格式文本称为样式类。因此它使一组自定义的格式化说明。例子:
h1 { color:blue }
h1是选择符;color是样式属性;blue是该属性的值
选择符:标签(h1),类(.title),ID(#container)等……
PS:注意组合选择器中"标签.类"与"标签 .类"的区别。
4.5 使用样式ID:
出于布局,格式化,与后台交互的考虑都可以选择使用ID。
ID在同一个页面中必须唯一存在。
4.6 内部样式表和内联样式:
内部样式表:
内联样式:style属性
PS:外部样式表,link,注意需要href,type以及rel属性
推荐阅读
-
移动H5开发入门知识,CSS的单位汇总与用法_html/css_WEB-ITnose
-
HTML与CSS入门--第四章 理解层叠样式表_html/css_WEB-ITnose
-
了解HTML CSS布局(层叠样式表)_html/css_WEB-ITnose
-
CSS层叠样式表_html/css_WEB-ITnose
-
css外部与内部样式表_html/css_WEB-ITnose
-
寒假前端学习(9)--理解CSS盒模型与宽高计算_html/css_WEB-ITnose
-
HTML与CSS入门--第五章 使用文本块和列表_html/css_WEB-ITnose
-
移动H5开发入门知识,CSS的单位汇总与用法_html/css_WEB-ITnose
-
HTML与CSS入门--第六章 使用字体_html/css_WEB-ITnose
-
HTML与CSS入门--第五章 使用文本块和列表_html/css_WEB-ITnose