Please enable Javascript to view the contents

Learning Html

 ·  ☕ 4 分钟

何为HTML

常见的HTML标签

  • 标题:h1, h2, h3, h4, h5 …
  • 段落:p
  • 换行:br
  • 容器:div, span(用来容纳其他标签)
  • 表格:table, tr, td
  • 列表:ul, ol, li
  • 图片:img
  • 表单:input
  • 链接:a

HTML标签类型

  • 行内标签:多个行内标签能同时显示在同一行;
  • 块级标签:指独占一行的标签

何为CSS

CSS即:(Cascading Style Sheets)层叠样式表,它用来控制HTML标签的样式,在美化网页中起关键作用。
画网页通常指的就是用CSS来绘制网页的样式。

CSS的书写格式

CSS以键值对的形式进行书写,冒号的左边是属性名,冒号右边的是属性值,如:
font-size: 1rem
line-height: .5rem
background-color: azure

CSS的引入方式

内联样式

作为内联样式(行内样式)引入,直接在标签的style属性中书写

1
<span style="color:indigo;background-color:lightgrey;">内联样式</span>
内部样式

在同一.html文件中引入的样式称为内部样式,如:

1
2
3
4
5
6
7
<span class="tip"><h3>内部样式</h3></span>
<style type="text/css">
.tip {
    color: grey;
    background-color:green;
}
</style>
外部样式

独立于.html之外,在单独的一个或多个.css文件中书写,然后在.html文件中以标签引用。

CSS选择器

选择器的作用

选择对应的标签,为之添加独立的样式

选择器的分类

标签选择器

根据标签名找到标签;

1
p {font-size: 3rem;}
类选择器

根据类名(class)找到特定的标签,一个标签可以有多个类,并且一种类可以多次重复出现在同一个.html页面中;

1
2
3
4
.content-wrap {
    font-size: 1rem;
    color: darkgrey;
}
id选择器

根据标签的id名选择标签,每个标签只能有一个id,且在同一个页面中,每个id只能出现一次。

1
2
3
4
#paras {
    font-size: 1rem;
    color: pink;
}
群组选择器

使用逗号对选择器进行分隔,当需要使用某一相同的样式时,可以减少重复定义。

1
h3, div, .content-wrap, #paras {color: black;}
组合选择器

多个选择器的组合,多个选择器粘在一起,中间不留空格。

1
div.paras{font-size: 1rem;}
后代选择器

不管作为后代的标签嵌套层次多深,后代选择器都可以选中并渲染它

1
div title {font-size: 6rem;}
子元素选择器

与后代选择器相比,子元素选择器只能选择某元素的一个直接子元素,如:h1 > strong {color: red;}。这个规则只会把第一个h1下面的两个 strong 元素渲染为红色,但是第二个 h1 中的 strong 不受影响。

1
2
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
相邻兄弟选择器

相邻兄弟选择器可选择紧接在另一元素后的元素,且这二者有相同的父元素。
h1 + p {margin-bottom: 1rem;}

属性选择器

属性选择器可以为带有指定属性的html元素设置样式,而不仅限于 class 和 id 属性。

1
2
3
div[name]{font-size: 1rem;}
div[name][age]{font-size: .5rem;}
div[name="jacklanda"]{font-size: .3rem;}

选择器的优先级

选择器的权值
选择器类型 权值
!important 1000
id 100
class 10
伪类 10
属性 10
标签 1
伪元素 1
通配符(*) 0

important > 内联 > id > 类 > 标签|伪类|属性选择器 > 伪元素 > 通配符 > 继承

优先级原则

选择器的权值加到一起,全职大的优先;如果权值相同,那么后定义的选择器优先。

CSS伪类

伪类名 描述
:active 被激活的元素呈现的样式
:focus 拥有键盘输入焦点的元素呈现的样式
:hover 当鼠标悬浮在元素上方时,元素呈现的样式
:link 未被访问的链接的样式
:visited 已被访问的链接的样式
:first-child 该元素的第一个子元素的样式
:lang 带有特定lang属性的元素的样式
:first-letter 文本中第一个字母的样式
:first-line 文本中首行的特殊样式
:before 在元素之前添加内容
:after 在元素之后添加内容

盒子模型

属性 说明
内容(content) 盒子里装的东西,网页中通常是指文字和图片
内边距(padding) 担心盒子里装的东西损坏,需要添加的泡沫或者其它抗震的材料
边框(border) 盒子表面
外边距(margin) 多个盒子摆放的时候不能全部堆在一起,盒子之间留有一定的空隙。

内容属性(content)

属性 描述
height 设置元素高度
width 设置元素宽度
max-height 设置元素的最大高度
min-height 设置元素的最小高度
max-width 设置元素的最大宽度
min-width 设置元素的最小宽度

内边距属性(padding)

属性 描述
padding 同时设置所有内边距属性
padding-top 设置元素的上内边距
padding-bottom 设置元素的下内边距
padding-left 设置元素的左内边距
padding-right 设置元素的右内边距

外边距属性(margin)

属性 描述
margin 同时设置所有外边距属性
margin-top 设置元素的上外边距
margin-bottom 设置元素的下外边距
margin-left 设置元素的左外边距
margin-right 设置元素的右外边距

边框属性(border)

属性 描述
border-style 边框样式
border-width 边框宽度
border-color 边框颜色
border-radius 边框圆角