CSS_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标记就会变得很长,以后修改起来不方便。
适合于样式定义较少的情况。
- 定义内部样式块对象 (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>
适合于样式相对较多的时候使用。
- 链入外部样式表文件 (Linking to a Style Sheet)
先建立外部样式表文件(.css),然后使用HTML的link标记,将外部样式表文件(.css)导入进当前的html文件中。
第一步:建立外部样式表文件(.css)
第二步:在html的head标记中使用link标记导入样式文件。
<link rel=stylesheet href="样式文件的路径" type="text/css">
例如:
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样式名称:样式值;
css样式名称:样式值;
css样式名称:样式值;
}
上面的样式定义格式是由2部分组成
- css选择器
- 具体样式设置
4.css选择器
css选择器是用来从html文件中选中/得到需要被样式控制的html标记。
- 元素选择器---根据html元素的名称选中被控制的html标记。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试元素选择器</title>
<style>
td{font-size:34px; }
a{text-decoration:none;}
</style>
</head>
<body>
<h1>测试元素选择器</h1>
<h2>根据html元素的名称选中被控制的html标记</h2>
<table border="1px" width="300px" height="200px">
<tr>
<td><a href="#">张三</a></td>
<td>23</td>
<td>西安</td>
</tr>
<tr>
<td><a href="#">李四</a></td>
<td>23</td>
<td>西安</td>
</tr>
<tr>
<td><a href="#">王五</a></td>
<td>23</td>
<td>西安</td>
</tr>
</table>
</body>
</html>
- 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>
- 类【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>
- 包含选择器--选择所有被父元素包含的子元素。
<!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>
- 属性选择器--根据html标记的属性来选中被控制的元素
- 元素 [属性名称] { sRules }:选择具有某个属性的元素
- 元素 [属性名称 = value【属性值】 ] { sRules }:选择具有某个属性且属性值等于 value 的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试属性选择器</title>
<style>
p[class]{
font-size: 30px;
color: red;
}
span[class='p1'][id='span']{
font-size: 40px;
color: blue;
}
#h3[class=test3]{
color: green;
}
</style>
</head>
<body>
<h1>属性选择器</h1>
<h2>根据html标记的属性来选中被控制的元素</h2>
<h2>1.元素 [属性名称] { sRules }:选择具有某个属性的元素</h2>
<h2>2.元素 [属性名称 = value【属性值】 ] { sRules }:选择具有某个属性且属性值等于 value 的元素</h2>
<p id="p1" >测试属性选择器</p>
<p id="p1" class="p1">测试属性选择器</p>
<span id="span" class="p1" >测试属性选择器</span><br>
<span class="p1">测试属性选择器</span><br>
<span class="p3">测试属性选择器</span><br>
<h3 id="h3">测试属性选择器</h3>
<h3 id="h3" class="test3">测试属性选择器</h3>
<h3 id="h3">测试属性选择器</h3>
<h3 id="h3">测试属性选择器</h3>
</body>
</html>
- 子元素选择器---选择所有作为E1子对象的 E2 。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试子元素选择器</title>
<style>
div{
width: 300px;
height: 400px;
background-color: red;
}
div ol>li p{font-size: 30px;}
</style>
</head>
<body>
<h1>子元素选择器</h1>
<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>
- 选择器分组----将同样的样式应用于多个选择器选中的元素上。不同的选择器之间使用“,”分割。、
<!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>