裁剪标签：
HTML：
<body> <section> <div></div> </section> </body>
CSS:
section{
width: 416px;
height: 105px;
background-color: #444;
border-radius: 30px;
margin: 100px auto;
position: relative;
/*overflow: hidden;
可以切掉超出边界的子元素 方法简单 适用广泛
但对于绝对定位的元素 如果移到了父元素的外面
方法就没用了 这时需要使用clip*/
}
div{
width: 180px;
height: 180px;
background-color: yellow;
border-radius: 50%;
position: absolute;
top: -30px;
left: 40px;
opacity: 0.7;
clip: rect(30px,180px,135px,0);
/*裁剪：第一个值 上方切掉的范围
第二个值 从左到右保留的范围
第三个值 从上到下保留的位置
第四个值 左侧切掉的范围*/
}
样式继承:
HTML:
<body> <main> <article> <header> <h1>大标题</h1> <h3>副标题</h3> <address>作者，联系方式和继承</address> </header> <section> <h2>小标题1</h2> <p>正文段落1</p> <p>正文段落2</p> <p>正文段落3</p> </section> <section> <h2>小标题2</h2> <p>正文段落1</p> <p>正文段落2</p> <p>正文段落3</p> </section><section> <h2>小标题3</h2> <p>正文段落1</p> <p>正文段落2</p> <p>正文段落3</p> </section><section> <h2>小标题4</h2> <p>正文段落1</p> <p>正文段落2</p> <p>正文段落3</p> </section><section> <h2>小标题5</h2> <p>正文段落1</p> <p>正文段落2</p> <p>正文段落3</p> </section> </article> </main> </body>
CSS:
body{
color: red;
/*将color应该body上
会使body内部所有的标签都加上颜色 这就是继承*/
background-color: blanchedalmond;
font-size: 25px;
font-family: 楷体;
font-style: italic;
text-decoration: underline;
line-height: 30px;
border: 1px solid blue;
/*能够继承的样式多是与文字相关的样式
盒模型相关的样式和其它更多样式是不继承的*/
}
相对字号em和rem:
HTML:
<body> <section> <h2>小标题</h2> <p>正文段落1</p> <p>正文段落2</p> <p style="font-size:1em;">正文段落3</p> <p style="font-size:1.2em;">正文段落4</p> <p style="font-size:1.5em;">正文段落5</p> <p style="font-size:2em;">正文段落6 <span style="font-size:0.5em;">内部文字 <span style="font-size:0.5em;">内部的内部 </span> </span> </p> </section> <section> <h2>小标题</h2> <p>正文段落1</p> <p>正文段落2</p> <p>正文段落3</p> <p style="font-size:1.2rem;">正文段落4</p> <p style="font-size:1.5rem;">正文段落5</p> <p style="font-size:2rem;">正文段落6 <span style="font-size:0.5rem;">内部文字 <span style="font-size:0.5rem;">内部的内部 </span> </span> </p> </section> </body>
CSS:
html{
font-size: 20px;
}
body{
/*font-size: 24px;*/
/*em以父标签的字号作为标准进行计算
如果父元素也是em字号则可以逐级相乘
页面默认字号是16px
在第一个section中最深的span标签的字号为
16*2*0.5*0.5 = 8 */
}
/*rem以文档根标签（html）的字号作为标准进行计算
rem字号不受上级标签影响 因此计算起来更方便*/
超链接选择器:
HTML:
<body> <a href="https://www.baidu.con" target="_blank">百度一下</a> <a href="https://www.so.com11" target="_blank">360搜索</a> <a href="https://www.taobao.com" target="_blank">淘宝网</a> </body>
CSS:
a{
font-size: 3rem;
}
a:link{
/*没有成功打开的超链接样式*/
color: red;
}
a:visited{
/*成功打开的超链接样式 这个样式放置位置很重要
放在后面会影响 hover 和 active 的样式*/
color: yellow;
}
a:hover{
/*鼠标指针放上去的样式*/
color: green;
}
a:active{
/*鼠标指针按下去的样式*/
color: rebeccapurple;
}
a:focus{
/*获取焦点时的样式 此样式会覆盖 active */
color: lawngreen;
}
演示：
