文章目录
四、CSS样式基础
4.1 CSS id \ class 选择器
id选择器
- id就像一个元素的身份证地址，可以在网页里，唯一代表某个元素，我们也可以通过这个id快速找到它对应的元素对象
class 类选择器
当你想给多个元素批量设置同样的一个样式的话，就可以使用类选择器
输出
4.2 直接通过元素名设置样式
若你想给页面所有的<p> 或<input>标签加上同样的样式，可以直接通过元素名批量设置
注意：id & class 选择器的样式优先级大于 元素名选择器
4.3 组合选择器
为了测试效果，先准备好3层div
<div id="layer1">
<p>第1层</p>
<div id="layer2">
<p>layer 2</p>
<h2>layer 2 h2</h2>
<div id="layer3">
<p>第3层</p>
<h3>layer 3 h3</h3>
</div>
</div>
</div>
<p>我不在任何的div里</p>
设置好样式，加上边框
<head>
<style type="text/css">
#layer1 {
height: 500px;
padding: 30px;/*边框之间的内边距*/
border: 1px dashed blue;
}
#layer2 {
height: 400px;
padding: 30px;
border: 1px dashed red;
}
#layer3 {
height: 300px;
padding: 30px;
border: 1px dashed black;
}
</style>
</head>
效果
4.3.1 后代选择器
给指定元素的所有指定后代，设置样式
比如 ，我给上图第一层div下面所有的<p>标签设置颜色
#layer1 p {
color: red;
background: yellow;
}
效果
4.3.2 子元素选择器
又可称为儿子选择器，是指可给指定元素的下一层儿子元素设置格式 ，注意，只是儿子，孙子不管
给layer1的div的儿子设置样式
#layer1 > p {
color: red;
background: yellow;
}
4.3.3 相邻兄弟选择器
可选择紧接在另一元素后的元素，且二者有相同父元素。
#layer2 > p+h2 {
color: red;
background: yellow;
}
效果
4.3.4 多个元素组合
可同时给不相干的多个元素设置同一个样式
比如 把整 个页面所有的
和
标签同时设置样式
p,h3 {
color: red;
background: yellow;
}
效果
4.4 盒子模型
-
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
-
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
-
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
-
下面的图片说明了盒子模型(Box Model)：
不同部分的说明：
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
为了正确设置元素在所有浏览器中的宽度和高度，你需要知道的盒模型是如何工作的。
元素的宽度和高度
重要: 当指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加内边距，边框和边距。
下面的例子中的元素的总宽度为300px：
div {
width: 300px;
border: 25px dashed yellow;
padding: 25px;
margin: 25px;
}
<body>
<h2>盒子模型演示</h2>
<p>CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。</p>
<div>这里是盒子内的实际内容。有 25px 内间距，25px 外间距、5px 黄色边框。</div>
</body>
效果
4.5 常用CSS属性
css有很多属性，我们先只讲几个基本的
更多的看这里：https://www.runoob.com/cssref/css-reference.html#box
4.5.1 background背景属性
| 属性 | 描述 | CSS |
|---|---|---|
| background | 复合属性。设置对象的背景特性。 | 1 |
| background-attachment | 设置或检索背景图像是随对象内容滚动还是固定的。必须先指定background-image属性。 | 1 |
| background-color | 设置或检索对象的背景颜色。 | 1 |
| background-image | 设置或检索对象的背景图像。 | 1 |
| background-position | 设置或检索对象的背景图像位置。必须先指定background-image属性。 | 1 |
| background-repeat | 设置或检索对象的背景图像如何铺排填充。必须先指定background-image属性。 | 1 |
| background-clip | 指定对象的背景图像向外裁剪的区域。 | 3 |
| background-origin | S设置或检索对象的背景图像计算background-position时的参考原点(位置)。 | 3 |
| background-size | 检索或设置对象的背景图像的尺寸大小。 | 3 |
4.5.2 边框Border 和轮廓Outline属性
| 属性 | 描述 | CSS |
|---|---|---|
| border | 复合属性。设置对象边框的特性。 | 1 |
| border-bottom | 复合属性。设置对象底部边框的特性。 | 1 |
| border-bottom-color | 设置或检索对象的底部边框颜色。 | 1 |
| border-bottom-style | 设置或检索对象的底部边框样式。 | 1 |
| border-bottom-width | 设置或检索对象的底部边框宽度。 | 1 |
| border-color | 置或检索对象的边框颜色。 | 1 |
| border-left | 复合属性。设置对象左边边框的特性。 | 1 |
| border-left-color | 设置或检索对象的左边边框颜色。 | 1 |
| border-left-style | 设置或检索对象的左边边框样式。 | 1 |
| border-left-width | 设置或检索对象的左边边框宽度。 | 1 |
| border-right | 复合属性。设置对象右边边框的特性。 | 1 |
| border-right-color | 设置或检索对象的右边边框颜色。 | 1 |
| border-right-style | 设置或检索对象的右边边框样式。 | 1 |
| border-right-width | 设置或检索对象的右边边框宽度。 | 1 |
| border-style | 设置或检索对象的边框样式。 | 1 |
| border-top | 复合属性。设置对象顶部边框的特性。 | 1 |
| border-top-color | 设置或检索对象的顶部边框颜色 | 1 |
| border-top-style | 设置或检索对象的顶部边框样式。 | 1 |
| border-top-width | 设置或检索对象的顶部边框宽度。 | 1 |
| border-width | 设置或检索对象的边框宽度。 | 1 |
| outline | 复合属性。设置或检索对象外的线条轮廓。 | 2 |
| outline-color | 设置或检索对象外的线条轮廓的颜色。 | 2 |
| outline-style | 设置或检索对象外的线条轮廓的样式。 | 2 |
| outline-width | 设置或检索对象外的线条轮廓的宽度。 | 2 |
| border-bottom-left-radius | 设置或检索对象的左下角圆角边框。 | 3 |
| border-bottom-right-radius | 设置或检索对象的右下角圆角边框。 | 3 |
| border-image | 设置或检索对象的边框样式使用图像来填充。 | 3 |
| border-image-outset | 规定边框图像超过边框的量。 | 3 |
| border-image-repeat | 规定图像边框是否应该被重复（repeated）、拉伸（stretched） | 3 |
| border-image-slice | 规定图像边框的向内偏移。 | 3 |
| border-image-source | 规定要使用的图像，代替 border-style 属性中设置的边框样式。 | 3 |
| border-image-width | 规定图像边框的宽度。 | 3 |
| border-radius | 设置或检索对象使用圆角边框。 | 3 |
| border-top-left-radius | 定义左上角边框的形状。 | 3 |
| border-top-right-radius | 定义右上角边框的形状。 | 3 |
| box-decoration-break | 规定行内元素被折行 | 3 |
| box-shadow | 向方框添加一个或多个阴影。 | 3 |
4.5.3 内边距Padding属性
| 属性 | 说明 | CSS |
|---|---|---|
| padding | 在一个声明中设置所有填充属性 | 1 |
| padding-bottom | 设置元素的底填充 | 1 |
| padding-left | 设置元素的左填充 | 1 |
| padding-right | 设置元素的右填充 | 1 |
| padding-top | 设置元素的顶部填充 | 1 |
4.5.4 外边距(Margin) 属性
| 属性 | 说明 | CSS |
|---|---|---|
| margin | 在一个声明中设置所有外边距属性 | 1 |
| margin-bottom | 设置元素的下外边距 | 1 |
| margin-left | 设置元素的左外边距 | 1 |
| margin-right | 设置元素的右外边距 | 1 |
| margin-top | 设置元素的上外边距 | 1 |
4.5.5 position 定位属性
属性值
| 值 | 描述 |
|---|---|
| absolute | 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 |
| fixed | 生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 |
| relative | 生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。 |
| static | 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
| sticky | 粘性定位，该定位基于用户滚动的位置。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。 |
| inherit | 规定应该从父元素继承 position 属性的值。 |
4.5.6 字体（Font） 属性
| 属性 | 说明 | CSS |
|---|---|---|
| font | 在一个声明中设置所有字体属性 | 1 |
| font-family | 规定文本的字体系列 | 1 |
| font-size | 规定文本的字体尺寸 | 1 |
| font-style | 规定文本的字体样式 | 1 |
| font-variant | 规定文本的字体样式 | 1 |
| font-weight | 规定字体的粗细 | 1 |
| @font-face | 一个规则，允许网站下载并使用其他超过"Web- safe"字体的字体 | 3 |
| font-size-adjust | 为元素规定 aspect 值 | 3 |
| font-stretch | 收缩或拉伸当前的字体系列 | 3 |
4.5.7 文本（Text） 属性
| 属性 | 说明 | CSS |
|---|---|---|
| color | 设置文本的颜色 | 1 |
| direction | 规定文本的方向 / 书写方向 | 2 |
| letter-spacing | 设置字符间距 | 1 |
| line-height | 设置行高 | 1 |
| text-align | 规定文本的水平对齐方式 | 1 |
| text-decoration | 规定添加到文本的装饰效果 | 1 |
| text-indent | 规定文本块首行的缩进 | 1 |
| text-transform | 控制文本的大小写 | 1 |
| vertical-align | 设置元素的垂直对齐方式 | 1 |
| white-space | 设置怎样给一元素控件留白 | 1 |
| word-spacing | 设置单词间距 | 1 |
| text-emphasis | 向元素的文本应用重点标记以及重点标记的前景色。 | 1 |
| hanging-punctuation | 指定一个标点符号是否可能超出行框 | 3 |
| punctuation-trim | 指定一个标点符号是否要去掉 | 3 |
| text-align-last | 当 text-align 设置为 justify 时，最后一行的对齐方式。 | 3 |
| text-justify | 当 text-align 设置为 justify 时指定分散对齐的方式。 | 3 |
| text-outline | 设置文字的轮廓。 | 3 |
| text-overflow | 指定当文本溢出包含的元素，应该发生什么 | 3 |
| text-shadow | 为文本添加阴影 | 3 |
| text-wrap | 指定文本换行规则 | 3 |
| word-break | 指定非CJK文字的断行规则 | 3 |
| word-wrap | 设置浏览器是否对过长的单词进行换行。 | 3 |
890
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
