CSS基础1

最新推荐文章于 2024-07-18 17:34:14 发布

blake2

最新推荐文章于 2024-07-18 17:34:14 发布

阅读量152

点赞数

文章标签： css

本文链接：https://blog.csdn.net/blake2/article/details/114446108

版权

1.什么是CSS?

CSS--Cascading Style Sheet [层叠样式表]，是用于(增强)控制网页[html]样式并允许将样式信息与网页内容分离的一种标记性语言.

2.CSS的作用?

给网页[html]的元素/标记/标签设置样式的。可以让HTML网页变得好看。

3.在HTML网页中如何使用CSS?

1.内联定义 (Inline Styles)

内联定义即是在[html]的元素/标记/标签的内部使用对象的style属性定义适用其的样式表属性，以达到控制当前html元素的样式。

在[html]的元素/标记/标签的开始标记中设置样式。

格式:<html标记 style=”样式名称1:样式值1;样式名称2:样式值2”>显示的内容</html标记>

例如:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试内联定义CSS</title>
	</head>
	<body>
		<h1>1.内联定义</h1>
		<h2>在[html]的元素/标记/标签的开始标记中设置样式。</h2>
		<div style="width:200px;height:200px;background-color:red;"></div>
	</body>
</html>

缺点:当我们给一个html标记设置很多样式的时候，这个HTML标记就会变得很长，以后修改起来不方便，只适合于样式定义较少的情况。

2.定义内部样式块对象 (Embedding a Style Block)

就是在<head></head>中添加<style></style>标记来设置html元素的样式。

格式：

<html>
    <head>
        <style>
           css选择器{
          css样式名称:样式值;
          css样式名称:样式值;
          css样式名称:样式值;
            }
        </style>
    </head>
    <body>
       Html元素
    </body>
</html>

例如:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试定义内部样式块</title>
		<style>
			div{width:200px;
				height: 200px;
				background-color: blue;}
		</style>
	</head>
	<body>
		<h1>2.定义内部样式块</h1>
		<h2>在html的head标记中通过定义style标记来设置css样式</h2>
		<div></div>
		<h3>缺点:当我们需要为html文件中的很多标记设置样式时，会使得内部样式块变得很大</h3>
	</body>
</html>

缺点:当我们需要为html文件中的很多标记设置样式时，会使得内部样式块变得很大，只适合于样式相对较多的时候使用。

3.链入外部样式表文件 (Linking to a Style Sheet)

先建立外部样式表文件（.css），然后使用HTML的link标记，将外部样式表文件（.css）导入进当前的html文件中。

第一步：建立外部样式表文件（.css）

第二步：在html的head标记中使用link标记导入样式文件。

例如：

mytest.css
div{
	width: 200px;
	height: 200px;
	background-color: yellow;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试链入外部样式</title>
		<link rel="stylesheet" href="mytest.css" type="text/css"/>
	</head>
	<body>
		<h1>链入外部样式</h1>
		<h2>第一步：建立外部样式表文件（.css）</h2>
		<h2>第二步：在html的head标记中使用link标记导入样式文件。</h2>
		<div></div>
	</body>
</html>

当我们需要大量的css样式设置是使用这种方式，这种方式可以做到html与css的分离控制。我们往往使用最多的就是第2种和第3种方式。这两种方式定义css样式的语法是相同的。

格式：

css选择器{

css样式名称:样式值;

}

上面的样式定义格式是由2部分组成：1.css选择器 2.具体样式设置

4.css选择器---是用来从html文件中选中/得到需要被样式控制的html标记。

（1）元素选择器---根据html元素的名称选中被控制的html标记。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素选择器</title>
		<style>
			p{
				font-size: 30px;
				color: red;
			}
        </style>
    </head>
	<body>
		<h2>1.元素选择器--根据html元素的名称选中被控制的html标记</h2>
		    <p>测试元素选择器</p>
		    <p>测试元素选择器</p>
		    <p>测试元素选择器</p>
    </body>
</html>

（2）id选择器--根据给html标记设置的id属性来选中被控制的html标记，如果要使用id选择器那么首先需要给html标记去设置id属性。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试id选择器</title>
		<style>
			#p1{color: red;font-size: 25px;}
			#p2{color: blue;font-size: 35px;}
			#p3{color: yellow;font-size: 45px;}
			#p4{color: green;font-size: 55px;}
		</style>
	</head>
	<body>
		<h1>id选择器</h1>
		<h2>根据给html标记设置的id属性来选中被控制的html标记</h2>
		<h2>如果要使用id选择器那么首先需要给html标记去设置id属性。</h2>
		<p id="p1">测试id选择器-p1</p>
		<p id="p2">测试id选择器-p2</p>
		<p id="p4">测试id选择器-p4</p>
		<p id="p4">测试id选择器-p4</p>
	</body>
</html>

（3）类【class】选择器---根据给html标记设置的class属性来选中被控制的html标记，如果要使用类【class】选择器那么首先需要给html标记去设置class属性。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试类选择器</title>
		<style>
			.p1{font-size: 30px;color: red;background-color: chartreuse;}
			.p2{font-size: 40px;color: blue;background-color: yellow;}			
		</style>
	</head>
	<body>
		<h1>类[class]选择器</h1>
		<h2>根据给html标记设置的class属性来选中被控制的html标记</h2>
		<h2>如果要使用类【class】选择器那么首先需要给html标记去设置class属性。</h2>
		<p class="p1">测试class选择器-p1</p>
		<p class="p1">测试class选择器-p1</p>
		<p class="p2">测试class选择器-p2</p>
		<p class="p2">测试class选择器-p2</p>
	</body>
</html>

（4）包含选择器--选择所有被父元素包含的子元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试包含选择器</title>
		<style>
			div{
				width: 400px;
				height: 400px;
				background-color: chartreuse;
			}
			div img{
				width: 100px;
				height: 100xp;
				padding: 100px;
			}
		</style>
	</head>
	<body>
		<h1>包含选择器</h1>
		<h2>选择所有被父元素包含的子元素。</h2>
		<div>
			<img src="imgs/avatar5.png" />
		</div>
		<img src="imgs/avatar5.png" />
	</body>
</html>

（5）属性选择器--根据html标记的属性来选中被控制的元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS选择器</title>
		<style>
            span[id=span11]{
				color: #7FFF00;
			}
			span[class='span22']{
				color: yellow;
			}
			span[id='span33'][class='span33']{
				color: blueviolet;
        </style>
	</head>
	<body>
        <h2>5.属性选择器-根据html标记的属性来选中被控制的元素</h2>
		<span id="span11">测试属性选择器</span><br>
		<span class="span22">测试属性选择器</span><br>
		<span id="span33" class="span33">测试属性选择器</span>
    </body>
</html>

（6）子元素选择器---选择所有作为E1子对象的 E2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS选择器</title>
		<style>
            div ol>li {
				background-color: #FFFF00;
			}
        </style>
	</head>
	<body>
       <h2>6.子元素选择器-选择所有作为E1子对象的 E2 </h2>
		<div>
			<ul>
				<li><p>姓名张三</p></li>
				<li>年龄23</li>
				<li><p>地址西安</p></li>
				<li>注册时间2020-11-07</li>
			</ul>
			<ol>
				<li><p>姓名张三</p></li>
				<li>年龄23</li>
				<li><p>地址西安</p></li>
				<li>注册时间2020-11-07</li>
			</ol>
			<p>不在ul中的p元素</p>
			<p>不在ul中的p元素</p>
		</div>
    </body>
</html>

（7）选择器分组----将同样的样式应用于多个选择器选中的元素上。不同的选择器之间使用“，”分割。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试选择器分组</title>
		<style>
			.td1,p span{
				color: red;
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<h1>选择器分组</h1>
		<h2>将同样的样式应用于多个选择器选中的元素上。不同的选择器之间使用“，”分割。</h2>
	    <table border="1px" width="300px">
			<tr>
				<td class="td1">zhansgan</td>
				<td>23</td>
				<td>xian</td>
			</tr>
			<tr>
				<td class="td1">lisi</td>
				<td>23</td>
				<td>xian</td>
			</tr>
			<tr>
				<td class="td1">wangwu</td>
				<td>23</td>
				<td>xian</td>
			</tr>
		</table>
		<p>测试选择器的<span>分组</span>用法</p>
		<p>测试选择器的分组用法</p>
		<p>测试选择器的<span>分组</span>用法</p>
	</body>
</html>

注意:css的选择器在使用的时候，不是单一去应用，而是通过不同的组合形式来使用。

5.常用的伪类

1.link---设置 a 标记在未被访问前的样式。

格式:a: link {css样式属性}

2.hover----设置对象在其鼠标悬停时的样式。

格式:Selector: hover{css样式属性}

3.active---设置对象在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。应用于任何对象

格式:Selector:active{css样式属性}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试常用的伪类元素</title>
		<style>
			a:link{
				font-size: 30px;
				color: blue;
			}
			a:hover{
				font-size: 40px;
				color: yellow;
			}
			a:active{
				font-size: 50px;
				color: green;
			}
			img:hover{
				width: 300px;
				height: 300px;
			}
			img:active{
				border:10px solid #0000FF;
			}
			#div{
				display:  none;
			}
		</style>
		<script>
			function  test1(){
				document.getElementById("div").style.display="block";
			}
			function  test2(){
				document.getElementById("div").style.display="none";
			}
		</script>
	</head>
	<body>
		<h1>:link---设置 a 标记在未被访问前的样式。</h1>
		<h2>格式:a: link {css样式属性} </h2>
		<h1>:hover---设置对象在其鼠标悬停时的样式。</h1>
		<h2>格式:Selector: hover{css样式属性} </h2>
		<h1>:active---设置对象在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。应用于任何对象</h1>
		<h2>格式:Selector:active{css样式属性} </h2>
		<a href="#">测试伪类元素</a><br>
		<img src="imgs/avatar2.png" onmouseover="test1();" onmouseout="test2();"/>
		<div id="div"><h1>XXXX公司员工</h1></div>
	</body>
</html>

blake2

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础1

1.什么是CSS? CSS--Cascading Style Sheet[层叠样式表]，是用于(增强)控制网页[html]样式并允许将样式信息与网页内容分离的一种标记性语言.2.CSS的作用? 给网页[html]的元素/标记/标签设置样式的。可以让HTML网页变得好看。3.在HTML网页中如何使用CSS? 1.内联定义 (Inline Styles) 内联定义即是在[html]的元素/标记/标签的内部使用对象的style属性定义适用其的样式表属...
复制链接

扫一扫