1、HTML,CSS,JavaScript的关系
1、html是网页内容的载体,CSS样式是外观控制,javaScript是行为,是实现网页特效效果。
2、CSS叫做层叠样式表,由于手机对H5和CSS3支持效果好,所以在手机端开发经常会使用到新的按本的CSS。
3、为什么要使用CSS?
(1)CSS简化相关HTML的标签,网页体积小,下载快
(2)解决内容与表现分离的问题
(3)更好的维护网页,提高效率
2、CSS样式规则
1、CSS规则由两个部分组成,选择器,声明。
2、CSS引用,CSS的引用要写在<head></head>标签当中,使用下面的方式去编写CSS的样式
<style type="text/css">
CSS样式
</style>
3、很多不同标签有相同的属性,可以将标签并排写在一起:
<style type="text/css">
p,h1,h2,h3,h4{color:red;}
</style>
4、CSS的注释方法:/*注释语句*/
3、CSS使用方法
1、CSS的使用有4种,行内样式(内联样式),内部样式表(嵌入样式),外部样式,导入表。
3.1、CSS行内样式(不建议大量使用)
1、在开始标签内添加style样式属性,比如说
<p style="color:red;">内容</p>
3.2、CSS内部样式
1、将样式写在<head></head>标签当中。
<style type="text/css">
CSS样式
</style>
3.3、CSS外部样式
1、外部样式表就是把CSS样式代码写在独立的一个文件中,扩展名:CSS文件名.css
2、外部文件的引入:href表示引入的外部文件的路径,可以是绝对路径,也可以是相对路径,rel表示定义了文档和连接的一个关系是stylesheet,type表示内容是样式表,值得注意的就是link也要放在<head></head>标签中。
<head>
<link href="XXX.css" rel="stylesheet" type="text/css">
</head>
3.4、CSS导入式
1、@import "外部CSS样式",需要写在style中,语法规则如下:
<style type="text/css">
@import url(css.css)
</style>
总结,四种方法的使用和选择:通常使用的是link方法,方便CSS和html的结合和修改
4、CSS使用方法的优先级
5、CSS选择器
1、CSS选择器包括:标签选择器,类选择器,ID选择器,全局选择器,群组选择器,后代选择器。
5.1、标签选择器
1、以HTML标签作为选择器:
/*p标签样式*/
p{
color:blue;
font-family:"隶书";
}
h1{color:red;}
5.2、类选择器
1、因为标签选择器如果将一个标签的样式写好,那么整个容器的所有该标签都用的这个样式,但是我们相同的标签需要不同的样式的时候,我们就需要使用类选择器。
2、需要做的就是:(1)为HTML标签添加class属性。(2)通过类选择器来为具有此class属性的元素设置CSS样式
<!DOCTYPE html>
<html>
<head>
<title>css_base</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style type="text/css">
.special{
color:blue;
}
.red{
color:red;
}
</style>
</head>
<body>
<p class="red">CSS层叠样式</p>
<p class="special">定义HTML内容在浏览器中的显示样式</p>
</body>
</html>
我们在内部样式中写了两个类,在相同的<p>标签中分别使用的不同类,以此达到我们相同标签使用不用样式的效果。
3、不同标签使用相同的类选择器的解决方法:使用 标签.类名{...}的方法
<!DOCTYPE html>
<html>
<head>
<title>css_base</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style type="text/css">
.special{
color:red;
}
p.special{
font-size:60px;
}
</style>
</head>
<body>
<h1 class="special">CSS层叠样式</h1>
<p class="special">定义HTML内容在浏览器中的显示样式</p>
</body>
</html>
注意的是,.special这个类的样式对所有class为special的标签都有效,而p.special只对class为special的<p>标签有效,也就是说,上面的代码中h1只有color:red这个样式,而p有color:red和font-size:60px两个样式。
4、同一元素可以设置多个类,之间有空格隔开。
<p class="special font">定义HTML内容在浏览器中的显示样式</p>
5.3、ID选择器
1、ID选择器和类选择器一样,只是需要给HTML标签添加id的属性,并在书写样式的时候使用#,如下所示
<!--为HTML标签添加ID属性-->
<p id="p1">内容1<p>
<p id="p2">内容2<p>
<!--使用ID选择器来为具有此ID的元素设置CSS样式-->
<style type="text/css">
#p1{color:red;}
#p2{color:blue;}
</style>
2、但是注意,id选择器不能使用在不同的标签上,同样,一个标签也不能使用多个ID选择器。和身份证一样是唯一的,唯一是指不同的人不能拿同一张身份证,同样,一个人也不能拿不同的身份证。
5.4、群组选择器
1、很多选择器具有相同的属性,我们就可以将它们写在一起。
p,h1,h2,h3{font-size:30px;}
p.special,#three,h1{font-size:50px;}
2、特别注意的是:class和id的值是区分大小写的。
5.5、全局选择器
对所有标签设置样式:使用 *{ 样式 } 的方法,这种方法要谨慎使用,通常是在代码的最开始,对边距等属性进行处理。
*{
color:blue;
}
6、后代选择器
1、使用后代选择器,需要使用空格隔开,比如说这样:就是说p标签中的em标签的样式
p em{....}
2、上面的是对所有p标签下的em标签都改变了样式,现在我们只对一些固定class的标签制定样式:下面这样就是对class为special的h1标签中的em标签进行样式的修改
//样式
h1.special{color:orange}
//内容
<h1><em>CSS</em>是什么</h1>
3、由于后代选择器书写方式,造成写法的多样性,我们要熟练识别
p a em{....} /*p标签中a标签中的em标签*/
#p1 em{....} /*id为p1标签下的em标签*/
p.red a em{....} /*class为red的p标签中的a标签中的em标签*/
4、伪类
那么我们现在写一个小的Demo来看看这个伪类的样式使用:
<!DOCTYPE html>
<html>
<head>
<title>标题</title>
<meta http-equiv="Content" content="text/html;charse=utf-8">
<style type="text/css">
a:link{color:blue}
a:visited{color:gray}
a:hover{color:green}
a:active{color:orange}
p:hover{color:red}
p:active{font-size:20px}
</style>
</head>
<body>
<a href="http://www.imooc.com" target="_blank">CSS使用方法</a>
<p>慕课网</p>
</body>
</html>
5、现在我们想对同一个标签实现不同的伪类样式的实现:通过对标签设置不同的类来实现。或者通过套用不同的外部标签
<!DOCTYPE html>
<html>
<head>
<title>标题</title>
<meta http-equiv="Content" content="text/html;charse=utf-8">
<style type="text/css">
a.one:link{color:blue}
a.one:visited{color:gray}
a.one:hover{color:green}
a.one:active{color:orange}
a.two:link{color:red}
a.two:visited{color:blue}
a.two:hover{color:yellow}
a.two:active{color:orange}
</style>
</head>
<body>
<a href="http://www.imooc.com" target="_blank" class="one">CSS使用方法</a>
<a href="http://coding.imooc.com" target="_blank" class="two">CSS使用方法</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>标题</title>
<meta http-equiv="Content" content="text/html;charse=utf-8">
<style type="text/css">
p a:link{color:blue}
p a:visited{color:gray}
p a:hover{color:green}
p a:active{color:orange}
div a:link{color:red}
div a:visited{color:blue}
div a:hover{color:yellow}
div a:active{color:orange}
</style>
</head>
<body>
<p><a href="http://www.imooc.com" target="_blank" >CSS使用方法</a></p>
<div><a href="http://coding.imooc.com" target="_blank" >CSS使用方法</a></div>
</body>
</html>
两者都可以实现对同一个文件下不同链接设置不同样式的效果。
7、CSS的继承和层叠
1、父元素设置样式,子元素可以继承部分CSS属性,这样我们可以降低CSS代码的复杂度。
2、我们来写一段简单的代码来说明一下:下面的p标签定义了red的样式,而span是在p标签里面的,它继承了p标签的color属性,所以也是红色的,那么div标签定义了红色边框的样式,div中还有div标签,然而里面的div同样有红色的边框,这是层叠。
<!DOCTYPE html>
<html>
<head>
<title>标题</title>
<meta http-equiv="Content" content="text/html;charse=utf-8">
<style type="text/css">
p{color:red;}
div{border:1px solid red;}
</style>
</head>
<body>
<div>
<p>css<span>继承</span></p>
<div>css层叠</div>
</div>
</body>
</html>
3、css层叠:可以定义多个样式,不冲突时,多个样式可以层叠为一个,冲突的时候按照不同的样式规则优先级应用样式。这句话什么意思,比如说下面的代码:
h1{color:red;}
h1{color:blue;}
/* 同时定义了同一个标签的同一属性,按照就近原则,应该是蓝色*/
h1{color:red;}
h1{font-size:12px;}
/*同一标签的不同属性分别定义,可以层叠在一起,即两个不同的样式都起作用*/
8、CSS优先级总结
1、根据上面的规则我们来看一段代码,可以看到,权值决定样式,谁的权值大,就用谁的样式,权值相同就使用就近原则,如果没有行内样式,那么!important的权值最大。
<!DOCTYPE html>
<html>
<head>
<title>标题</title>
<meta http-equiv="Content" content="text/html;charse=utf-8">
<style type="text/css">
*{color:black;}/*权值0*/
b{color:purple;}/*权值1*/
p b{color:yellow;}/*权值2*/
p b{color:write !important;}/*权值无穷*/
.classblue{color:blue;}/*权值10*/
div #test2 b{color:gray;}/*权值102*/
#test1 p b{color:orange;}/*权值102*/
div p .calssblue{color:red;}/*权值12*/
</style>
</head>
<body>
<div id="test1">
<p id="test2">所谓<b class="classblue" style="color:pink;">CSS优先级</p>
</div>
</body>
</html>
2、CSS优先级总结图如下:
9、CSS样式命名规则
1、id不要滥用,适当使用class,其他命名规则如下: