day04-css(细分元素,分类,特性)

一，链接伪类选择器
1. :link      /* 未访问的链接 */
2. :visited /* 已访问的链接 */
3. :hover   /* 鼠标移动到链接上 */
4. :active   /* 选定的链接 */
例 <style>
    a:link{
      color:red
            }
      </style>（未点击过得链接显示为红色）
注意：写的时候，他们的顺序不要颠倒，按照 l v h a 的顺序。
二，块状，行，行内块
块级元素(block-level)
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。
特点：
（1）总是从新行开始
（2）高度，行高、外边距以及内边距都可以控制。
（3）宽度默认是容器的100%
（4）可以容纳内联元素和其他块元素。
行内元素(inline-level)
行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。
特点：
（1）和相邻行内元素在一行上。
（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
（3）默认宽度就是它本身内容的宽度。
（4）行内元素只能容纳文本或则其他行内元素。（a特殊a里面可以放块级元素）
行内块元素（inline-block）
在行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。
特点：
（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。
（2）默认宽度就是它本身内容的宽度。
（3）高度，行高、外边距以及内边距都可以控制。
标签显示模式转换 display
块转行内：display:inline;
行内转块：display:block;
块、行内元素转换为行内块： display: inline-block;
三,背景属性及属性值
background: 不分顺序,可加颜色
background-image:url("./image/01.gif")
background-size: 10px 10px;宽 高;设置图片大下
background-position: 10px 10px;
background-color:red;
background-repeat:
background:rgba:(0 0 0 0.3);颜色,最后一个可以设置透明度
四,边框属性及属性值
border:10px red splid;
属性值:red bule #666666
dotted点线 dashed 虚线 splid 实线 transparent 透明边框
border-radius:10px 10px 10px 10px;顺时针赋值,达到图片的50%就成圆边了
border-top:10px red splid;单独设置上边线
border-buttom:下边线
border-left:左边线
border-right:右边线
border-collapse:collapse ;在表格中使边框不重合加粗
color:rgb(0,0,0,0.2)
2.CSS三大特性
CSS三大特性
层叠 继承 优先级 是我们学习CSS 必须掌握的三个特性。
CSS层叠性
记住：就近原则。
css继承性
子类元素和后代元素会继承部分属性如:
css优先性
*{}全局设置 权重为零
div{}标签选择器 权重为1
.class{}类别选择器 权重为10
a:link{}伪类选择器 权重为10
#id{}id选择器 权重为100