一、Css简介
1.什么是Css
Css是重叠(层叠)样式表,主要负责标签的美化,美化页面。
Css是单独的一种文件类型,后缀名为.css,也可以写在html文件里面。
一个网页分为三大部分:
结构层:主要由HTML负责页面的结构
表现层:主要由Css负责页面的展示样式,美化页面
行为层:主要由js负责页面和用户的交互效果
2.Css的三种引入方式
行间样式:给标签添加style属性,值就是你要设置的css样式。
嵌入样式:将css代码写在head标签内的style标签内。
外链样式:在head标签内通过link标签的href属性引入外部的css文件。
<head>
<meta charset="UTF-8">
<title>Css使用</title>
<style>
div
{
width: 100px;
height: 100px;
background-color: green;
}
</style>
<link rel="stylesheet" type="text/css" href="./css/democss.css">
</head>
<body>
<div style="width: 100px;height: 100px;background-color:gold"></div>
<div></div><!-- 这个div配合head里的style里的div使用 -->
<div></div><!--这个div配合link中的css文件使用-->
</body>
3.Css选择器
标签选择器:通过标签名来查找元素
选择符:标签名
影响范围最大,一般很少单独使用
id选择器:通过标签的id属性的值来获取元素
选择符:#
id值不能重复,一个id值在一个html文件中只能出现一次,否则js相关代码会报错
影响范围最小
class选择器·:通过元的class属性的值来获取元素
选择符:.
一个标签的class属性可以有多个值,可以被多个标签使用,影响范围在id选择器和标签选择器之间
<head>
<meta charset="UTF-8">
<title>css选择器</title>
<style type="text/css">
/* 标签选择器
通过标签名来选择标签,影响最大,很少单独使用
*/ div{
width: 100px;
height: 100px;
background-color: red;
}
/*id选择器
通过标签id选择标签,选择符#
id值不能重复,一个id在一个html文件中只能出现一次*/
#d3{
width: 100px;
height: 100px;
background-color: yellow;
}
/*class选择器*/
.d{
width: 100px;
height: 100px;
background-color: orange;
}
.d1{
}
.d2{
border: 3px solid red;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div id="d3">3</div>
<div class="d">d</div>
<div class="d d1">d1</div>
<div class="d d2">d2</div>
<div class="d d3">d3</div>
</body>
4.引入方式的优先级
优先级
行间样式>外链式>嵌入式
谁离标签近优先选择
5.三种基本选择器的优先级
标签选择器<类选择器<id选择器
谁的影响范围大谁的优先级就小
6.关系选择器
后代选择器:
选择符:空格
选择指定标签内的所有符合要求的标签,忽略层级关系
子元素选择器:
选择符:>
只获取指定元素的直接子元素
并集选择器(组选择器/并列选择器):
选择符: ,
一次性给多个元素设置相同的值
伪类选择器::hover
当鼠标移入指定元素时,修改当前元素的样式
伪元素选择器:
After 在指定元素内部的后面插入指定的内容
Before 在指定元素的内部前面插入指定的内容
以上两个选择器要配合content使用
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style type="text/css">
/*后代选择器
设置.wrap里的所有p元素*/
.wrap p{
color: red;
}
/*子选择器
设置.wrap里的inner里的p*/
.wrap>p{
color: blue;
}
/*并集选择器
设置wrap里的span和外层的span*/
.wrap>span,span{
color: pink;
}
/*伪类选择器 hover
当鼠标移入指定元素时,修改当前元素的样式*/
/*伪元素选择器 before after
以上需要配合content使用*/
.box{
width: 100px;
height: 100px;
background-color: red;
}
.box:hover{
width: 200px;
height: 200px;
background-color: pink;
color: green;
}
.box:before{
content: '你';
}
.box:after{
content: '!';
}
</style>
</head>
<body>
<div class="wrap">
<div class="inner">
<p>inner里的p</p>
</div>
<p>wrap里的p</p>
<span>wrap里的span</span>
</div>
<p>最外面的p</p>
<span>外层的span</span>
<div class="box">过来啊</div>
</body>
二、Css常用属性
1.颜色
直接使用单词表示
六位十六进制表示,两个一组
十进制表示,rgb()
带透明度的颜色表示,rgba()
<style type="text/css">
div{
width: 100px;
height: 100px;
/*background-color: red;*/
/*background-color: #ff0000;*/
/*background-color: #0f0;*/
/*background-color: #00f;*/
/*background-color: rgb(255,0,0);*/
background-color: rgba(255,0,0,0.8);
/*带透明度*/
}
</style>
2.背景属性
background-color 背景颜色
background-image 背景图片
background-position 图片位置
background-repeat 是否重复
<style>
.box{
width: 400px;
height: 400px;
border:1px solid red;
background-image: url(../img/0.jpg);
background-repeat: no-repeat;
background-position: 90px 90px;
}
.item{
width: 50px;
height: 50px;
border: 1px solid red;
background:url(../img/1.jpg) no-repeat -4px -104px;
}
.item:hover{
background-position: -345px -270px;
}
</style>
3.字体属性
font-size 字体大小
font-weight 字体粗细 bold/800
font-family 字体类型
font-style
normal不倾斜
italic倾斜
color字体颜色
<head>
<meta charset="UTF-8">
<title>字体</title>
<style type="text/css">
.box{
font-size: 50px;
font-weight: bold;/*加粗或800*/
font-family: 楷体,宋体;
/*如果第一个字体没有,那么使用第二个字体*/
/*字体必须用户拥有,如果没有则会显示默认字体样式*/
font-style:italic;
}
em{
font-style: normal;
}
.item1{
width:200px;
height:200px;
border: 1px solid red;
border-top: 1px solid red;
border-bottom: 3px solid pink;
border-right: 3px solid #0f0
border-left:3px solid blue;
}
</style>
</head>
<body>
<div class="box">大海,全是水</div>
<em>斜体</em>
<div class="item1"></div>
</body>
4.边框属性、内间距、外间距
边框属性:
border-top 边框顶部
border-bottom 边框底部
border-left 边框左部
border-right 边框右部
边框样式 solid实线 dotted点状线 dashed虚线
内间距:设置元素边界距离内部内容的距离,会改变元素的实际大小
padding-top
padding-bottom
padding-left
padding-right
外间距:设置元素距离四周元素之间的距离
margin和padding使用方式一样
<style type="text/css">
.box{
width: 100px;
height: 100px;
background-color: red;
/*padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;*/
/*padding: 10px 20px 30px 40px;/*上右下左*/
/*padding: 10px 20px 30px;/*第一个值是上,第二个是左右,第三个是下*/
/*padding: 10px 20px;/*第一个值是上下,第二个值是左右*/
}
.item1,.item2,.item3{
width: 100px;
height:100px;
}
.item1{
border:1px solid red;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
margin-right: 20px;
}
.item2{
border: 1px solid yellow;
}
.item3{
border: 1px solid blue;
margin:0 auto;
}
.item4,.item5{
width: 100px;
height: 100px;
border: 5px solid green;
}
.item5{
margin-top: -5px;
/*margin为负值主要用于边框合并*/
}
</style>
7.盒子模型
使用现实中的盒子来描述页面中的元素的 属性
盒子的实际宽度=width+左border+右border+左padding+右padding
盒子的实际高度=height+上border+下border+上padding+下padding
Box-sizing:border-box 让盒子大小=css样式的实际大小
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style type="text/css">
*{margin=0;padding:0;}
.box1{
width: 100px;
height: 100px;
background-color: yellow;
}
.box2{
width: 100px;
height: 100px;
background: yellow;
border: 20px solid #000;
/*让盒子的实际大小=css设置的实际大小*/
box-sizing: border-box;
}
.box3{
width: 100px;
height: 100px;
background: yellow;
border:20px solid #000;
padding: 20px;
box-sizing: border-box;
}
.box4{
width: 20px;
height: 20px;
background: yellow;
border:20px solid #000;
padding: 20px
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
</body>