CSS是为了实现样式,实际上HTML也能实现样式,但是实际开发中为了使开发逻辑更加清楚,我们用HTML写网页格式,用插入CSS的方式插入样式,我将用两篇文章的篇幅去记录学习的过程。
插入CSS三种方式
#1.内联式
内联式就是在HTML标签里面用style关键字插入,一般开发不使用
<p style="color:red">这里文字是红色。</p>
#2.嵌入式
嵌入式是在head标签内部,用style标签定义样式,就像下面,一般开发不使用
<!DOCTYPE html>
<html lang="en">
<head >
<!-- <link rel="stylesheet" href="../CSS/main.css" type="text/css/">-->
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div{
color: red;
}
</style>
</head>
<body>
<div>这是一个div标签</div>
</body>
</html>
#3.外部式
为了让业务逻辑更加清晰,我们常常使用外部式,就是在html文件的head标签内部用link标签指明外部的css文件。
<!DOCTYPE html>
<html lang="en">
<head >
<link rel="stylesheet" href="../CSS/main.css" type="text/css/">
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>这是一个div标签</div>
</body>
</html>
常用文本样式
- font-size:设置字体大小,一个字的大小是20px
- color:设置颜色
- line-height:设置行高
- text-indent:设置首行缩进
- font-weight:设置字体加粗
- text-decoration:underline加下划线,none去掉下划线
- text-align:设置居中
#css文件
div{
font-size: 20px;
/*文本字体*/
font-family: "Helvetica Neue", sans-serif;
/*颜色*/
color: red;
/*设置文字倾斜*/
/*font-style: italic;*/
/*设置行高*/
line-height: 40px;
/*首行缩进,一个字是20px,这样就不用给 了*/
text-indent: 40px;
}
em{
font-style: italic;
color: gold;
font-weight: bolder;
}
h1{
/*把h1设置成不加粗*/
font-weight: normal;
}
span{
line-height: 40px;/*设置行高,行高在文字的上下都有,相当于是一个格子*/
color: gold;
text-decoration: underline;/*加下划线*/
}
a{
text-decoration: none;/*去掉链接的下划线*/
/*a标签不能设置居中,p标签可以设置居中*/
}
p{
text-align: center;/*设置居中*/
}
#html文件
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="../CSS/文本样式.css">
<meta charset="UTF-8">
<title>常用文本样式</title>
</head>
<body>
<h1>样式演示</h1>
<div>
<em>div1</em>是
</div>
<div>
<span>CSS 为了将网页的内容和样式分开</span>,CSS的思想诞生
从此之后HTML中的样式标签就废弃不用了
<p>HTML只负责文</p>档的结构,表现样式完全交给CSS
HTML文档变得更加简洁
</div>
<a href="http://www.baidu.com">baidu </a>
</body>
</html>
#结果
但是到这里出现一个问题就是,如果是使用外部式,在html文件中如果有三个div,在css文件中我们怎样设置才能使三个div有不同的样式呢?这就引出了css样式选择器
样式选择器
使用外部式,在css文件里面这样定义:
div{
/*能影响到所有的div*/
font-family: "Droid Serif", "DejaVu Serif", "STIX", serif;
}
则这个样式能影响到所有的div标签
如果想不同的div样式不一样,就需要id选择器
#div1{
color: red;
}
#div2{
color: aqua;
}
<div id="div1" class="green">这是第一个div</div><!--id用来匹配id选择器-->
<!--用id选择器设置blue,用类选择器设置green,因为id的权重高于类选择器,所以还是blue-->
<div id="div2">这是第二个div</div>
在html文件中不同的div设置不同的id,css文件中用id选择器就能匹配上。
但是在实际开发中起名字很头疼,所以我们常用类选择器实现复用
/*类选择器,是实际开发中常用的 选择器*/
.green{
color: green;
}
.big{
font-size: 40px;
}
html文件中用class匹配
<div class="big" >这是第三个div</div>
<!--用class来匹配类选择器,实际开发中常用这个,比如淘宝的前段代码-->
<span class="green big">这是一个span</span>
在开发中我们常有这样需求:把一个div中所有的span颜色设置成绿色,这个时候就需要层级选择器
.box{
font-size: 20px;
line-height: 30px;
color: red;
text-indent: 40px;
}
.box span{/*层级选择器,box下面的span都是这个样式*/
color: green;
}
.box em{
color: black;
font-style: normal;
}
.box .span02{
color: black;
}
一般来说层级选择器不超过四层
如果我们定义三个div,三个div字体大小,居中都相同,但是颜色不相同,除了重复定义三个类选择器的字体居中颜色外,还能用主选择器的方法,把相同样式放在主选择器里面:
.box1{
color: red;
}
.box2{
color: pink;
}
.box3{
color: black;
}
.box1,.box2,.box3{ /*把相同的样式定义在主选择器*/
font-size: 50px;
text-align: center;
}
在一些网站中,我们经常可以看到,一些样式在鼠标悬停在上面是时会发生变化,这是利用伪类实现的.
.link{
font-size: 30px;
text-decoration: none;
color: pink;
}
.link:hover{/*伪类*/
color: black;
font-weight: bold; /*鼠标放上去之后会变颜色,字体加粗*/
}
/*表示鼠标放上去时的悬停状态*/
为了解网站的一些bug,常用伪元素来为一块内容前后加上内容
/*伪元素*/
.box01,.box02{
font-size: 20px;
}
.box01:before{
content: "伪元素选择器新加的文字";
}
.box02:after{
content: "伪元素添加到后面的";
color: black;
}
完整代码
html文件
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="../CSS/CSS选择器.css">
<meta charset="UTF-8">
<title>标签选择器</title>
</head>
<body>
<div id="div1" class="green">这是第一个div</div><!--id用来匹配id选择器-->
<!--用id选择器设置blue,用类选择器设置green,因为id的权重高于类选择器,所以还是blue-->
<div id="div2">这是第二个div</div>
<div class="big" >这是第三个div</div>
<!--用class来匹配类选择器,实际开发中常用这个,比如淘宝的前段代码-->
<span class="green big">这是一个span</span>
<p>这是p标签</p>
<div class="box">
层级选择器主要应用在<span class="span02">选择父元素</span>下的子元素,或者子元素下面的子元素,
可与标签元素结合使用,减少命名,同时可以通过层级,防止命名冲突
层级选择器主要应用在选<em>择父元素</em>下的子元素,或者子元素下面的子元素,
可与标签元素结合使用,减少命名,同时可以通过层级,防止命名冲突
<div class="box4"> <!--层级选择器-->
层级选择器主要应用在<span>选择父元素</span>下的子元素,或者子元素下面的子元素,
可与标签元素结合使用,减少命名,同时可以通过层级,防止命名冲突
层级选择器主要应用在选<em>择父元素</em>下的子元素,或者子元素下面的子元素,
可与标签元素结合使用,减少命名,同时可以通过层级,防止命名冲突
</div>
</div>
<div class="box1">这是第一个div</div>
<div class="box2">这是第二个div</div>
<div class="box3">这是第三个div</div><!--三个div除了颜色不一样意外其他都一样,这样的情况就可以把相同的
抽离出来-->
<!--伪类及伪元素选择器-->
<a href="http://www.csdn.net" class="link">csdn</a>
<div class="box01">div1</div>
<div class="box02">div2</div>
</body>
</html>
css文件
div{
/*能影响到所有的div*/
font-family: "Droid Serif", "DejaVu Serif", "STIX", serif;
}
*{
/*能影响到所有标签*/
color: gold;
}
/*id选择器,用标签的id来匹配,标签的id不能重复,实际开发中不常用*/
#div1{
color: red;
}
#div2{
color: aqua;
}
/*类选择器,是实际开发中常用的 选择器*/
.green{
color: green;
}
.big{
font-size: 40px;
}
/*层级选择器,csdn源码,配合标签选择器和类选择器一起用*/
.box{
font-size: 20px;
line-height: 30px;
color: red;
text-indent: 40px;
}
.box span{/*层级选择器,box下面的span都是这个样式*/
color: green;
}
.box em{
color: black;
font-style: normal;
}
.box .span02{
color: black;
}
.box .box4{
color: blue;
}
.box1{
color: red;
}
.box2{
color: pink;
}
.box3{
color: black;
}
.box1,.box2,.box3{ /*把相同的样式定义在主选择器*/
font-size: 50px;
text-align: center;
}
/*
伪类及伪元素选择器:
常用的伪类选择器有hover,表示鼠标悬浮在元素上时的状态,伪元素选择器有bebore
和after,他们可以通过样式在元素中插入内容
*/
.link{
font-size: 30px;
text-decoration: none;
color: pink;
}
.link:hover{/*伪类*/
color: black;
font-weight: bold; /*鼠标放上去之后会变颜色,字体加粗*/
}
/*表示鼠标放上去时的悬停状态*/
/*伪元素*/
.box01,.box02{
font-size: 20px;
}
.box01:before{
content: "伪元素选择器新加的文字";
}
.box02:after{
content: "伪元素添加到后面的";
color: black;
}
网页样式
author:specyue@mail.ustc.edu.cn
github:https://github.com/zhangyuespec/CSS