文章目录
四、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 |