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; }
演示: