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