简介
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
引入方式
1.内联引入
<div style="font-size:20px;color:#f00"> call me by your name</div>
2.内嵌引入
<head >
<meta charset="utf-8"/>
<title>css内嵌引入</title>
<style>
div{
font-size:30px;
color:#f00;
}
</style>
3.外部引入
<head >
<meta charset="utf-8"/>
<title>css外部引入</title>
<link rel="stylesheet" href="css1/4.css"/> <!--rel="stylesheet" 告诉浏览器这是一个样式表 href="CSS文件的路径" 链接引入对应的CSS文件-->
</head>
div{
font-size:30px;
color:blue;
}
4.@import导入文件
css文件
@import url(css/03.css)
导入其它css文件
<style>
@import url(css/03.css)
</style>
小结:
1.优先级:link 、style同时存在,就近原则,后写的会覆盖先写的;内联优先级最高
2.link与@import的区别
· link是HTML标签,@import只能在CSS中使用
· link会在网页加载时同时加载,而@import需要网页完全载入才能加载
· link无兼容问题,@import 是CSS2.1以后加入的,兼容性一般
· link可以使用JS脚本控制,而@import不可以
3.各种方式优缺点
· 内联:与HTML混合在一起,代码不美观;内联样式一次,只能对一个标签起作用,如果有多个相同属性样式,需要重复写很多;可维护性差;可复用性差
· 内嵌:可复用性差;维护性一般;与HTML混在一起,不美观
· 外部引入:将CSS与HTML独立出来,代码整洁;可复用性高;可维护性高
选择器
1.标签选择器、class选择器、id选择器、通配符、关系选择器
<!doctype html>
<html>
<head >
<meta charset="utf-8"/>
<title>css选择器</title>
<style>
*{border:1px solid black;} /*通配符:适用于所有元素*/
div{ /*标签选择器*/
width:400px;
height:200px;
background:lightgray;
}
p{ /*标签选择器*/
background-color:lightblue;
}
.mars{ /*class选择器*/
background-color:lightpink;
}
#seal{ /*id选择器*/
background-color:lightgreen;
}
div p{ /*后代选择器*/ /*关系选择器*/
background-color:red;
}
div>a{ /*子级选择器*/
background-color:olive;
}
</style>
</head>
<body>
<div >call me by your name </div>
<div>lady bird</div>
<p>suicide is painless</p>
<p class="mars">and then you </p>
<p id="seal">stand by me</p>
<div>
<a>kris</a>
<p>ulysse
<a>wu</a>
</p>
</div>
<p>raindrops</p>
</body>
</html>
2.伪类
.box1 p{
display:none;
}
.box1:hover p{ /*伪类:hover 鼠标移入时显示*/
display:block;
}
.box2 p{
display:none;
}
.box2:active p{ /*伪类:active 鼠标按下时显示 抬起时隐藏*/
display:block;
}
<div class="box1">
<p>龙之介</p>
</div>
<div class="box2">
<p>地狱变</p>
</div>
1.优先级:!important(属性后面加)>#id选择器>.class选择器>标签选择器>*通配符
2.注意:
· 一个页面中只出现一个id选择器(唯一标识)
·一般不用id作为选择器,因为其优先级较高
· class命名:多个但此时用 - 连接 eg:word1-word2
盒模型一
显示=width+padding+border
(box-sizing:content-box)
1.基本语法
<!doctype html>
<html>
<head >
<meta charset="utf-8"/>
<title>css盒模型</title>
<style>
div{
width:200px;
height:100px;
padding:200px; /*填充*/
border:10px solid hotpink;/*边框 参数:粗细 线型 颜色*/
margin:30px;/*外边距*/
background-color:gold;
}
</style>
</head>
<body>
<div >call me by your name </div>
</body>
</html>
2.padding margin
padding-top:20px; /*默认四个边一样 若想不同 分别设置 */
padding-right:30px;
padding-bottom:20px;
padding-left:40px;
padding:20px 30px 20px 40px; /*顺时针方向:上右下左*/
padding:20px 30px 40px;/*上 右左 下*/
padding:20px 30px; /*上下 右左*/
/*margin与其用法同*/
块级元素水平居中:margin-left:0;margin-right:0;
3.border
border-left:5px solid purple;/*可一起设置*/
border-width:5px; /*也可分开设置*/
border-left-style:dashed;
border-right-style:dotted;
border-top-style:solid;
border-bottom-style:groove;
border-left-color:plum;
4.实例:
p:nth-of-type(1){ /*第一个p标签*/
border-style:solid;
border-width:40px;
border-left-color:pink;
border-right-color:transparent;/*透明*/
border-top-color:transparent;
border-bottom-color:transparent;
}
p:nth-of-type(2){ /*第二个p标签*/
border-style:solid;
border-width:40px;
border-left-color:transparent;
border-right-color:navy;
border-top-color:transparent;
border-bottom-color:transparent;
盒模型二
显示=width
(最初为IE的盒模型,后来在CSS3可以设置属性 box-sizing:border-box;)
两种盒模型对比