一. css是什么,有什么作用?
1、层叠样式表(英文全称:CascadingStyle Sheets)是一种用来表现HTML等文件样式的计算机语言,为html文档结构添加样式。
二、 css的结构和选择器的分类(相同样式,权重高的覆盖权重低的。)
1、css的结构: 选择器 { 样式属性名:属性值 }
2、 选择器:css样式作用的对象。
a) id选择器(不推荐使用):具有某一特定id属性值的元素,权重为100,以#号来定义。如:#name{}
b) 类选择器(推荐使用):具有某一class属性值的一个或者一组元素,权重为10,以.来定义,多个元素可以共用一个class属性。 如:.name{}
c) 元素选择器(推荐使用):以元素名称来作为选择器,权重为1。如:div{}
d) 选择器嵌套(权重累加):用父元素的选择器嵌套子元素的选择器,为选择器指定应用范围。如:ul li{}
e) 选择器分组:将选择器写在同一个样式前,以逗号结尾。如:.box1,.box2{}
f) 通配符(权重0):代表所有元素,以*号来定义。
g) 权重叠加和优先级(这个很重要)
三、css引入方式
一. 在html中引入css的三种方式:(权重相同,谁在后面谁优先,权重不同,谁大谁优先)
a) 内联样式表(不推荐使用,影响html结构,提倡结构与样式分离):在元素的style属性中直接定义样式属性和值以分号结尾,如:<div style="width:100px;heihgt:100px;"></div>
b) 内部样式表(不推荐使用):在style标签中直接定义样式属性和值,如:<style>div{}</style>
c) 外部样式表(推荐使用):通过link标签引入外部css文件,如:<link rel="stylesheet" type="text/css" href="css/style.css">
四、 元素类型与盒模型。
a) 盒模型:元素内容,内边距,外边距,边框。
b) 四种元素类型:块级元素,内联元素,内联块元素,空元素。
五、 background用来设置html元素的背景。
a) background-color用来定义元素的背景颜色,值为颜色代码,如:#fff;
b) background-image用来定义元素的背景图片,值为图片地址,如:url(images/icon.png)
c) background-repeat用来设置背景图片是否平铺。
i. repeat表示平铺。
ii. no-repeat表示不平铺。
iii. repeat-x表示横向平铺。
iv. repeat-y表示纵向平铺。
d) background-position用来设置图像在元素中的位置,默认值为left,top(0%,0%)。
i. 第一个参数表示横向位置,有三个值(left,cener,right),还可以用百分比和px表示,以该元素的宽度作为参照。
ii. 第二参数表示纵向位置,有三个值(top,center,bottom),还可以用百分比和px表示,以该元素的高度作为参照。
iii. 如果只设置了第一个参数,另外一个参数将会是居中(center,50%).
六、 浮动
a) 左浮动float:left;
b) 右浮动float:right;
c) 不浮动float:none;
d) 当浮动元素的父盒子宽度不足时,它会自动换行.
七. 四大定位
a) 静态static定位:文档里正常盒子的定位。
b) 相对定位relative:盒子现在位置距离盒子原来位置有一段偏移的距离。
c) 绝对定位absolute:盒子脱离html文档,相对于某一个拥有(相对定位和绝对定位)的父盒子来定位,如果盒子的父元素都没有(相对定位和绝对定位),它相对于根元素html来定位。
d) 固定定位fixed:盒子相对于浏览器可视区域来定位。
e) 四个偏移属性:上偏移:top,right:右偏移,bottom:下偏移,left:左偏移。
<!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>css基础知识总结</title>
<!--style元素用来定义html文档样式信息,
也称为内部样式表,type定义style元素内容为css -->
<style type="text/css">
/* css样式的结构:选择器{样式属性:属性值}
选择器:css样式作用的对象 */
/* 元素选择器:以元素名称来命令的选择器,如div */
div{
/* 为元素设置宽度,px像素为css尺寸单位 */
width:500px;
/* 为元素设置高度 */
height: 100px;
/* 行高,常用于设置元素垂直方向居中 */
line-height: 100px;
/* 为元素设置背景颜色,颜色值可以是英文,可以是颜色代码(rgb) */
background-color:rgb(34, 46, 216);
/* 与字体相关的css样式 */
/* 设置字体大小 */
font-size: 20px;
/* 设置字体粗细,bold加粗,bolder超粗 */
font-weight:bold;
/* 设置字体风格:normal正常,italic斜体,oblique倾斜 */
font-style: normal;
/* 字体系列,中文以及多个英文单词需要用双引号括起来 */
font-family: "微软雅黑";
/* 设置字体颜色 */
color: palegoldenrod;
/* 文本缩进,常用于设置负值,用于隐藏文字*/
text-indent: 50px;
/* 文本对齐,居中对齐center,两端对齐justify,左对齐left,右对齐right */
text-align:center;
}
</style>
<!-- <link rel="stylesheet" type="text/css" href="css/css基础2.css">:外部样式引入 -->
</head>
<body>
<!--div是一个没有任何意义的元素,在实战中通常当作容器使用 -->
<div>我是一个div我是一个div我是一个div我是一个div</div>
</body>
</html>