【无标题】

最新推荐文章于 2024-11-11 00:01:33 发布

wj_Luke

最新推荐文章于 2024-11-11 00:01:33 发布

阅读量111

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/wj_Luke/article/details/127098071

版权

一、
选择器 {
声明1;
声明2;
…… }

1、举例
h1 {

h1 {  
  	font-size:12px;
	color:#F00;
}

注意：CSS的最后一条声明后的“;”可写可不写，但是，基于W3C标准规范考虑，建议最后一条声明的结束“;” 都要写上

行内样式
使用style属性引入CSS样式，直接在正文里面编写
举例：

<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>

内部样式表 CSS代码写在<head>的<style>标签中
举例：

<style>
        h1{color: green; }
</style>

外部样式表
CSS代码保存在扩展名为.css的样式表中
举例：

链接式
<link href="style.css" rel="stylesheet" type="text/css" />
导入式
@import url("style.css");

就近原则：行内样式>内部样式表>外部样式表

CSS基本选择器：

标签选择器
HTML标签作为标签选择器的名称
<h1>…<h6>、<p>、<img/>
会改变所有相同标签
类选择器
.class { font-size:16px;}
之所以用标签选择器，可以把不同的标签设为同一类

设置类
<h2 class="red">静夜思</h2 >
id选择器

#id { font-size:16px;}
设置id
<h4 id="green">举头望明月</h4>

- 层次选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		/*层次选择器*/
		<style>
		/* 后代选择器：子子孙孙都会选*/
		body p{
			background:red;
		}
		/*子选择器：只选择子代*/
		body>p{
			background:orange;
		}
		/*相邻兄弟选择器：通过类名active找，只有一个，相邻（向下）*/
		.active+p{
		background: red
		}
		/*通用兄弟选择器，当前选中元素的向下的所有兄弟元素*/
		.green~p{
			background:red;
		}
		</style>
	</head>

举例：

	<body>
		<p class="active">1</p>
		<p class="green">2</p>
		<p>3</p>
		<p>4</p>
		<ul>
			<p>5</p>
			<p>6</p>
			<p>7</p>
		</ul>
		<p>8</p>
		<p>9</p>
	</body>
</html>

- 属性选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			a[id] { 
				background: yellow;
			} */
			a[id=first] { 
				background: red;
			}
			a[href^=http] { 
				background: red;
			}
			a[href$=png] { 
				background: red;
			} 
		   a[class*=links] { 
				background: red;
			}
		</style>
	</head>

举例：

	<body>
		<a href="" id="first">床前明月光</a><br/>
		<a href="http//:">疑是地上霜</a><br/>
		<a href="mmmmpng">举头望明月</a><br/>
		<a href="linksii" class="kkkklinks">低头思故乡</a><br/>
		<a href="" id="low" >222222222</a><br/>
	</body>
</html>