第二天_常见标签和CSS基础

常见标签

一、块标签

1）内容

div 无语义，一个盒子

h1-h6      h1-h3有检索功能

p

ul

ol

li

article

section

aside

nav

header

footer

2）特点：独占一行，默认宽度占满父级，高度为0，子级内容撑开高度

二、行标签

1）内容

span

a   herf：链接地址  target：打开方式   _self当前页面打开  _blank在新的页面打开

i 斜体

b 加粗

sub下角标

sup上角标

em 斜体

strong 加粗

2）特点

• 同排序跟显示，遇到父级边界换行
• 不支持宽高，内容撑开高度
• 不支持上下外边距
• 不正常显示上下内边距
• 换行被解析

三、行块标签

1）内容

1. img

src：资源路径

title：鼠标悬停时的提示文本

alt：图片不能正常显示的提示文本

特点：只给宽度或高度。会等比例变化

2.特点：

• 同排序跟显示，遇到父级边界换行
• 没有宽高的时候内容撑开高度
• 换行被解析

2）display：inline 块~行

display：block 行~块

display：none 隐藏元素

display：inline-block 行块标签

CSS基础

一、css的引入方式

• 外部
• 内部
• 内联

二、css的常见样式

1）背景

背景颜色background-color

背景图片background-image     url (.../...);

2）文本

字体颜色color

字体大小font-size 默认16px

字体粗细font-weight 默认400（normal）范围100-900

字体样式font-family

对齐方式text-align 水平

行高 line-hight 行高默认是字体大小的1.2倍 字体是相对于行高来居中的 不给高度的时候，行高撑开高度

首行缩进text-indent 32px为首行缩进两个字符

字体间距letter-spacing+px

文本装饰线text-decoration line-through删除线 under-line下划线

文本大小写字母text-transform

空白符处理white-space：pre wrap换行

3）常用选择器

通配符选择器*

id选择器

类选择器

标签名

后代选择器 body p {}

群组选择器h1，h2，p {}

子代选择器 body>p 指的是body下的第一个p标签

4）选择器优先级

1.id选择器（#myid）

2.类选择器（.myclassname）

3.标签选择器（div，h1，p）

4.子选择器（ul<li）

5.后代选择器（li a）

6.伪类选择器（a:hover，li:nth-child）

注意：

！important的优先级是最高的，出现冲突时需比较“四位数”

优先级相同时，则采用就近原则，选择最后出现的样式

继承得来的属性，其优先级最低