选择器二
ID选择器
- 针对某一个特定的标签来使用，只能使用一次，CSS中的ID选择器以#来定义
<head>
<style>
#text{
color:red;
font-size:30px;
}
</style>
</head>
<body>
<p id="text">Hello</p>
</body>
- 特别强调
- ID是唯一的，每个名称只能一一对应使用一次，不同于类选择器可以一个名称使用多次
- ID不能以数字开头
合并选择器
- 语法：选择器1,选择器2,…{}
- 作用：提供共同的样式，减少重复代码
<head>
<style>
p,h3{
color:red;
font-size:30px;
}
</style>
</head>
<body>
<p>我是p标签</p>
<h3>我是标题标签</h3>
</body>
或者
<head>
<style>
.text,.title{
color:red;
font-size:30px;
}
</style>
</head>
<body>
<p class="text">我是p标签</p>
<h3 class="title">我是标题标签</h3>
</body>
选择器的优先级
- 优先级从高到低：行内样式1000>ID选择器100>类选择器10>元素选择器1>全局选择器 (范围越广，权重越低)
<head>
<style>
.text {
color: red;
font-size: 30px;
}
#desc {
color: blue;
font-size: 40px;
}
</style>
</head>
<body>
<h3>全局选择器：*</h3>
<h3>元素选择器:标签名称</h3>
<h3>类选择器:class属性名(.)</h3>
<h3>ID选择器:ID属性名(#)</h3>
<p style="font-size:15px;color:green;" class="text" id="desc">我是p标签内容</p>
</body>
以上这个代码’行内选择器’(即style=“font-size:15px;color:green;”)会生效，因为它的优先级最高
<head>
<style>
.t1{
color:red;
}
.t2{
color:blue;
}
</style>
</head>
<body>
<p class="t1 t2">我是测试文本</p>
</body>
以上会按照顺序从t1到t2依次生效，但是t2会覆盖掉t1，最终显示t2的代码效果
字体属性
- CSS字体定义字体，颜色、大小、加粗，文字样式
- color：规定文本的颜色
div{color:red;} div{color:#ff0000;} div{color:rgb(255,0,0);} div{color:rgba(255,0,0,.5):}- font-weight:设置文本的粗细
- bold：定义粗体字符
- bolder：定义更粗的字符
- lighter：定义更细的字符
- 100~900：定义由粗到细400等同默认
H1{font-weight:normal;} div{font-weight:bold;} p{font-weight:900;}- font-style：指定文本的字体样式
- normal：默认值
- italic：定义斜体字
- font-family：指定一个元素的字体
1.每个值用逗号分开；2.如果字体名称包含空格，它必须加上引号
font-family:"Microsoft YaHei","Simsun","SimHei";
背景属性
- CSS背景属性由以下几个
- background-color：设置背景颜色
- background-image：设置背景图片
- background-position：设置背景图片显示位置
- background-repeat：设置背景图片如何填充
- background-size：设置背景图片大小属性
background-color属性
- 该属性设置背景颜色
<head>
<style>
.box1{
width:400px;
height:400px;
background-color: red;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
background-image属性
- 设置元素的背景图像
- 元素的背景是元素的总大小，包括填充和边界（不包括外边距）。默认情况下background-image属性放置在元素的左上角，如果图像不够大的话就会在垂直和水平方向平铺图像，如果图像大小超过元素大小从图像的左上角显示元素大小的那部分
<head>
<style>
.box1{
width:400px;
height:400px;
background-color: red;
}
.box2{
width:400px;
height:400px;
background-image: url("1.jpg");
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
background-repeat属性
- 设置如何平铺背景图像
- repeat：默认值
- repeat-x：只向水平方向平铺
- reoeat-y：只向垂直方向平铺
- no-repeat：不平铺
<head>
<style>
.box1{
width:400px;
height:400px;
background-color: red;
}
.box2{
width:1200px;
height:1200px;
background-image: url("1.jpg");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
background-size属性
- 改属性设置背景图像的大小
- length：设置背景图片的宽度和高度，第一个值宽度，第二个值高度，如果只是设置一个，第二个值auto(也可以使用百分号)
- percentage：计算相对位置区域的百分比，第一个值宽度，第二个值高度，如果只是设置一个，第二个值auto(也可以使用百分号)
- cover：保持图片纵横比并将图片缩放成完全覆盖背景区域的最小大小
- contain：保持图片纵横比并将图片缩放成适合背景定位区域的最大大小
<head>
<style>
.box2{
width:1200px;
height:1200px;
background-image: url("1.jpg");
background-repeat: no-repeat;
background-size:100% 100%;
}
</style>
</head>
<body>
<div class="box2"></div>
</body>
background-position属性
- 该属性设置背景图像是起始位置，其默认值是0% 0%
- left top：左上角
- left center：左 中
- left bottom：左 下
- right top：右上角
- right center：右 中
- right bottom：右 下
- center top：中 下
- center center：中 中
- center bottom：中 下
- x% y%：第一个值是水平位置，第二个值是垂直位置，左上角是0% 0%，右下角是100% 100%，如果只指定了一个值，其他默认值是50%，默认是0% 0%
- xpx ypx：单位是像素
<head>
<style>
.box2{
width:1200px;
height:1200px;
background-image: url("1.jpg");
background-repeat: no-repeat;
background-size:no-repeat;
background-position: center;
}
</style>
</head>
<body>
<div class="box2"></div>
</body>
