写在开头:
目前保持一天一篇的节奏,虽然前面的知识比较简单,大多数可能比较枯燥,不会的可以百度,但是一些常用的一定要记住,这对后面的实战很重要。基础一定要打扎实。OK,进入第二篇CSS的基础学习吧。
什么是CSS?
color:red;
background-color:blue;
font-size:20px;
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>行内样式</title>
</head>
<!-- style="background-color: red;" -->
<body>
<div style="color: red; font-size:50px; background-color: yellow;">11111111111</div>
<div style="color: red; font-size:50px; background-color: yellow;">11111111111</div>
<div style="color: red; font-size:50px; background-color: yellow;">11111111111</div>
<div style="color: red; font-size:50px; background-color: yellow;">11111111111</div>
<div style="color: red; font-size:50px; background-color: yellow;">11111111111</div>
<div style="color: red; font-size:50px; background-color: yellow;">11111111111</div>
<div style="color: red; font-size:50px; background-color: yellow;">11111111111</div>
<div style="color: red; font-size:50px; background-color: yellow;">11111111111</div>
<p style="color: green; font-size: 100px; background: url('images/img_03.jpg');">22222222222222222</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>页内样式</title>
<!--
css的样式遵循的规律:
1. 叠加原则
2. 就近原则
-->
<style>
div{
color: deepskyblue;
font-size: 30px;
border: 1px solid red;
}
p{
color: deeppink;
font-size: 40px;
}
</style>
<link href="css/index.css" rel="stylesheet">
</head>
<body>
<div>11111111111111111111</div>
<div>11111111111111111111</div>
<div>11111111111111111111</div>
<div>11111111111111111111</div>
<div>11111111111111111111</div>
<p>2222222222222222</p>
<p>2222222222222222</p>
<p>2222222222222222</p>
<p>2222222222222222</p>
<p>2222222222222222</p>
<div>3333333</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>外部样式</title>
<link href="css/index.css" rel="stylesheet">
</head>
<body>
<div>5555555555555555555</div>
<p>1111111111111111111</p>
</body>
</html>
这里是css文件
div{
color: blueviolet;
font-size: 60px;
}
p{
background-color: greenyellow;
font-size: 45px;
}
CSS的两大重点
通过属性的复杂叠加才能做出漂亮的网页
通过选择器找到对应的标签设置样式
CSS选择器
一、标签选择器
根据标签名找到标签
/*标签选择器*/
div{
color: red;
}
p{
color: blue;
}
二、类选择器
通过类型(class='test')找到标签
/*类选择器*/
.test{
color: green;
}
三、id选择器
通过id(id='older' / id='main')找到标签
/*id选择器*/
#older{
font-size: 66px;
}
#main{
width: 300px;
height: 250px;
background-color: green;
}
四、并列选择器
中间通过 ‘,’ 隔开,表示要同时满足条件,才成设置样式
/*并列选择器*/
div,.test{
/*background-color: black;*/
}
五、复合选择器
直接两个条件写到一起,中间没有任何符号间隔,相当于集合中的并集,任意满足一个条件即可。
/*复合选择器*/
div.test{
border: 10px dashed red;
}
六、后代选择器
通过字面意思很明显,就是属于它的子集即可。
/*后代选择器*/
div .test3 a{
color: black;
}
七、直接后代选择器
跟第六项很像,但是只能是直接的子集,只能是第二层。
/*直接后代选择器*/
div > p{
color: black;
}
八、相邻兄弟选择器
相邻的两项即可。
/*相邻兄弟选择器*/
div + test3{
color: black;
}
九、属性选择器
可以通过标签的某一个属性进行查找。
/*属性选择器*/
div[name="jack"]{
color: black;
}
十、伪类
一些系统定义的,可以通过特定动作激活,来查找对应的标签,看一下用法应该就明白了。
/*前面是一个选择器,然后后面再加上对应的伪类即可*/
#main:hover{
/*width: 400px;*/
/*height: 50px;*/
/*改变鼠标的类型*/
cursor: crosshair;
}
下面列举下常用的伪类:
十一、伪元素
跟伪类很想,只不过系统的定义不同,下面列举下常用的伪元素:
到这里,CSS的选择器就介绍完了,虽然十几种,但常用的也就那么三四种(类、标签、id选择器、伪类)。那么大家肯定有疑问,如果用过两种选择器对同一个标签进行设置样式,它会听谁的呢?
这个不用担心,因为CSS是存在优先级的,谁的优先级高就听谁的。这里有一个权值得概念,其实就是一个数值,每个选择器的数值不同,有冲突的时候就利用这个权值进行比较,权值越大,优先级越高。 important的权值最高。
原则:选择器的权值加到一起,大的优先;如果权值相同,后定义的优先级高。
下面看一个列子:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!--
选择器的优先级别:
1.同等级别的选择器,遵循: a.叠加原则 b.就近原则
2.不同等级别:
important > 内联 > id > 类 > 标签 | 伪类 | 属性选择 > 伪元素 > 通配符 > 继承
3. 选择器的针对性越强,它的优先级就越高
-->
<style>
/*符合选择器*/
div.test1{ /* 权值 11*/
color: royalblue;
}
/*id选择器*/
#one{/* 权值 100*/
color: chocolate;
}
/*类选择器*/
.test2{/* 权值 10*/
color: purple;
}
.test1{/* 权值 10*/
color: deeppink;
}
/*标签选择器*/
div{ /* 权值 1*/
color: red;
}
div{/* 权值 1*/
color: blue;
}
div{/* 权值 1001*/
color: green ! important;
}
*{ /*所有的 权值 0*/
font-size: 30px;
color: firebrick;
}
</style>
</head>
<body>
<div class="test1 test2" id="one" style="color:blue;">1221212121212121</div>
</body>
</html>
接下来介绍第二大快,属性;
CSS属性
我们先来看看一些常用的属性以及CSS3新增的一些属性;
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
/*background-color: red;*/
/*background: url("images/img_02.jpg") no-repeat;*/
/*background-size: cover;*/
/*width: 500px;*/
/*height: 250px;*/
/*隐藏,不会隐藏尺寸*/
/*visibility: hidden;*/
/*隐藏,内容和尺寸都会隐藏*/
/*display: none;*/
}
span{
background-color: green;
}
/*伪类*/
div:hover{
/*改变鼠标指针的类型*/
/*十字架*/
/*cursor: crosshair;*/
/*手指*/
cursor: pointer;
font-weight: bolder;
}
a{
/*去除下划线*/
text-decoration: none;
}
p{
background-color: red;
}
.test1{
/*首行缩进*/
text-indent:50px;
}
ul{
/*设置列表左边的样式*/
/*list-style: square;*/
list-style: none;
}
#test{
width: 100px;
height: 60px;
background: green;
/*处理超出内容*/
/*overflow: hidden;*/
overflow: auto;
}
</style>
</head>
<body>
<div>我是MT</div>
<span>哈哈哈哈哈哈哈哈</span>
<a href="#">百度一下,你就不知道</a>
<p class="test1">ghdbehwjdewbdewbhjdbewdbjewbjdbehwewbhjdbehjwbh</p>
<p class="test2">ewdnejnwndewjkdnwenjdnjkewnj</p>
<ul>
<li>11111111</li>
<li>2222222</li>
<li>3333333</li>
</ul>
<div id="test">32787327832783723273827832783</div>
</body>
</html>
CSS3新增属性:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 100px;
height: 40px;
background-color: red;
margin-bottom: 10px;
/*设置不透明度*/
/*opacity: 0.5;*/
/*块阴影*/
box-shadow:5px 5px 5px black;
}
/*rgba设置透明度*/
/*.test1{*/
/*background-color: rgba(255,0,0,1.0);*/
/*}*/
/*.test2{*/
/*background-color: rgba(255,0,0,0.8);*/
/*}*/
/*.test3{*/
/*background-color: rgba(255,0,0,0.6);*/
/*}*/
/*.test4{*/
/*background-color: rgba(255,0,0,0.4);*/
/*}*/
/*.test5{*/
/*background-color: rgba(255,0,0,0.2);*/
/*}*/
span{
font-size: 100px;
color: red;
/*文字阴影*/
text-shadow: 5px 5px 5px black;
border: 10px solid #ddd;
-webkit-border-image:url('https://www.baidu.com/img/baidu_jgylogo3.gif') 30 30 round;
}
</style>
</head>
<body>
<div class="test1">1111111111</div>
<div class="test2">2222222222</div>
<div class="test3">3333333333</div>
<div class="test4">4444444444</div>
<div class="test5">5555555555</div>
<span>我是MT</span>
</body>
</html>
可继承属性
不可继承属性
继承属性根据标签类型的不同而不同:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{
color: red;
font-size: 30px;
font-family: 'Arial';
}
</style>
</head>
<body>
<div>我是MT</div>
<p>我是MJ</p>
<span>我是MM</span>
</body>
</html>
下面列举下一些常用的不可继承的属性:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
background-color: red;
width: 300px;
height: 300px;
/*让标签变成行内标签*/
display: inline;
}
p{
background-color: green;
width: 100px;
height: 150px;
}
</style>
</head>
<body>
<div>
<p>我是MT</p>
</div>
</body>
</html>
OK!到这里CSS的基础知识就介绍的差不多了,作者也是菜鸟,很多没讲到还希望大家见谅~内容很多,很杂,大部分是需要理解记忆的,这样到后面实战才能行云流水~下一篇再见~