|
css基本样式：
css基本样式是对标签的修饰美化，它可以让网页显得更炫酷优美，下面就给大家介绍一些基本的样式：
<!DOCTYPE
html>
<html>
<head>
<meta
charset="UTF-8">
<title>基本样式</title>
<style
type="text/css">
div{
/*文字颜色*/
color: red;
/*设置宽度*/
width:
500px;
/*设置高度*/
height:
500px;
/*设置背景颜色*/
/*background-color: orange;*/
background-color:
rgb(84,121,30);
/*边框*/
border:
5px
solid black;
/*标签文本开头空出30px*/
text-indent:
30px;
/*标签内文本内容加下划线*/
text-decoration:
underline;
/*文本贯穿线*/
text-decoration:
line-through;
/*取消a标签的下划线*/
text-decoration:
none;
/*内容居中*/
text-align: center;
/*字体大小*/
font-size:
30px;
/*字体*/
font-family: STSong;
/*文字加粗*/
font-weight:
bold;
/*文字倾斜*/
font-style:
italic;
/*设置背景图片*/
background-image:
url(img/3.jpg);/*(此处需要在omg文件夹中插入一张图片)*/
/*不重复背景图片*/
background-repeat:
no-repeat;
/*背景尺寸*/
background-size:
100%
100%;
}
／*取消a标签自带的下划线*/
a{
text-decoration:
none;
}
</style>
</head>
<body>
<div>我是div</div>
<a
href="javascript:void(0)">我是a标签</a>
<div>
<a href="javascript:void(0)">我是另一个a标签</a>
</div>
</body>
</html>
css选择器：
css选择器就如同雷达一样，他能精准的找到我们想要修改的标签的样式，他在程序编写的过程中起到很大的作用，可以说没有css选择器就不能制作出一套完美的网页，如下，我通过代码的方式让大家体会选择器的强大作用；（注：大家在运行代码的过程中尽量是想用哪个就注掉其他无关的代码，以免它们之间相互影响，给你的观察带来影响。）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css选择器</title>
<!--选择器：负责在样式区找到我们要修改样式的标签-->
<style type="text/css">
/*css选择器第一种：标签名选择器*/
div{
width: 100px;
height: 100px;
background-color: red;
}
/*二：类选择器*/
.div1{
width: 200px;
height: 200px;
background-color: darkcyan;
}
/*三：id选择器,优先级很高，和js有关,尽量少使用*/
#oDiv{
width: 50px;
height: 50px;
background-color: blue;
}
/*四：后代选择器*/
.div2 p{
color: red;
}
/*五：通配符选择器*/
* {
border: 1px solid black;
}
/*六：组合选择器*/
.div3,.div4,.div5,#oDiv1,p{
width: 200px;
height: 200px;
background-color: cyan;
}
p{
width: 100px;
height: 100px;
background-color:red;
}
</style>
</head>
<body>
<div class="div1"></div>
<div id="oDiv"> 我是做参考的</div>
<p class="div1"></p>
<div class="div2">
<p>我是p1</p>
<div>
<p>我是p3</p>
</div>
</div>
<p>我是p2</p>-->
<div class="div5"></div>
<div class="div4"></div>
<div class="div3"></div>
<div id="oDiv1"></div>
<p></p>
<!--
选择器优先级
标签名选择器<class选择器<id选择器
-->
</body>
</html>
| 
转播
