/*复习*/
1.选择器
标签选择器 ,类选择器,id选择器, 优先级:id选择器>类选择器>标签选择器
标签选择器
标签名{}
id选择器
#id名{}
类选择器
.类名{}
通配符选择器
*{} /*选择所有元素 一般用来清除内外边距，便于统一管理和设置*/
eg:
*{
margin: 0px;
padding: 0px;
}
1.内部样式
<head>
<style>
选择器
h1{
属性:属性值;
}
</style>
</head>
2.行内样式 <span style="color:red;"></span>
3.外部样式 写在:head里面 <link type="text/css" href="相对路径" rel="stylesheet" />
优先级关系:1>2>3 ? --> 只显示优先级高的 ,不显示优先级低的
4.绝对路径,相对路径
2.三种使用方式 文件引入 ,head头处引入,行内引入
<style>
</style>
<a style=""></a>
3.文本样式 ,字体样式,行样式 text font line (关键字)
颜色: color:颜色值;
文本居中,左对齐,右对齐 text-align:center left,right;
垂直居中:line-heigh:与文本元素高度值一致;
文本属性(text-)和字体属性(font-)
1.文本对齐: text-align
text-align属性规定元素中的文本的水平对齐方式
属性值：none,center,left,right,justify
2.文本颜色: color
text-indent属性规定元素首行缩进的距离，单位建议用em
3.文本修饰: text-decoration
text-decoration属性规定文本修饰的样式
属性值:none(默认),underline(下划线),line-through(横穿文字的线)，inherit(继承父元素的text-decoration属性的值)
4.行高:如果行高的高度等于盒子的高度，可以是本行文本垂直居中，仅适用单行文本
line-height：就是行高的意思，指的是一行的高度
line-height:100px
行高 line-height:
1.针对单行文本垂直居中
针对单行文本垂直居中公式：行高的高度等于盒子的高度，可以使当行文本垂直居中，
注意只适用单行文本。
2.针对多行文本垂直居中
行高的高度不能小于字体的大小，不然上下字之间会紧挨一起。
第一步，一个宽度300*300的盒子，看盒子中一共显示了几行文字，
假如是5行，再看一下行高，如果行高是line-
height:30px; 那么就知道行高*5=150px
第二步，让(盒子的高度-150px)/2=75;
那么设置盒子的padding-top:75px;
同时保证盒子的高度为300px,那么高度改为225px;
字体属性:
1.字体大小: font-size
font-size表示设置字体的大小，如果设置成inherit表示继承父元素的字体大小值
属性值是字体大小
eg: font-size:100px
2.字体粗细: font-weight
font-weight表示设置字体的粗细
属性值:none(默认值，标准粗细)|bold(粗体)|border(更粗)|lighter(更细)|100-900(设置具体粗细，400等同于normal,700等同于bold)|inherit(继承父元素的字体粗细值)
3.字体系列: font-family
font-family:"Microsoft Yahei","微软雅黑","Arial",sans-serif
如果浏览器不支持第一个字体会尝试下一个字体，直到找到能支持的字体为止
4.字体样式: font-style
font-style: 字体;
eg:导航栏实例 float表示浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding:0;
margin:0;
}
ul{
list-style: none;
}
.nav{
width: 960px;
overflow: hidden;
margin: 0 auto;
background-color: purple;
border-radius: 5px;
}
.nav ul li{
float:left;
width: 160px;
height: 40px;
line-height: 40px;
text-align: center;
}
.nav ul li a{
display: block;
text-decoration: none;
width: 160px;
height: 40px;
color: white;
font-size: 20px;
font-family: "Hanzipen SC"；
}
.nav ul li a:hover{
background: red;
font-size: 22px;
text-decoration: underline;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="">导航</a></li>
<li><a href="">导航</a></li>
<li><a href="">导航</a></li>
<li><a href="">导航</a></li>
<li><a href="">导航</a></li>
<li><a href="">导航</a></li>
</ul>
</div>
</body>
</html>
4.背景样式 背景图片的添加一般在body标签上面添加
背景颜色:background-color:颜色值;
背景图片:background-image:url("路径");
背景图片平铺效果 x轴,y轴,不平铺,默认值是在x,y方向上都平铺(repeat):平铺 <==> 重复出现
background-repeat: repeat-x; /*x方向上平铺 y方向上平铺 不平铺 x,y方向上都平铺 从父级元素继承*/
background-repeat: repeat-y;
background-repeat: no-repeat;
background-repeat: repeat;
inherit：规定应该从父元素继承background-repeat属性的设置。
background-repeat: inherit;
背景图片定位:background-position:x轴,y轴;
background-position：属性设置背景图像的起始位置，这个属性设置背景原图像的位置。
背景图片不随窗口滚动而改变:
background-attachment: fixed;
一种简化用法: 属性值顺序随机,想怎末设置就怎末设置
background:red,url(../img/68AFE76E2C1BE146D0B0E10C3F52E81B.jpg),no-repeat,fixed,
5.行内元素和块级元素转换 块级元素和行内元素 区分;
重点 标签分两种等级:行内元素和块级元素
行内元素:(特点);
1.与其他元素并排
2.不能设置宽高,默认宽度是文字的宽度
块级元素:(特点)
1.能独占一行
2.能设置宽高,如果不设置,默认为父级的100%(占满父级标签的宽和高)
块级元素和行内元素的分类：
在HTML的角度来讲，标签分为：
1.文本级标签：p , span , a , b , i , u , em
2.容器级标签：div , h系列 , li , dt ,dd
p：里面只能放文字和图片和表单元素，p里面不能放h和ul，也不能放p。
从CSS的角度讲，CSS的分类和上面的很像，就p不一样：
1.行内元素：除了p之外，所有的文本级标签，都是行内元素。p是个文本级标签，但是是个块级元素。
2.块级元素：所有的容器级标签，都是块级元素，以及p标签。
行内元素和块级元素的转换
将行内元素转化为块级元素:display:block;
将块级元素转换为行内元素:dispaly:inline;
6.盒子模型
盒子模型 margin(外边距) border(边框) padding(内边距) content(内容) --------- 重点
盒模型属性: 盒子模型图片见 img/盒子模型图片.png
1.width:内容的宽度
2.height:内容的高度
3.padding:内边距,边框到内容的距离
4.border:边框,指的是盒子的宽度(盒子形状的线)
5.margin:外边距,盒子边框到附近最近盒子的距离
盒子模型的计算：
1.盒子的真实宽度=width+2*padding+2*border
2.盒子的真是高度=height+2*padding+2*border
3.所以，标准盒模型，width不等于盒子真实宽度，
如果要保持盒子的真是宽度，那么加padding就一定要减width,减padding就一定要加width。
真实的高度同样这样设置。
padding(内边距)：
1.padding：就是内边距的意思，是边框到内容之间的距离。
2.padding的区域是有背景颜色的，并且背景颜色和内容的颜色一样，
也就是说background-color这个属性将填充border内的所有区域。
3.padding的设置：
padding有四个方向，分别描述4个方向的padding。
1.写小属性，分别设置不同方向的padding
padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
2，写综合属性，用空格隔开。
/*上 右 下 左*/
padding: 20px 30px 40px 50px ;
/*上 左右 下*/
padding: 20px 30px 40px;
/* 上下 左右*/
padding: 20px 30px;
/*上下左右*/
padding: 20px;
4.一些标签默认有padding:
比如ul标签，有默认的padding-left值。
那么我们一般在做站的时候，是要清除页面标签中默认的padding和margin。
以便于我们更好的去调整元素的位置。
我们现在初学可以使用通配符选择器
*{
padding:0;
margin:0;
}
But，这种方法效率不高。
所以我们要使用并集选择器来选中页面中应有的标签
（不同背，因为有人已经给咱们写好了这些清除默认的样式表，reset.css）
https://meyerweb.com/eric/tools/css/reset/
border:边框,就是盒子的边框
1.边框border有3个要素:线宽,线型样式,颜色
2.如果颜色不写，默认是黑色。如果粗细不写，不显示边框。
如果只写线性样式，默认的有上下左右 3px的宽度,实体样式，并且黑色的边框。
用法:
2.1按照三要素来写border
border-width: 3px;
border-style: solid;
border-color: blue;
/*
border-width: 5px 10px;
border-style: solid dotted double dashed;
border-color: red green yellow;
*/
2.2按照方向划分：
border-top-width: 10px;
border-top-color: red;
border-top-style: solid;
border-right-width: 10px;
border-right-color: red;
border-right-style: solid;
border-bottom-width: 10px;
border-bottom-color: red;
border-bottom-style: solid;
border-left-width: 10px;
border-left-color: red;
border-left-style:solid;
上面12条语句，相当于 bordr: 10px solid red;/*设置边框 粗细，线型，颜色*/
2.3另外还可以这样：
border-top: 10px solid red;
border-right: 10px solid red;
border-bottom: 10px solid red;
border-left: 10pxb solid red;
2.4无边框设置
border:none；
border：0；
表示border没有设置样式
3.设置圆角边框 border-radius
border-radius: 10px; /*设置圆角边角 圆的半径*/
margin:外边距(表示本边框到其他盒子的最近距离);
margin: 20px auto; 使盒子居中,并且和上边界距离为20px
margin:像素值 auto; 像素值是距离上边界的 设置元素居中对齐
条件:此元素必须为块级元素,而且必须有宽高;
margin:20px,auto; 和上边界距离为20px,元素居中对齐
posted @
2020-12-14 17:24
nanfengnan
阅读(
213)
评论()
编辑
收藏
举报
