css选择器----基本选择器

最新推荐文章于 2020-11-11 21:17:32 发布

一只小菜鸟的学习笔记

最新推荐文章于 2020-11-11 21:17:32 发布

阅读量279

点赞数

分类专栏： HTML 文章标签： HTML

本文链接：https://blog.csdn.net/weixin_45087771/article/details/90370070

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

选择器分类：基本选择器，组合选择器，伪类选择器，伪对象选择器和属性选择器。

1、基本选择器

（1）标签选择器：

格式：标签名称{样式}

	例：p {
    font-size: 12px;                   		/* 字体大小为12像素 */
    color: red;                         	/* 字体颜色为红色 */
}

（2）类选择器：

格式：.类名{样式}

例:<html>
<head>
<meta charset="utf-8">
<title>CSS基础</title>
<style type="text/css">
p {
    font-size: 12px;                   		/* 字体大小为12像素 */
    color: red;                         	/* 字体颜色为红色 */
}
.font18px { font-size: 18px; }
</style>
</head>
<body>
<p>问君能有几多愁，恰似一江春水向东流。</p>
<p class="font18px">剪不断，理还乱，是离愁。别是一般滋味在心头。</p>
<p>独自莫凭栏，无限江山，别时容易见时难。流水落花春去也，天上人间。</p>
</body>
</html>

在这里插入图片描述

（3）ID选择器

格式：#id名{样式}

例：<html>
<head>
<meta charset="utf-8">
<title>CSS基础</title>
<style type="text/css">
#box {/* ID样式  */
    background:url(images/2.jpg) center bottom; /* 定义背景图像并居中、底部对齐 */
    height:200px;                          	/* 固定盒子的高度 */
    width:400px;                          	/* 固定盒子的宽度 */
    border:solid 2px red;                    	/* 边框样式 */
    padding:100px;                         	/* 增加内边距 */
}
</style>
</head>
<body>
<div id="box">问君能有几多愁，恰似一江春水向东流。</div>
</body>
</html>

在这里插入图片描述

（4）通配选择器

格式：*{样式}

例：<html>
<head>
<meta charset="utf-8">
<title>CSS基础</title>
<style type="text/css">
* {
    margin: 0; 
    padding: 0;
}
</style>
</head>
<body>
<div id="box">问君能有几多愁，恰似一江春水向东流。</div>
</body>
</html>

在这里插入图片描述

一只小菜鸟的学习笔记

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css选择器----基本选择器

选择器分类：基本选择器，组合选择器，伪类选择器，伪对象选择器和属性选择器。1、基本选择器（1）标签选择器：格式：标签名称{样式} 例：p { font-size: 12px; /* 字体大小为12像素 */ color: red; /* 字体颜色为红色 */}（2）类选择器：格...
复制链接

扫一扫