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>
适合于样式相对较多的时候使用。
3.链入外部样式表文件 (Linking to a Style Sheet)
先建立外部样式表文件（.css），然后使用HTML的link标记，将外部样式表文件（.css）导入进当前的html文件中。
第一步：建立外部样式表文件（.css）
第二步：在html的head标记中使用link标记导入样式文件。
<link rel=stylesheet href="样式文件的路径" type="text/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部分组成
1.css选择器
2.具体样式设置
4.css选择器
css选择器是用来从html文件中选中/得到需要被样式控制的html标记。
1.元素选择器---根据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>
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标记的属性来选中被控制的元素
1.元素 [属性名称] { sRules }：选择具有某个属性的元素
2.元素 [属性名称 = 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>
6.子元素选择器---选择所有作为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>
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>
6.CSS中常用的属性设置
css格式:
选择器{
css属性名称:属性值；
}
选择器--从htm文件中选中自己需要添加样式的html元素。
1.元素选择器---根据html元素的名称选中被控制的html标记。
2.id选择器--根据给html标记设置的id属性来选中被控制的html标记。
如果要使用id选择器那么首先需要给html标记去设置id属性。
3.类【class】选择器---根据给html标记设置的class属性来选中被控制的html标记。
如果要使用类【class】选择器那么首先需要给html标记去设置class属性。
4.包含选择器--选择所有被父元素包含的子元素。
5.属性选择器--根据html标记的属性来选中被控制的元素
a.元素 [属性名称] { sRules }：选择具有某个属性的元素
b.元素 [属性名称 = value【属性值】 ] { sRules }：选择具有某个属性且属性值等于 value 的元素
6.子元素选择器---选择所有作为E1子对象的 E2 。
7.选择器分组----将同样的样式应用于多个选择器选中的元素上。不同的选择器之间使用“，”分割。
注意:css的选择器在使用的时候，不是单一去应用，而是通过不同的组合形式来使用。
6.1关于字体的css属性设置
color--设置字体颜色[颜色单词/颜色码【#0000ff】]
font-family---设置字体名称[黑体.....]
font-size --设置字体大小【数字px】
font-style--设置字体倾斜【normal | italic | oblique 】
font-weight--设置字体粗细【整百的数字【100~900】】
text-decoration--设置字体的修饰线【none || underline下划线 || overline上划线 || line-through贯穿线 】
text-shadow--文本的文字是否有阴影及模糊效果
text-transform--文本的大小写转换【none | capitalize | uppercase | lowercase 】
line-height--行高【数字px】
letter-spacing--文字之间的间隔 normal | length 【数字px】
word-spacing--单词之间插入的空隔normal | length 【数字px】
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>关于字体的css属性设置</title>
<style>
p{
color:red;
font-family:楷体;
font-size:30px;
font-style:italic;
font-weight:900;
text-decoration:underline;
text-transform:uppercase;
letter-spacing:10px;
word-spacing:20px;
text-shadow:10px 10px 20px red;
line-height: 30px;
}
</style>
</head>
<body>
<h1>关于字体的css属性设置</h1>
<h2 >color--设置字体颜色[颜色单词/颜色码【#0000ff】]</h2>
<h2>font-family---设置字体名称[黑体.....]</h2>
<h2>font-size --设置字体大小【数字px】</h2>
<h2>font-style--设置字体倾斜【normal | italic | oblique 】</h2>
<h2>font-weight--设置字体粗细【整百的数字【100~900】】</h2>
<h2>text-decoration--设置字体的修饰线【none || underline下划线
|| overline上划线 || line-through贯穿线 】</h2>
<h2>text-shadow--文本的文字是否有阴影及模糊效果</h2>
<h3>text-shadow:10px 0px 0px red;</h3>
<h3>第一个值:水平移动距离 0px 0px red;</h3>
<h3>第二个值:前后移动距离 0px 0px red;</h3>
<h3>第三个值:模糊效果</h3>
<h3>第四个值:阴影颜色</h3>
<h2>text-transform--文本的大小写转换【none |
capitalize | uppercase | lowercase 】</h2>
<h2>line-height--行高【数字px】</h2>
<h2>letter-spacing--文字之间的间隔 normal | length 【数字px】</h2>
<h2>word-spacing--单词之间插入的空隔normal | length 【数字px】</h2>
<p>测试关于字体的test css属性设置</p>
<p>测试文字是否有阴影及模糊效果</p>
<p>测试文字是否有阴影及模糊效果测试文字是否有阴影及模糊效果测试文字是否
有阴影及模糊效果测试文字是否有阴影及模糊效果测试文字是否有阴影及模糊效果
测试文字是否有阴影及模糊效果测试文字是否有阴影及模糊效果测试文字是否有阴影及模糊效果
测试文字是否有阴影及模糊效果测试文字是否有阴影及模糊效果测试文字是否有阴影及模糊效果
测试文字是否有阴影及模糊效果测试文字是否有阴影及模糊效果</p>
</body>
</html>
6.2关于文本属性设置
text-indent :文本的缩进 length 【数字px】
vertical-align：垂直对齐方式top middle bottom
text-align :水平对齐方式left | right | center
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>关于文本属性设置</title>
<style>
#p1{
font-size: 20px;
text-indent:30px;
}
#p2{
font-size: 20px;
text-indent:50px;
}
tr{
text-align:right;
vertical-align:bottom;
}
</style>
</head>
<body>
<h1>关于文本属性设置</h1>
<h2>text-indent :文本的缩进 length 【数字px】</h2>
<h2>vertical-align：垂直对齐方式top middle bottom </h2>
<h2>text-align :水平对齐方式left | right | center </h2>
<p id="p1">关于文本属性设置关于文本属性设置关于文本属性设置</p>
<p id="p2">关于文本属性设置关于文本属性设置关于文本属性设置</p>
<table border="1px" width="600px" height="200px">
<tr>
<td>text-align</td>
<td>水平对齐方式left | right | center</td>
</tr>
<tr>
<td>vertical-align</td>
<td>垂直对齐方式top middle bottom</td>
</tr>
</table>
</body>
</html>
6.3关于背景的设置
整个网页的背景设置
1. 整个网页的背景颜色【在body元素中设置bgcolor】
2. 整个网页的背景图片【在body元素中设置background】
Html元素的背景设置
1. Html元素的背景颜色【background-color】
2. Html元素的背景图片【background-image:url("imgs/banner1.png");】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>关于背景的设置</title>
<style>
div{
width: 300px;
height: 300px;
background-color: red;
}
p{
font-size: 40px;
color: yellow;
background-color: blue;
}
table{
background-image:url("imgs/banner1.png");
}
tr{
font-size: 20px;
color: #FFFF00;
}
</style>
</head>
<body background="imgs/timg.jpg">
<h1>关于背景的设置</h1>
<h2>1. 整个网页的背景颜色【在body元素中设置bgcolor】</h2>
<h2>2. 整个网页的背景图片【在body元素中设置background】</h2>
<h1>关于HTML元素背景的设置</h1>
<div></div>
<p>关于HTML元素背景的设置--背景颜色</p>
<table border="1px" width="600px" height="200px">
<tr>
<td colspan="2">关html元素的背景设置</td>
</tr>
<tr>
<td>HTML元素的背景颜色</td>
<td>background-color:颜色单词/颜色码</td>
</tr>
<tr>
<td>HTML元素的背景图片</td>
<td>background-image:url("图片路径")</td>
</tr>
</table>
</body>
</html>
6.3关于html元素的尺寸设置
width : 设置元素的宽度 auto | length
height : 设置元素的高度auto | length
6.4 关于边框设置
border-color : 边框颜色
border-style ：边框样式
border-width：边框粗细
上面这三个属性可以分为4组
border-top-color，border-right-color，border-bottom-color，border-left-color
border-top-style，border-right-style，border-bottom-style，border-left-style
border-top-width，border-right-width，border-bottom-width，border-left-width
我们可以通过border属性设置4边的边框
border:粗细 样式 颜色。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>关于边框设置</title>
<style>
div{
width: 200px;
height: 200px;
border: 10px solid red;
}
#img1{
border-top-width:5px ;
border-top-style: double;
border-top-color: black;
border-right-width:10px ;
border-right-style: solid;
border-right-color: blue;
border-bottom-width:15px ;
border-bottom-style: dashed;
border-bottom-color: red;
border-left-width:20px ;
border-left-style: dotted;
border-left-color: green;
}
#img2{
border-top:5px double black;
border-right:10px solid blue;
border-bottom:15px dashed red;
border-left:20px dotted green;
}
</style>
</head>
<body>
<h1>关于边框设置</h1>
<div></div>
<br>
<img id="img1" src="imgs/avatar2.png" />
<br>
<img id="img2" src="imgs/avatar2.png" />
</body>
</html>
673
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
