HTML基础学习（二）

前端三层：

HTML：结构层，从语义的角度去搭建网页结构

CSS：样式层，从美观的角度去修饰页面样式

JavaScript：行为层，从交互的角度去描述页面行为

CSS简介

层叠式样式表主要用于配合HTML结构，添加页面样式、辅助布局

CSS基本概念

样式：CSS样式分为两种，一种是文字的样式，一种是盒模型的样式

布局：辅助HTML的布局划分，完成HTML不能完成的功能

CSS的属性值写法发生了变化，k:v

其中文字三属性：color、font-size、font-family

盒子三属性：width、height、background-color

文字属性：

属性样式有HTML的K=”V”;变为K:V;

颜色属性：color  

语法：在标签中加入属性style，其属性值为color

列如：<p style=”color:颜色;”>猜猜这是什么颜色</p>

对于其属性值主要分为两种，一种是单词表示法，一种是颜色值（十六进制，rgba）

 字号属性：font-size  属性值为以px为单位的数字值（浏览器一般都有默认的属性值）

语法：<p style="font-size:16px;">看我的文字大小</p>

字体属性：font-family

属性值：必须以双引号包裹，属性值可以有多个，用逗号隔开

语法：<p style="font-family:宋体;">看我的文字字体</p>

如果有中英文混合的，需要同时设置对应字体，一般先输入英文的常用字体

盒子三属性：

Width：宽度的意思

Height：高度的意思

这两个的属性值都是以px为单位的数值

Background-color：背景颜色，是属于background系列的一个属性，它的属性值与颜色属性相同

列如：<div style="width: 100px;height: 200px; background-color: antiquewhite;"></div>

CSS样式表

行内式样式表：

基本语法：

<div style="width: 100px;height: 200px; background-color: antiquewhite;"></div>

引入位置：在标签的style属性中，等号后面的引号内属性CSS样式，多个属性使用分号分隔。

内嵌式样式表

 书写位置：在head里面title下面

外链式样式表

新建一个CSS文件后，在HTML文件的head中使用link标签使其href属性的属性值为新建的CSS文件地址，之后在CSS文件中设计属性

四种表的优缺点：

样式表的名称	权重	优点	缺点
行内式样式表	最高	权重高，样式设计更精确	结构和样式没有分离 不能批量修改样式
内嵌式样式表	大于导入式，等于外链式	能够进行批量属性修改，将CSS样式和骨架进行分离	样式的骨架没有完全分离，多个HTML文件不能使用同一个CSS代码
外链式样式表	大于导入式，等于外链式	将CSS样式和骨架分离更彻底，一份CSS代码可以重复使用	些小的dome的时候，外链式就比较麻烦了
导入式样式表	最低	将CSS样式和骨架分离更彻底，一份CSS代码可以重复使用	导入式有样式问题，它设计到加载顺序（不常用）

CSS选择器

选择器分为两种：基础选择器、高级选择器

基础选择器：标签选择器、id选择器、类名选择器

高级选择器：后代选择器、交集选择器、并集选择器

• 标签选择器：通过标签名称去选择

书写方法：标签名

选择范围：HTML文档中所有的同名表签

用途：实现全选同名标签，可以设置公共样式

缺点：只能进行全选，不能进行单独布局样式

• Id选择器：通过标签上的id属性进行选择

书写方法：#id 属性值（自定义）

选择范围：只能选中一个表签

Id其实就是标签的身份证号，具有唯一性，规定一个页面中不允许有多个同名id

优点：id属性的权重高

缺点：只能实现单选

• 类名选择器：通过标签上的class属性进行选择

书写方法：.匹配对应的class属性值

选择范围：选择所有同名class属性标签

一个标签的class属性值可以是一个也可以是多个

Id和class属性的命名规范：第一个字符必须是字母，后面的字符可以是字母、数字、下划线

• 通配符选择器

选择范围：选择包含HTML标签在内的所有标签

通配符*后面添加的样式，每一个不同的标签都会加载一次

可以用来清除各个元素之间的边距

*{

padding: 0;

margin: 0;

}  

• 后代选择器：

通过标签之间的后代关系去决定选择某个范围内的元素

书写方法:使用空格连续连接多级选择器

• 交集选择器：

作用是满足所有选择器条件的匹配

将多个选择器连续书写，中间没有空格，不需要加任何符号

• 并集选择器：

其实就是在其他选择器的基础上用逗号来隔开不同标签，实现不同标签的相同属性

CSS继承性和层叠性

继承性：只需要给祖元素设置文字属性，后代元素就能加载这个属性

注意：CSS可以继承的属性都是关于文字的，比如color、font-size、font-family

层叠性：多个选择器可以同时设计一个标签，当多个选择器设计同一个标签属性时除了权重最高的那个，其他选择器的属性值会被层叠掉

注意：遇到了复杂的选择器，首先看是否同时选中一个元素，如果都是选择的是同一个元素，则数权重；如果层级不同，比如有的是父亲级别，有的爷爷级别，使用就近原则，谁离得近听谁的，如果所有的权重一样，选择位置也一样，后书写的覆盖先写的

CSS属性学习：

• line-height:行高
• line-weight:字体粗细，设计字体是否进行加粗显示（属性值：单词法、数值法；数值：100-700依整百为单位表示；单词表示：normal表示正常的，没有加粗的，bold表示加粗，和数值700是相等的）
• 字体样式line-style

作用：用来设置文字是否有倾斜

属性值:

Normal:正规的，没有倾斜的

Italic:倾斜的，指的是字体倾斜

Oblique：倾斜的，与字体无关

• Text-align：调节字体对齐方向

属性值：center中间对齐、right向右对齐、left向左对齐

• Text-decoration：文本修饰

属性值：none：没有修饰，overline上划线，underline下划线，line-through删除线

• 缩进：text-indent

作用：用来进行首行缩进

属性值：

px为单位，数字代表缩减多少像素

以百分号表示，参考标签父级width属性值的百分比为单位

以em为单位，数字是几，首行缩进几个中文字符

CSS盒模型：

又叫框模型、是CSS的重要布局属性，包含了五个属性width（宽度），height（高度），padding（内边距）、border（边框）、margin（外边距）

• width（宽度）height（高度）

作用：设置加载内容的区域

属性值：

px为单位的数字表达法，数值是多少表示宽度或者高度为多少像素

• Padding（内边距）

作用；设置宽和高到边框的距离

特点：不能加载内容，但是可以加载背景

属性值：px为单位的数值

Padding属性是一个综合属性，可以根据需求进行单一属性设置

• Border（边框）

按照border的属性类型划分三个属性值分别代表：

边框宽度border-width、线的颜色border-color、线形border-style（border-style中的线形：solid实线、dashed虚线、dotted点线、double双线、groove边框凹陷效果、rideg边框凸显效果、inset内容凹陷效果、outset：内容凸显效果)

• 外边距：

作用：设置盒子与其他盒子之间的间距

属性名：margin

属性值：完全类似于padding，包括单一写法和复杂写法

盒模型扩展内容：

清除ul,li的默认样式：list-style：none；

Body,div,p,h1~h9,ul,ol,li,dl,dt,dd,th,td,input设置margin:0;  padding：0；来清除默认样式