CSS简介
为了让网页元素的样式更加丰富,也为了让网页的内容和样式能拆分开,CSS由此思想而诞生,CSS是 Cascading Style Sheets 的首字母缩写,意思是层叠样式表。有了CSS,html中大部分表现样式的标签就废弃不用了,html只负责文档的结构和内容,表现形式完全交给CSS,html文档变得更加简洁。
css基本语法
css的定义方法是:
选择器 { 属性:值; 属性:值; 属性:值;}
选择器是将样式和页面元素关联起来的名称,属性是希望设置的样式属性每个属性有一个或多个值。代码示例:
/*
css注释 ctrl+shift+"/"
*/
div{
width:100px;
height:100px;
color:red
}
新建样式文件
css页面引入方法:
1、外联式:通过link标签,链接到外部样式表到页面中。
<link rel="stylesheet" type="text/css" href="css/main.css">
2、嵌入式:通过style标签,在网页上创建嵌入的样式表。
<style type="text/css">
div{ width:100px; height:100px; color:red }
......
</style>
3、内联式:通过标签的style属性,在标签上直接写样式。
<div style="width:100px; height:100px; color:red ">......</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 第三种页面嵌入样式的方式:外链式,推荐 -->
<link rel="stylesheet" href="css/main.css">
<!-- 第二种页面嵌入样式的方式:内嵌式,部分推荐 指定标签P-->
<style>
p{width:200px;height:200px;background:gold;}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<!-- 第一种页面嵌入样式的方式:行间样式 不推荐使用 颜色也可使用十六进制表示蓝色#0000FF-->
<div style="width:100px;height:100px;background:red">这是一个div标签</div>
<p>这是一个段落</p>
</body>
</html>
CSS文件内容 与第二种方法类似
h1{
width:200px;
height:200px;
background:greenyellow;
}
css文本设置
常用的应用文本的css样式:
-
color 设置文字的颜色,如: color:red;
-
font-size 设置文字的大小,如:font-size:12px;
-
font-family 设置文字的字体,如:font-family:'微软雅黑';
-
font-style 设置字体是否倾斜,如:font-style:'normal'; 设置不倾斜,font-style:'italic';设置文字倾斜
-
font-weight 设置文字是否加粗,如:font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
-
line-height 设置文字的行高,设置行高相当于在每行文字的上下同时加间距, 如:line-height:24px;
-
-
font 同时设置文字的几个属性,写的顺序有兼容问题,建议按照如下顺序写: font:是否加粗 字号/行高 字体;如: font:normal 12px/36px '微软雅黑';
-
text-decoration 设置文字的下划线,如:text-decoration:none; 将文字下划线去掉 可用于去掉网站链接下划线
-
text-indent 设置文字首行缩进,如:text-indent:24px; 设置文字首行缩进24px
-
-
text-align 设置文字水平对齐方式,如text-align:center 设置文字水平居中
css颜色表示法
css颜色值主要有三种表示方法:
1、颜色名表示,比如:red 红色,gold 金色
2、rgb表示,比如:rgb(255,0,0)表示红色
3、16进制数值表示,比如:#ff0000 表示红色,这种可以简写成 #f00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用文本样式</title>
<style type="text/css">
div{
color:green;
/* font-size:20px;
font-family:'Microsoft Yahei';
line-height:40px; */
font:normal 20px/40px 'Microsoft Yahei';
/* text-decoration:underline; */
text-indent:40px;
}
em{
font-style:normal;
color:gold;
}
span{
color:red;
font-size:30px;
}
h1{
font-weight:normal;
}
a{
text-decoration:none;
/* a标签需要转换类型 才能页面居中*/
text-align:center;
}
p{
text-align:center;
}
</style>
</head>
<body>
<h1>样式演示</h1>
<div>
<span>HTML</span>是 <em>HyperText Mark-up Language</em> 的首字母简写,意思是超文本标记语言,超文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,这种语言由一个个的标签组成,用这种语言制作的文件保存的是一个文本文件,文件的扩展名为html或者htm,一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用文本的方式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件渲染成网页,显示的网页可以从一个网页链接跳转到另外一个网页。
</div>
<p>这是一个p标签</p>
<a href="http://www.baidu.com">百度网的链接</a>
</body>
</html>
css选择器
常用的选择器有如下几种:
1、标签选择器
标签选择器,此种选择器影响范围大,建议尽量应用在层级选择器中。
举例:
*{margin:0;padding:0}
div{color:red}
<div>....</div> <!-- 对应以上两条样式 -->
<div class="box">....</div> <!-- 对应以上两条样式 -->
2、id选择器
通过id名来选择元素,元素的id名称不能重复,所以一个样式设置项只能对应于页面上一个元素,不能复用,id名一般给程序使用,所以不推荐使用id作为选择器。
举例:
#box{color:red}
<div id="box">....</div> <!-- 对应以上一条样式,其它元素不允许应用此样式 -->
3、类选择器
通过类名来选择元素,一个类可应用于多个元素,一个元素上也可以使用多个类,应用灵活,可复用,是css中应用最多的一种选择器。id选择器权重高于类选择器,优先显示id选择器的样式。
举例:
.red{color:red}
.big{font-size:20px}
.mt10{margin-top:10px}
<div class="red">....</div>
<h1 class="red big mt10">....</h1>
<p class="red mt10">....</p>
4、层级选择器
主要应用在选择父元素下的子元素,或者子元素下面的子元素,可与标签元素结合使用,减少命名,同时也可以通过层级,防止命名冲突。最高不要超过4层否则会影响性能问题。
举例:
.box span{color:red}
.box .red{color:pink}
.red{color:red}
<div class="box">
<span>....</span>
<a href="#" class="red">....</a>
</div>
<h3 class="red">....</h3>
5、组选择器
多个选择器,如果有同样的样式设置,可以使用组选择器。
举例:
.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}
<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>
6、伪类及伪元素选择器
常用的伪类选择器有hover,表示鼠标悬浮在元素上时的状态(链接变色),伪元素选择器有before和after,它们可以通过样式在元素中插入内容。
.box1:hover{color:red}
.box2:before{content:'行首文字';}
.box3:after{content:'行尾文字';}
<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.link{
font-size:30px;
text-decoration:none;
color:green;
}
.link:hover{
color:gold;
font-weight:bold;
font-style:italic;
}
.box01,.box02{
font-size:20px;
}
/* 在元素前添加内容,且不可选中*/
.box01:before{
content:"· ";
color:red;
}
.box02:after{
content:" 。";
color:red;
}
</style>
</head>
<body>
<a href="http://www.baidu.com" class="link">百度搜索</a>
<div class="box01">这是第一个div</div>
<div class="box02">这是第二个div</div>
</body>
</html>
CSS盒子模型
盒子模型解释
元素在页面中显示成一个方块,类似一个盒子,CSS盒子模型就是使用现实中盒子来做比喻,帮助我们设置元素对应的样式。盒子模型示意图如下:
把元素叫做盒子,设置对应的样式分别为:盒子的宽度(width)、盒子的高度(height)、盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin)。
设置宽高
width:200px; /* 设置盒子的宽度,此宽度是指盒子内容的宽度,不是盒子整体宽度(难点) */
height:200px; /* 设置盒子的高度,此高度是指盒子内容的高度,不是盒子整体高度(难点) */
设置边框
设置一边的边框,比如顶部边框,可以按如下设置:
border-top-color:red; /* 设置顶部边框颜色为红色 */
border-top-width:10px; /* 设置顶部边框粗细为10px */
border-top-style:solid; /* 设置顶部边框的线性为实线,常用的有:solid(实线)
dashed(虚线) dotted(点线); */
上面三句可以简写成一句:
border-top:10px solid red;
设置其它三个边的方法和上面一样,把上面的'top'换成'left'就是设置左边,换成'right'就是设置右边,换成'bottom'就是设置底边。
四个边如果设置一样,可以将四个边的设置合并成一句:
border:10px solid red;
设置内间距padding
设置盒子四边的内间距,可设置如下:
padding-top:20px; /* 设置顶部内间距20px */
padding-left:30px; /* 设置左边内间距30px */
padding-right:40px; /* 设置右边内间距40px */
padding-bottom:50px; /* 设置底部内间距50px */
上面的设置可以简写如下:
padding:20px 40px 50px 30px; /* 四个值按照顺时针方向,分别设置的是 上 右 下 左
四个方向的内边距值。 */
padding后面还可以跟3个值,2个值和1个值,它们分别设置的项目如下:
padding:20px 40px 50px; /* 设置顶部内边距为20px,左右内边距为40px,底部内边距为50px */
padding:20px 40px; /* 设置上下内边距为20px,左右内边距为40px*/
padding:20px; /* 设置四边内边距为20px */
设置外间距margin
外边距的设置方法和padding的设置方法相同,将上面设置项中的'padding'换成'margin'就是外边距设置方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style type="text/css">
.box{
width:200px;
height:200px;
background-color:gold;
/* border-top-color:#000;
border-top-width:10px; */
/* 实线: solid 虚线:dashed 点线:dotted */
/* border-top-style:solid; */
/* border-top:10px solid #000;
border-left:10px dashed #000;
border-right:10px dotted #000;
border-bottom:10px solid #000; */
border:10px solid #000;
/* padding-top:20px;
padding-left:40px;
padding-right:80px;
padding-bottom:100px; */
/*
分别设置盒子的 上边 右边 下边 左边 的padding值
padding:20px 80px 100px 40px;
*/
/* 分别设置盒子的 上边 左右 下边的padding值
padding:20px 80px 100px;
*/
/* 分别设置盒子的 上下 左右 的padding值
padding:20px 80px;*/
/* 同时设置四个边的padding是20px*/
padding:20px;
/* margin-top:100px;
margin-left:100px; */
margin:100px 0 0 100px;
}
</style>
</head>
<body>
<div class="box">元素在页面中显示成一个方块,类似一个盒子,CSS盒子模型就是使用现实中盒子来做比喻,帮助我们设置元素对应的样式。元素在页面中显示成一个方块,类似一个盒子,CSS盒子模型就是使用现实中盒子来做比喻,帮助我们设置元素对应的样</div>
</body>
</html>
盒模型的实际尺寸
盒子的width和height设置的是盒子内容的宽和高,不是盒子本身的宽和高,盒子的真实尺寸计算公式如下:
- 盒子宽度 = width + padding左右 + border左右
- 盒子高度 = height + padding上下 + border上下
盒模型使用技巧及相关问题
margin相关技巧
1、设置元素水平居中: margin:x auto;
2、margin负值让元素位移及边框合并
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
width:200px;
height:200px;
background-color:gold;
/* margin:50px auto 100px auto; */
/* 左右水平居中 相对于浏览器 */
margin:50px auto 100px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/* 去掉body默认的margin值 */
body{
margin:0;
}
.box{
width:202px;
height:156px;
background-color:pink;
margin:50px auto 0;
}
.box div{
width:200px;
height:30px;
border:1px solid green;
background-color:gold;
/* 通过设置为负值 抵消各个Div边框 */
margin-top:-1px;
/* border-bottom:0px; */
}
/* .box .last{
border-bottom:1px solid green;
} */
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div class="last"></div>
</div>
</body>
</html>
外边距合并
外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。解决方法如下:
1、使用这种特性
2、设置一边的外边距,一般设置margin-top(推荐)
3、将元素浮动或者定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box01,.box02{
width:200px;
height:200px;
background-color:gold;
}
.box01{
/*两个margin相遇合并成一个,值为两种中的最大值*/
margin-bottom:30px;
}
.box02{
margin-top:20px;
}
</style>
</head>
<body>
<div class="box01">1</div>
<div class="box02">2</div>
</body>
</html>
margin-top 塌陷
在两个盒子嵌套时候,内部的盒子设置的margin-top会加到外边的盒子上,导致内部的盒子margin-top设置失败,解决方法如下:
1、外部盒子设置一个边框
2、外部盒子设置 overflow:hidden
3、使用伪元素类:(常用)
.clearfix:before{
content: '';
display:table;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/* 第三种解决塌陷的方法 */
.clearfix:before{
content:"";
display:table;
}
.con{
width:300px;
height:300px;
background-color:gold;
/* border:1px solid #000; 第一种解决塌陷的方法 */
/* overflow:hidden; 第二种解决塌陷的方法 */
}
.box{
width:200px;
height:100px;
background-color:green;
margin-top:100px;
margin-left:50px;
}
</style>
</head>
<body>
<div class="con clearfix">
<div class="box"></div>
</div>
</body>
</html>
css元素溢出
当子元素的尺寸超过父元素的尺寸时,需要设置父元素显示溢出的子元素的方式,设置的方法是通过overflow属性来设置。
overflow的设置项:
1、visible 默认值。内容不会被修剪,会呈现在元素框之外。
2、hidden 内容会被修剪,并且其余内容是不可见的,此属性还有清除浮动、清除margin-top塌陷的功能。
3、scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
4、auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
5、inherit 规定应该从父元素继承 overflow 属性的值。
元素溢出示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素溢出</title>
<style type="text/css">
.box{
width:300px;
/* 不限制高度 内容会自动撑开,不会溢出*/
height:200px;
border:1px solid #000;
margin:50px auto 0;
background-color:gold;
line-height:30px;
/*
visible:缺省值,溢出的元素可见;
hidden:将溢出的元素裁切隐藏
scroll:显示滚动条,不管是否溢出;
auto:溢出的时候产生滚动条,不溢出的时候不显示滚动条
*/
overflow:auto;
}
</style>
</head>
<body>
<div class="box">当子元素的尺寸超过父元素的尺寸时,需要设置父元素显示溢出的子元素的方式,设置的方法是通过overflow属性来设置。当子元素的尺寸超过父元素的尺寸时,需要设置父元素显示溢出的子元素的方式,设置的方法是通过overflow属性来设置。当子元素的尺寸超过父元素的尺寸时,需要设置父元素显示溢出的子元素的方式,设置的方法是通过overflow属性来设置。</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 表格整体样式 */
.tablestyle01{
width:400px;
height:200px;
border:1px solid #000;
/* 设置边线合并 */
border-collapse:collapse;
}
/* 表格表头单元格样式 */
.tablestyle01 th{
border:1px solid #000;
background:blue;
color:white;
}
/* 表格普通单元格样式 */
.tablestyle01 td{
border:1px solid #000;
/* 设置文字水平对齐方式 */
text-align:center;
}
</style>
</head>
<body>
<table class="tablestyle01">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td rowspan="2">4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td colspan="4">1</td>
</tr>
</table>
</body>
</html>