2018web前端开发视频教程 02-CSS-基础班

最新推荐文章于 2024-11-04 14:16:34 发布

原创最新推荐文章于 2024-11-04 14:16:34 发布 · 142 阅读

0 ·

CC 4.0 BY-SA版权

HTML CSS JavaScript 专栏收录该内容

6 篇文章

订阅专栏

3 选择器

3.1 基础选择器

标签选择器

标签{属性:值;}

在head标签中写。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
	/**在这里注释方法就变了*/
    div{
        font-size:50px;
        color:green;
		background-color:yellow;
    }
    </style>
</head>
<body>
    <div>威武</div>
    <div>霸气</div>
    <div>威武霸气</div>
    <p>小可爱</p>
</body>
</html>

颜色的显示方式：

1，直接写颜色的名称

2，十六进制显示颜色， #AABBCC 前2位代表红色，中间2位代表绿色，后两位为蓝色 0~255

3，rgb color:rgb(0,0,0) 黑色

类选择器（重点）

标签选择器一打一大片。而类选择器，指谁打谁。

写法：

.自定义类名{属性:值; 属性:值; }

特点：谁调用谁生效，在标签中 class="自定义类名"

一个标签可以调用多个类选择器。 class="自定义类名1 自定义类名2"

多个标签可以调用同一个选择器。

类选择器命名规则: 同java语言，可以使用汉字，但不建议使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
	/**在这里注释方法就变了*/
    .box{
        font-size:50px;
        color: #ff0000;
        width: 400px;
        height: 300px;
		background-color:#999;
    }
	.miss{
		text-indent:2em;
		text-align:left;	
	}
    </style>
</head>
<body>
    <!--特点是谁调用，谁生效-->
    <div class="box">威武</div>
    <div>霸气</div>
    <div>威武霸气</div>
	<!--调用多个类选择器的语法-->
    <p class="box miss">小可爱</p>
</body>
</html>

ID选择器

写法

#自定义名称{属性:值; 属性:值;}

调用

id="自定义名称"

特点：一个ID选择器在一个页面只能使用一次，如果使用两次，两次以上不符合W3C规范。

一个标签只能调用一个ID选择器。

通配符选择器

*{属性:值}

所有的标签，都会使用相同的样式。同时，会耗时，因为将样式应用于所有标签。

增加浏览器和服务器的负担。

3.2 符合选择器

两个或者两个以上的基础选择器通过不同的方式连接在一起。

交集选择器

标签+类（ID）选择器{属性:值；属性:值;}

div.box{

}

div#miss{ //也是OK的

}

特点：即要满足使用了某个标签，还要满足使用了类/ID选择器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
	/**在这里注释方法就变了*/
    .box{
        font-size:50px;
        width: 400px;
        height: 300px;
		background-color:#999;
    }
	.miss{
		text-indent:2em;
		text-align:left;	
	}
	div.box{
	    color: #ff0000;
	}
    </style>
</head>
<body>
    <!--特点是谁调用，谁生效-->
    <div class="box">威武</div>
    <div>霸气</div>
    <div>威武霸气</div>
	<!--调用多个类选择器的语法-->
    <p class="box miss">小可爱</p>
</body>
</html>