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

 

posted @ 2020-08-04 15:14  帅气如我66  阅读(96)  评论(0编辑  收藏  举报