2. CSS使用方式及常用选择器

最新推荐文章于 2020-06-27 22:24:10 发布

算前言，总轻负

最新推荐文章于 2020-06-27 22:24:10 发布

阅读量220

点赞数

分类专栏： Web

本文链接：https://blog.csdn.net/qq_36549593/article/details/102661516

版权

Web 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.css的使用方式

/*1.行内样式*/

    <div style="width: 200px; height: 30px;border: 1px solid red"></div>

/*2.内联样式*/

    <style type="text/css">
        div{
        width: 300px;
        height: 30px;
        background: rebeccapurple;
        margin-bottom: 10px;
        }
    </style>

/*3.外联样式

href="css/index.css" ，此处为外部css的地址

*/

    <link rel="stylesheet" type="text/css" href="css/index.css">

/*

index.css内

*/

div{
    width: 300px;
    height: 30px;
    background: red;
    margin-bottom: 10px;
}

2.常见选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css的选择器</title>
		<style type="text/css">
			
			* {
				border: 1px dotted palevioletred;
			}
			
			/* id选择器 */
			#box {
				width: 200px;
				height: 200px;
				background: yellow;
			}
			
			/* 类选择器 */
			.box, #box {
				border: 1px dashed darkturquoise;
				width: 200px;
				height: 200px;
				border-radius: 50%;
			}
			
			.box1 {
				background: #F05612;	/* rgb */
				border-radius: 10%;
			}

                        /* 标签选择器 */
			
			p {
				color: rgb(255, 0, 0);
				background: rgba(0, 255, 0, .9);
			}
			
		</style>
	</head>
	<body>
		
		<div id="box"></div>
		<div class="box box1"></div>
		<div class="box"></div>
		<div class="box"></div>
		<p>这个是一个段落</p>
		<p>这个是一个段落</p>
	</body>
</html>

3.包含选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			ul.news {
				border: 1px solid red;
			}
			
			/* 子代选择器，只会选择子代标签（li）*/
			/*.news > li {
				border: 1px solid red;
			}*/
			
			/* 后代选择器 , 后代的所有标签（li）*/
			.news li {
				border: 1px solid red;
			}
			
		</style>
	</head>
	<body>
		<div class="msg">
			<ul class="news">
				<li>这个是一个列表1</li>
				<li>这个是一个列表2</li>
				<li>这个是一个列表3</li>
				<li>这个是一个列表4</li>
				<li>这个是一个列表5</li>
			</ul>
		</div>
		<div class="news">
			<ul>
				<li>这个也是列表</li>
				<li>这个也是列表</li>
				<li>这个也是列表</li>
				<li>这个也是列表</li>
				<li>这个也是列表</li>
			</ul>
		</div>
	</body>
</html>

4.属性选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/* 存在某个属性的标签*/
			div[title] {
				border: 1px solid red;
			}
			
			/* 属性=值 */
			
			/*
			input[type="text"] {
				background: blue;
			}
			*/
			
			/*
			input[type^="te"] {
				background: red;
			}
			*/
			
			/*
			input[type$="word"] {
				background: red;
			}
			*/
			
			/* 包含 */
			/*[title*="div"] {
				background: red;
			}*/
			
			[title]+p {
				color: red;
			}
			
			
			
		</style>
	</head>
	<body>
		<div title="这个是div">这个是一个div</div>
		<div>这个是一个div</div>
		
		<input type="text" name="uname" id="uname" value="" title="this is good day"/>
		<br />
		<input type="password" name="uname" id="uname" value="" />
		<br />
		<input type="radio" name="uname" id="uname" value="" />
		<br />
	</body>
</html>

[attribute]	用于选取带有指定属性的元素。
[attribute=value]	用于选取带有指定属性和值的元素。
[attribute~=value]	用于选取属性值中包含指定词汇的元素。
[attribute\|=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]	匹配属性值以指定值开头的每个元素。
[attribute$=value]	匹配属性值以指定值结尾的每个元素。
[attribute=value*]	匹配属性值中包含指定值的每个元素。

5.伪类选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			a:link {
				color: #999;
				text-decoration: none;
			}
			a:hover {
				color: red;
				/*text-decoration: underline;*/
			}
			a:active {
				color: yellow;
			}
			a:visited {
				color: #0000FF;
			}
			
			input:focus {
				background: pink;
				height: 40px;
				width: 200px;
			}
			input::placeholder {
				color: red;
			}
		</style>
	</head>
	<body>
		<a href="http://www.baidu.com">百度</a>
		<input type="text" name="" id="" value="" placeholder="请输入你的内容"/>
	</body>
</html>