CSS选择器和常用样式

最新推荐文章于 2024-06-28 10:40:32 发布

LPC&LPC

最新推荐文章于 2024-06-28 10:40:32 发布

阅读量129

点赞数

文章标签： css

本文链接：https://blog.csdn.net/LPCLPCLPCLPCLPC/article/details/127184043

版权

一、标签名选择器

标签名选择器的格式是：

标签名{

属性：值;

}

示例代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>CSS选择器</title>
	<style type="text/css">
		div{
			border:1px solid yellow;
			color: blue;
			font-size: 30px;
		}
		span{
			border:5px dashed blue;
			color:yellow;
			font-size:20px;
		}
	</style>
</head>
<body>
	<!-- 
	在所有div标签上修改字体颜色为蓝色，字体大小30个像素。边框为1像素黄色实线。
	并且修改所有span 标签的字体颜色为黄色，字体大小20个像素。边框为5像素蓝色虚线。
	 -->
	<div>div标签1</div>
	<div>div标签2</div>
	<span>span标签1</span>
	<span>span标签2</span>
	
</body>
</html>

二、ID选择器

id 选择器的格式是：

#id 属性值 {

属性：值;

}

id 选择器，通过 id 属性选择性的去使用这个样式

示例代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>ID选择器</title>
	<style type="text/css">

		#id001{
			color:blue;
			font-size: 30px;
			border:1px yellow solid;
		}
		#id002{
			color:red;
			font-size: 20px;
			border:5px blue dotted;
		}
	</style>
</head>
<body>		
	
	<!-- 
	分别定义两个 div 标签，
	第一个div 标签定义 id 为 id001 ，然后根据id 属性定义css样式修改字体颜色为蓝色，
	字体大小30个像素。边框为1像素黄色实线。
	
	第二个div 标签定义 id 为 id002 ，然后根据id 属性定义css样式 修改的字体颜色为红色，字体大小20个像素。边框为5像素蓝色点线。
	 -->
	
	<div id="id001">div标签1</div>
	<div id="id002">div标签2</div>
	
</body>
</html>

三、class选择器（类选择器）

class 类型选择器的格式是：

.class 属性值 {

属性：值;

}

class 类型选择器，可以通过 class 属性有效的选择性地去使用这个样式

示例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>class类型选择器</title>
	<style type="text/css">
		.class01{
			color: blue;
			font-size: 30px;
			border: 1px yellow solid;
		}
		.class02{
			color: grey;
			font-size: 26px;
			border: 1px red solid;
		}
	</style>
</head>
<body>

	<!-- 
		1：修改 class 属性值为 class01的 span 或 div 标签，字体颜色为蓝色，字体大小30个像素。边框为1像素黄色实线。
		2：修改 class 属性值为 class02的 div 标签，字体颜色为灰色，字体大小26个像素。边框为1像素红色实线。
	 -->

	<div class="class01">div标签class01</div>
	<div class="class02">div标签</div>
	<span class="class01">span标签class01</span>
	<span>span标签2</span>

</body>
</html>

四、组合选择器

组合选择器的格式是：

选择器 1 ，选择器 2 ，选择器 n{

属性：值;

}

组合选择器可以让多个选择器共用同一个 css 样式代码

示例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>class类型选择器</title>
    <style type="text/css">
        .class01,#id01{
            color:blue;
            font-size: 20px;
            border:1px yellow solid;
        }
    </style>
</head>
<body>

	<!-- 
	1：修改 class="class01" 的div 标签 和 id="id01" 所有的span标签，
	字体颜色为蓝色，字体大小20个像素。边框为1像素黄色实线。
	 -->

   <div class="class01">div标签class01</div> <br />
   <span id="id01">span 标签</span>  <br /> 
   <div>div标签</div> <br />
   <div>div标签id01</div> <br />

</body>
</html>

五、常用样式

示例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>06-css常用样式.html</title>
    <style type="text/css">

    div{
        color: red; /*字体颜色*/
        border: 1px yellow solid;  /*边框*/
        width: 300px;  /*宽度*/
        height: 300px; /*高度*/
        background-color: blue; /*背景颜色*/
        font-size: 30px; /*字体大小*/
        margin-left: auto; /*DIV 居中*/
        margin-right: auto;
        text-align: center; /*文本居中*/
    }
    table{
        border:1px red solid; /*设置边框*/
        border-collapse: collapse; /*将边框合并*/
    }
    td{
        border:1px red solid; /*设置边框*/
    }
    a{
        text-decoration:none; /*超连接去下划线*/
    }
    ul{  /*列表去除修饰*/
        list-style:none;
    }
    </style>
</head>
<body>
    <ul>
        <li>1111111</li>
        <li>1111111</li>
        <li>1111111</li>
        <li>1111111</li>
        <li>1111111</li>
    </ul>
    <table>
        <tr>
            <td>1.1</td>
            <td>1.2</td>
        </tr>
    </table>
    <a href="http://www.baidu.com">百度</a>
    <div>我是div标签</div>
</body>
</html>