06_HTML&CSS_正式课程

一、CSS选择器02

****

1、id选择器

• 通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应页面上的一个元素，不能复用。
  • id名一般给程序使用，所以不推荐使用id作为选择器。

# box{color:red}

<p id="box">这是一个段落标签</p>

2、组选择器

• 多个选择器，如果有同样的样式设置，可以使用组选择器。

.box1, .box2, .box3{width:1000px;height:100px}
.box1{backgroud:red}
.box2{background:pink}
.box3{background:gold}

<div class="box1">...</div>
<div class="box2">...</div>
<div class="box3">...</div>

3、伪类选择器

• 常用的伪装选择器有hover，表示鼠标悬浮在元素上时的状态。

.box1{width:100px;height:100px;background:gold}
.box1:hover{width:300px;}

二、CSS显示特性

• display属性是用来设置元素的类型及隐藏的，常用的属性有：
  • none 元素隐藏且不占位置—–做特效使用！
  • inline 元素以行内元素显示
  • block 元素以块元素显示

三、CSS元素溢出

• 当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。

overflow的设置项：

• **visible **
  • 默认值，内容不会被修剪，会呈现在元素框之外。
• **hidden **
  • 内容会被修剪，并且其余内容是不可见的。
• **scroll **
  • 内容会被修剪，但是浏览器会显示滚动条以便查看其余内容。
• **auto **
  • 如果内容被修剪，则浏览器会显示滚动条以便查看其余内容。

赏

谢谢你请我吃糖果

支付宝

微信

• 本文作者： 梁俊可
• 本文链接： http://ljk3d.com/2021/10/19/webNote/htmlAndCss/05_CSS基础/
• 版权声明： 梁俊可工作室