css复习——常用标签、选择器与优先级、块元素与内联元素 day6

0704

常用标签

<header>页眉，主要用于页面的头部的信息介绍，也可用于板块头部</header>
<nav><a>导航,里面必须用a标签</a></nav>
<footer>页脚  页面的底部 或者 版块底部</footer>
<section> 页面上的版块 用于划分页面上的不同区域,或者划分文章里不同的节<section>
<article>用来在页面中表示一套结构完整且独立的内容部分</article>
<aside>侧边栏、广告</aside>
<time>用来表现时间或日期</time>
<h1>h1标签在一个页面上最好只出现一次 并且，用在logo身上</h1>
<h2>这个是h2标签</h2>
<h3>这个是h3标签</h3>
<h4>这个是h4标签</h4>
<h5>这个是h5标签</h5>
<h6>这个是h6标签</h6>
<div>这个是div标签</div>
<p>段落</p>
<strong>强调，加粗</strong>
<b>强调，加粗</b>
<em>强调，斜体</em>
<ul>
    <li>无序列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ul>
<ol>
    <li>有序列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ol>
<dl>
    <dt>列表头</dt>
    <dd>列表项</dd>
    <dd>列表项</dd>
    <dd>列表项</dd>
    <dd>列表项</dd>
</dl>
<mark>标记</mark>

使用标签记得清除默认样式
1,但凡是浏览默认的样式，都不要使用。
2,用到什么标签，就清除什么标签

有默认margin的元素
body,h1~h6,p,ul,ol,dl,dd
有默认padding的元素
ul,ol

ul,ol身上都有默认的list-style
在清除的时候，可以直接清除li身上的list-style
但是要记住，默认的list-style是在谁身上产生的

选择器与优先级

div { color：Red;} 标签名选择器

.divClass {color:Red;} 类选择器

#myDiv {color:Red;} ID选择器

.name，span，em 群组选择器

.name span em 包含选择器

选择器的优先级
　　1.最高优先级是 (直接在标签中的设置样式，假设级别为1000)

<div style="color:Red;"></div>

　　2.次优先级是（ID选择器 ,假设级别为100） #myDiv{color:Red;}
　　3.其次优先级是（类选择器，假设级别为10） .divClass{color:Red;}
　　4.最后优先级是 （标签选择器，假设级别是 1） div{color:Red;}
　　5.那么包含选择器的优先级就可以计算了啊
　　比如 .divClass span { color:Red;} 优先级别就是：10+1=11

块元素与内联元素

块元素
块元素的特征
1,默认独占一行
2,支持所有css样式
3,没有宽度的时候，默认撑满父级的宽度
内联元素
内嵌(内联、行内)的特征
1、同排可以继续跟同类的标签(一行可以显示多个同类型的标签)
2、内容撑开宽度(所有的标签都是内容撑开高度)
3、不支持宽高
4、不支持上下的margin
5、代码换行被解析(解析成空格 —— 一个空格的大小)
内联块
内联块特性：
1、让块在一行显示；
2、让行内元素支持宽高；
3、没有宽度的时候内容撑开宽度
常见标签display属性
block：
◎ address - 地址
◎ blockquote - 块引用
◎ center - 居中对齐块
◎ dir - 目录列表
◎ div - 常用块级容器，也是css layout的主要标签
◎ dl - 定义列表
◎ fieldset - form控制组
◎ form - 交互表单
◎ h1 - 大标题
◎ h2 - 副标题
◎ h3 - 3级标题
◎ h4 - 4级标题
◎ h5 - 5级标题
◎ h6 - 6级标题
◎ hr - 水平分隔线
◎ isindex - input prompt
◎ menu - 菜单列表
◎ noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容）
◎ noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
◎ ol - 排序表单
◎ p - 段落
◎ pre - 格式化文本
◎ table - 表格
◎ ul - 非排序列表（无序列表）

inline：
◎ a - 锚点
◎ abbr - 缩写
◎ acronym - 首字
◎ b - 粗体(不推荐)
◎ bdo - bidi override
◎ big - 大字体
◎ br - 换行
◎ cite - 引用
◎ code - 计算机代码(在引用源码的时候需要)
◎ dfn - 定义字段
◎ em - 强调
◎ font - 字体设定(不推荐)
◎ i - 斜体
◎ img - 图片
◎ input - 输入框
◎ kbd - 定义键盘文本
◎ label - 表格标签
◎ q - 短引用
◎ s - 中划线(不推荐)
◎ samp - 定义范例计算机代码
◎ select - 项目选择
◎ small - 小字体文本
◎ span - 常用内联容器，定义文本内区块
◎strike - 中划线
◎ strong - 粗体强调
◎ sub - 下标
◎ sup - 上标
◎ textarea - 多行文本输入框
◎ tt - 电传文本
◎ u - 下划线
◎ var - 定义变量

元素类型转换

span{
      width:500px;
      height:300px;
      display: block;
      border:1px solid #0e3757;
     }

块元素 block
内联元素 inline
内联-块 inline-block