1:HTML相当一个裸体的人,CSS给人穿上各种衣服,JavaScript动起来
2:CSS(给HTML标签设置样式).
1:CSS定义:
层叠样式表
2:CSS语法:
选择器 {k1:v1;k2:v2...}
3:CSS代码存在的位置
1.直接写在标签中的style属性
2.写在head标签中的style标签内
3.写在单独的CSS文件中,通过link标签引用
4.CSS选择器(定义如何在HTML中找标签)
1.基本选择器
1.ID选择器 --> #p1
2.元素选择器 --> div
3.类选择器 -->.c1
4.通用选择器 -->*
2.组合选择器
1.子子孙孙选择器(后代选择器) --> div p
2.儿子选择器 --> div>p
3.毗邻选择器(紧挨着下面的标签) -->div+p
4.弟弟选择器(同级下面所有的标签)--> div~p
3.属性选择器
1.有某个属性的标签 -->div[title]
2.有属性并且属性值等于我给定的值 --> div[title='hello']
4.分组和嵌套 :
1.为了避免重复,两个CSS中共同的项可以使用分组
分组应用于多个选择器找到标签应用相同的样式 --> div,p {color:green}
2.基本选择器之间可以任意嵌套组合使用 --> .c1>p
5.伪类选择器:根据标签的不同的状态设定不同的样式:
div:hover {color:red}
input:focus {color:red}
a:visited {color:red}
,伪元素选择器
5.选择器的优先级
1.当选择器相同的时候,谁最后加载就听谁的
2.当选择器不同的时候
1.内联样式(1000) > ID选择器(100) > class选择器(10) > 元素选择器(1) > 继承(0) --权重计算永不进位
2.不讲道理的!important
基本选择器:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>基本选择器</title>
<!--<style>-->
<!--p {color: green}-->
<!--</style>-->
<style>
#p1 {color:red}
#p2 {color:green}
/*所有div标签*/
div {color:blue}
/*有a1这个class标签*/
.a1 {color:orange}
.a2 {color:darkblue}
/*有a1这个class的i标签*/
i.a1 {color:darkred}
/*通用*/
* {color:black}
</style>
<link rel="stylesheet" href="01.css">
</head>
<body>
<!--<p style="color: red">Hello world!</p>-->
<p class="a1 a2 a3">御天荒神</p>
<p>御天荒神</p>
<p id="p1">御天荒神</p>
<p id="p2">御天荒神</p>
<p>御天荒神</p>
<p>御天荒神</p>
<p>御天荒神</p>
<div>金光御九界</div>
<div>金光御九界</div>
<span class="a1">霹雳布袋戏</span>
<br>
<span class="a1">霹雳布袋戏</span>
<p class="a1">霹雳布袋戏p</p>
<i class="a1">霹雳布袋戏i</i>
</body>
</html>
组合选择器:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>组合选择器</title>
<style>
/*找儿子标签*/
li>a {color:red}
/*子子孙孙中找标签*/
#d1 {color:chartreuse}
/*毗邻选择器,找往下紧挨着的*/
div+p {color:crimson}
/*弟弟选择器:同级往下找*/
#d2~* {color:fuchsia}
#d2~p {color:pink}
</style>
</head>
<body>
<ul>
<li><a href="">手机</a></li>
<li><a href="">电脑</a></li>
<li><a href="">电视</a></li>
</ul>
<ol>
<li><p><a href="">纤尘往事</a></p></li>
</ol>
<div id="d1">
<div>
<div>
<p>人生一大戳</p>
</div>
<p>人生一小戳</p>
</div>
</div>
<br>
<p>毗邻在上</p>
<div><b>毗邻</b></div>
<p>毗邻在下</p>
<hr>
<div id="d2">无心之剑</div>
<p>剑心剑</p>
<a href="">剑中剑</a>
<br>
<i>楼至韦驮</i>
</body>
</html>
属性选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
div[qs] {color:green}
div[qs='nb2'] {color:orange}
div[title*='hello'] {color:blueviolet}
div[title~='hello'] {color:deeppink}
</style>
</head>
<body>
<div id="b1" class="c1" qs="nb">骑士计划</div>
<div qs="nb2">吃屎计划</div>
<div>学python</div>
<div title="鼠标移上去的提示"></div>
<div title="helloworld">helloworld</div>
<div title="hello world">hello world</div>
</body>
分组和嵌套:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>分组和嵌套</title>
<style>
/*#d1 {color:red}*/
/*.c1 {color:red}*/
/*分组*/
#d1,.c1 {color:blueviolet}
</style>
</head>
<body>
<div id="d1">愿你过得好</div>
<p class="c1">神说赐我一个愿望</p>
<p>我说愿天下同</p>
<i class="c1">假的</i>
<hr>
</body>
</html>
伪类选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style>
/*<!--未访问过的地址-->*/
a:link {color:red;}
/*<!--访问过的地址-->*/
a:visited {color:gold}
/*鼠标移上去之后,我才给你改变颜色状态*/
span:hover {color:green;}
/*选定的链接:a标签被点击的哪一刻*/
a:active {color:deepskyblue}
/*input输入框获取焦点时的样式*/
input:focus {
outline:none;
background-color:red;
}
</style>
</head>
<body>
<a href="http://4399.com">没有访问过的地址</a>
<a href="http://www.taobao.com">访问过的地址</a>
<span>帝如来</span>
<a href="http://www.jd.com">京东商城</a>
<hr>
<input type="text">
</body>
</html>
伪元素选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>伪元素选择器</title>
<style>
div:first-letter {color:red;font-size: 48px}
p:before {content: '*';color:gray;}
p:after {content:'#';color:red}
</style>
</head>
<body>
<div class="c1">该书汇集了卡耐基的思想精华和最激动人心的内容，是作者最成功的励志经典</div>
<p>该书汇集了卡耐基的思想精华和最激动人心的内容，是作者最成功的励志经典</p>
<p>该书汇集了卡耐基的思想精华和最激动人心的内容，是作者最成功的励志经典</p>
<p>该书汇集了卡耐基的思想精华和最激动人心的内容，是作者最成功的励志经典</p>
<p>该书汇集了卡耐基的思想精华和最激动人心的内容，是作者最成功的励志经典</p>
</body>
</html>
选择器的优先级
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>选择器的优先级</title>
<style>
#p1 {color:red}
#p1 {color:green}
</style>
<link rel="stylesheet" href="01.css">
<style>
/*100*/
#p1 {color:lightblue}
/*20*/
.c1>.c2 {color:yellow}
/*10*/
.c2 {color:green}
/*1*/
p {color:red}
/*p {color:red!important;}*/
</style>
</head>
<body>
<div class="c1">
<p id="p1" class="c2">楼至韦驮</p>
</div>
</body>
</html>
综合应用:blog
HTML
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="02.css">
</head>
<body>
<div class="left">
<div class="photo">
<img src="123.png" alt="sorry">
</div>
<div class="name">御龙天</div>
<div class="c1">蠢材,什么都不会,世事如棋,乾坤莫测!</div>
<div class="a1">
<ul>
<li><a href="">关于我</a></li>
<li><a href="">微博</a></li>
<li><a href="">公众号</a></li>
</ul>
</div>
<div class="a2">
<ul>
<li><a href="">#JavaScript</a></li>
<li><a href="">#Python</a></li>
<li><a href="">#Going</a></li>
</ul>
</div>
</div>
<div class="right">
<div class="b2">
<div class="d1">
<a class="atr" href="">霹雳布袋戏</a>
<span class="atr0">2018-10-12</span>
</div>
<div class="atr1">倚筝天波观浩渺，苍音掀涛洗星辰；白虹贯日扫魔荡，明玥当空照古今。</div>
<div class="d2">
<span class="atr2">#HTML</span>
<span class="atr2">#CSS</span>
</div>
</div>
<div class="b2">
<div class="d1">
<a class="atr" href="">霹雳布袋戏</a>
<span class="atr0">2018-10-12</span>
</div>
<div class="atr1">倚筝天波观浩渺，苍音掀涛洗星辰；白虹贯日扫魔荡，明玥当空照古今。</div>
<div class="d2">
<span class="atr2">#HTML</span>
<span class="atr2">#CSS</span>
</div>
</div>
<div class="b2">
<div class="d1">
<a class="atr" href="">霹雳布袋戏</a>
<span class="atr0">2018-10-12</span>
</div>
<div class="atr1">倚筝天波观浩渺，苍音掀涛洗星辰；白虹贯日扫魔荡，明玥当空照古今。</div>
<div class="d2">
<span class="atr2">#HTML</span>
<span class="atr2">#CSS</span>
</div>
</div>
</div>
</body>
</html>
CSS
/*公用部分*/
body {
margin:0;
}
a {text-decoration: none}
/*左边样式*/
.left {
float:left;
20%;
background-color:rgba(0,0,0,0.4);
position:fixed;
top:0;
left:0;
bottom:0;
color:#eee;
}
/*博客标题*/
.name,.a1,.a2 {
text-align:center;
color: black;
}
/*博客签名*/
.c1 {
color:red;
font-size:14px;
margin:20px;
}
.a1 a:hover,.a2 a:hover {
color: green;
}
/*联系方式与标签*/
.a1>ul,.a2>ul {
list-style-type:none;
padding:0;
margin:0;
}
.a1 a,.a2 a {
color:blueviolet;
font-size:12px;
font-weight: bold;
}
.a1 {
margin-bottom:20px;
}
/*右边样式*/
.right {
float:right;
80%;
background-color:rgba(0,0,0,0.1);
padding:-20px 20px 20px 20px;
}
.b2 {
padding:20px 20px 20px 20px;
}
.d1,.d2,.atr1{
background-color:white;
border:1px solid #eee;
height:30px;
}
.d1 a:hover {
color:fuchsia;
}
/*动态效果*/
.b2:hover {
box-shadow:0 5px 10px rgba(0,0,0,0.2);
transform:translate3d(0,-2px,0);
transition:all .2s linear;
}
.atr0 {
float:right;
padding-right:20px;
line-height:30px;
}
.atr,.atr1,.d2 {
padding-left:20px;
line-height:30px;
}
.d1 {
border-left:3px solid red ;
}
/*头像*/
.photo {
height:180px;
180px;
border:1px solid white;
border-radius:50%;
overflow:hidden;
margin:20px auto;
}