css的基本样式
font-size: 设置元素的字体大小
单位:px,像素
text-align:设置文本在元素内水平方向的位置
值:center:水平居中
left / start:水平居左
right / end:水平居右
font-weight:设置字体加粗
值: normal:默认值,定义标准字体
bold:定义加粗文本
bolder:特粗体,相当于strong和b的作用
lighter:定义细体文本
100-900:定义字符的粗细,400相等于默认值normal,700等同与粗体文本
text-decoration:文本装饰
值:none:去除文本装饰,比如a标签的下划线
line-through: 添加删除线
underline:添加下划线
overline:添加顶部线
text-indent: 设置段落首行缩进距离
单位:em:相当于当前元素的字体大小
font-family: 设置字体类型,字体家族
font-style: 设置元素字体风格
值:normal:默认值,标准的字体样式
italic:定义斜体文本
inherit:规定当前元素继承父元素的字体样式
oblique:文本为倾斜的状态
width : 宽度
单位:px,像素
百分比:%,占父元素宽度的百分之多少
注意:当元素没有设置宽度时,块元素宽度时父元素的100%,行内元素宽度靠文本内容撑开
height : 高度
单位:px,像素
百分比:%,占父元素宽度的百分之多少(要父元素在有固定高度的情况下使用)
注意:单元素没有设置宽度时,靠内容撑出高度,内容是浮动元素/绝对定位/固定定位除外
background-color : 设置元素的背景颜色
line-height: 设置行高,行间距
作用:让文本在行间距内垂直居中,不允许使用负值
值:numal:设置合理的行间距
numder:设置数字,此数字会与字体大小相乘来设置行间距
百分比:相当于当前文字大小的百分比进行行间距
letter-spacing : 字间距,设置字符与字符之间的间距
text-transform : 字体转换
值:uppercase:大写英文
lowercase:小写英文
capitalize:单词首字母大写
参考代码(自由复制)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css的基本样式</title>
<style>
font-size: 30px;
text-align: center;
text-align: left;
text-align: right;
}
a{
font-weight:normal;
text-decoration:underline;
}
p{
text-indent: 2em;
font-family: "宋体";
font-style: normal;
line-height: 2;
}
span{
font-size: 30px;
color: fuchsia;
}
div{
width: 100%;
height: 100px;
background-color: deepskyblue;
}
.div1{
width: 200px;
height: 400px;
background-color: aquamarine;
line-height: 400px;
/* line-height: numal; */
/* line-height: 130%; */
}
h3{
letter-spacing: 20px;
text-transform: uppercase;
}
</style>
</head>
<body>
<h1>css文本样式</h1>
<a href="https://www.baidu.com/">百度一下</a>
<p>  所幸皆为美好,所行不负年少。</p>
<p>  你的生活中,有清晨灿烂的朝阳,傍晚辉煌的<span>暮光</span>,有真心待你的好友,有爱你至深的亲人,有第一场雪时吃的一碗麻辣烫,也有捂在掌心温热的奶茶。你看,这些都是生活赋予你的,简简单单又实实在在的美好</p>
<div>
  走到生命的哪一个阶段,都该喜欢那一段时光,完成那一阶段该完成的职责,顺生而行,不沉迷过去,不狂热地期待着未来,生命这样就好。不管正经历着怎样的挣扎与挑战,或许我们都只有一个选择:虽然痛苦,却依然要快乐,并相信未来
</div>
<div class="div1">想开一间杂货铺</div>
<h3>第一行</h3>
<h3>第二行</h3>
<h3>want you to be happy. But I want to be the reason.</h3>
</body>
</html>
盒子模型
1 . 什么是盒子模型
盒子模型(Box Model)就是把html元素本身看作是一个矩形盒子,每个矩形都是由内容(content),内边距(padding),边框(border),外边距(margin)组成,每个盒子除了有自己的大小之外,还会影响其他盒子的位置
2 . 盒子的特性:
每个盒子都有四部分组成:内容(content),内边距(padding),边框(border),外边距(margin)
每个属性都包括四部分:上,下,左,右
3 . 标准盒子和怪异盒子模型的表现效果的区别:
( 1. 标准盒子中的width值的是内容区域(content)的宽度,高值的也是内容区域(content)的高度
标准盒子模型的大小=content+padding+border+margin
( 2. 怪异盒子模型中width指的内容content+内边距padding+边框border
怪异盒子模型的大小=width(content+padding+border)+margin
元素盒子模型
box-sizing: 盒子模型尺寸的计算;
content-box:默认值,按照标准盒子进行计算。
border-box:计算宽高时按照IE盒模型进行计算。
参考代码(自由复制)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素盒模型</title>
<style>
#d1{
width: 50px;
height: 50px;
border: 10px solid;
padding: 10px;
}
#d2{
width: 50px;
height: 50px;
border: 10px solid;
padding: 20px;
box-sizing: border-box;
}
section{
width: 100%;
height: 50px;
border: 5px solid red;
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="d1"></div>
<br>
<div id="d2"></div>
<section></section>
</body>
</html>
内边距和外边距
1. padding:内边距
作用:能撑大盒子,调整元素内容的位置。
距离:从元素的边框(border)开始到内部的内容(content)之间的距离。
语法结构:
一、属性为padding,通过值控制不同边的内边距。
1.一个值:同时设置四个边的内边距;
2.两个值:分别表示上下、左右内边距;
3.三个值:分别表示上,左右,下内边距;
4.四个值:分别表示上右下左内边距。
二、通过属性 padding-方向 控制四个边的内边距,设置单方向内边距。
padding-top: 50px;
padding-right: 50px;
padding-bottom: 50px;
padding-left: 50px;
2. margin:外边距
作用:元素添加外边距后会移动元素的位置,调整元素与元素之间的距离。
距离:从自身的边框开始,到另一个元素边框之间的距离。
语法结构:
一、属性为margin,通过值控制不同边的外边距。
1.一个值:同时设置四个边的外边距;
2.两个值:分别表示上下、左右外边距;
3.三个值:分别表示上,左右,下外边距;
4.四个值:分别表示上右下左外边距。
二、通过属性 margin-方向 控制四个边的外边距,设置单方向外边距。
margin-top: 50px;
margin-right: 50px;
margin-bottom: 50px;
margin-left: 50px;
参考代码(自由复制)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内边距和外边距</title>
<style>
/* div{
padding: 50px;
width: 50px;
background-color: #ccdf;
} */
#div1{
background-color: #fcf;
border: solid 1px;
/* padding: 20px; */
/* padding: 20px 40px; */
/* padding: 20px 40px 80px; */
/* padding: 20px 40px 80px 120px; */
/* padding-top: 50px;
padding-right: 50px;
padding-bottom: 50px;
padding-left: 50px; */
/* margin: 50px;
margin: 50px 100px;
margin: 50px 100px 150px;
margin: 50px 100px 150px 200px; */
margin-top: 50px;
margin-right: 50px;
margin-bottom: 50px;
margin-left: 50px;
}
.item{
margin: 10px;
background-color: #ccf;
border: #fcf 1px solid;
padding: 20px;
}
</style>
</head>
<body>
<div id="div1">123</div>
<span class="item">第一块</span>
<span class="item">第二块</span>
</body>
</html>
颜色的取值
1 . 使用颜色名(不建议大规模使用,避免有些颜色浏览器不被解析,不同浏览器对颜色的解析有差异)
2 . 使用百分比:
rgb:三种颜色
三个值为最大值表示白色
三个值为最小值表示黑色
三个值相等显示灰色
3 . 使用数值 :
取值范围:0~255
4 . 十六进制 :最常用的方法
5 . rgba : 最后一个值控制颜色的透明度
a的取值范围:0-1,0为完全透视,1为完全不透视
参考代码(自由复制)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>颜色的取值</title>
</head>
<style>
.color_neme{
color: blue;
}
.percentage{
color: rgb(5%, 99%, 99%);
}
.number{
color: rgb(255, 34, 255);
}
.system{
color: #0000ff;
}
.box{
height: 400px;
background-color: rgba(255, 0, 0, 1);
}
</style>
<body>
<div class="color_name">颜色名</div>
<div class="percentage">百分比</div>
<div class="numder">数值</div>
<div class="system">十进制</div>
<div class="box">色盘</div>
</body>
</html>
元素转换
1 . display : 改变元素的布局方式。
值:
block:将元素转换为块元素。
inline:将元素转换为行元素。
inline-block:将元素转换为行内块元素。
none:隐藏一个元素,隐藏后不会显示。
2 . html标签按照布局方式可分为:
块元素,行元素,行内块元素。
3 . 块元素特点:
1.独占一行;
2.可以设置宽高,
如果不设置宽高,则显示默认宽高,如果也没有默认宽高,这显示为内容的宽高。
3.布局方式默认为块元素:p,h1-h6等。
4 . 行元素特点:
1.不独占一行;
2.不能设置宽高;宽高取决于自身的内容;
多个行元素之间会左右排列;
一行到最后显示不下时会自动换行。
3.布局方式默认为行元素:b,a等。
5.行内块元素特点:
1.不独占一行;
2.可以设置宽高;
3.多个行内块元素之间会左右排列;
4.一行到最后显示不下时会自动换行。
5.布局方式默认为行内块:img,input等。
参考代码(自由复制)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素转换</title>
<style>
#d1{
width: 100px;
height: 100px;
background-color: aqua;
}
#d2{
width: 50px;
height: 50px;
background-color: rgb(89, 255, 0);
}
.bg{
background-color: aquamarine;
/* width: 100px;
height: 100px; */
}
button{
width: 100px;
height: 100px;
}
#d3{
width: 100px;
height: 100px;
background-color: #ccdf;
margin: 0 auto;
}
.container{
text-align: center;
}
.box{
background-color: cadetblue;
display: block;
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<div id="d1">qwerqwer</div>
<div id="d2"></div>
<span class="bg">多个行元素之间会左右排列</span>
<span class="bg">多个行元素之间会左右排列</span>
<span class="bg">多个行元素之间会左右排列</span>
<span class="bg">多个行元素之间会左右排列</span>
<span class="bg">多个行元素之间会左右排列</span>
<span class="bg">多个行元素之间会左右排列</span>
<span class="bg">多个行元素之间会左右排列</span>
<span class="bg">多个行元素之间会左右排列</span>
<span class="bg">多个行元素之间会左右排列</span>
<span class="bg">多个行元素之间会左右排列</span>
<span class="bg">多个行元素之间会左右排列</span>
<span class="bg">多个行元素之间会左右排列</span>
<button>确定</button>
<button>取消</button>
<div id="d3"></div>
<p class="container">
<span class="bg">水平居中</span>
</p>
<span class="box">显示为块元素</span>
<span class="box">显示为块元素</span>
<span>山东人富商大贾</span>
</body>
</html>