2--DIV CSS基础
1.DIV CSS样式
CSS指的是层叠样式表（Cascading Style Sheets），也称级联样式表，是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS描述了如何在屏幕、纸张或其他媒体上显示HTML元素，可以同时控制多张网页的布局。
DIV是HTML的一个标签，CSS是一个样式表。
2.样式表类型
2.1 嵌入样式
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .嵌入样式{ color: blue; width: 100px; height: 100px; background: red; } </style> </head> <body> <div class="嵌入样式"> 文本内容1 </div> </body> </html>
2.2 外部样式
建立外部css文件1并引入
<link rel="stylesheet" href="css/外部样式.css" />
外部css文件1还可以引入外部css文件2
@import url("外部样式+.css");
.嵌入样式{
color: blue;
width: 100px;
height: 100px;
background: red;
}
2.3 内联样式
<div style="color: red;width: 100px;height: 100px;background: blue;"> 文本内容2 </div>
3.注释
/* 注释内容 */
4.样式选择器
CSS选择器用于查找（或选取）要设置样式的HTML元素
4.1 元素选择器
元素选择器根据元素名称来选择HTML元素
p{
color: red;
text-align: center;
}
<p>元素选择器</p>
div{
color: red;
text-align: center;
}
<div>元素选择器</div>
4.2 ID选择器
ID 选择器选择有特定id属性的HTML 元素
#part1{
color: blue;
text-align: center;
}
<p id="part1">ID选择器</p>
4.3 类选择器
类选择器选择有特定 class 属性的 HTML 元素
.part2{
color: black;
text-align: center;
}
<p class="part2">类选择器</p>
4.4 通用选择器
通用选择器（*）选择页面上的所有的 HTML 元素
*{
color: brown;
text-align: left;
}
4.5 分组选择器
分组选择器选取所有具有相同样式定义的 HTML 元素
h1,h2{
color: pink;
text-align: left;
}
5.背景
CSS 背景属性用于定义元素的背景效果
body{
background: url(img/txt.jpg) no-repeat scroll;
}
background-color：规定要使用的背景颜色
background-position：规定背景图像的位置
background-size：规定背景图片的尺寸
background-origin：规定背景图片的定位区域
background-image：规定要使用的背景图像
background-clip：规定背景的绘制区域
background-repeat：规定如何重复背景图像
repeat（默认）：背景图像在垂直方向和水平方向重复
repeat-x：背景图像在水平方向重复
repeat-y：背景图像在垂直方向重复
no-repeat：背景图像仅显示一次
inherit：规定应该从父元素继承 background 属性的设置
background-attachment：规定背景图像是否固定或者随着页面的内容滚动
background-attachment：fixed：固定，不随内容的滚动而滚动
background-attachment：scroll：滚动，随内容的滚动而滚动
6.边框
CSS 边框属性用于指定元素边框的样式、宽度和颜色
.part3{
width: 200px;
height: 200px;
border: solid 50px red;
}
边框样式值：none，hidden，dotted，dashed，solid，double
border-left：设置左边框，一般单独设置左边框样式使用
border-right：设置右边框，一般单独设置右边框样式使用
border-top：设置上边框，一般单独设置上边框样式使用
border-bottom：设置下边框，一般单独设置下边框样式使用
7.文字属性
color：文字颜色
font-size：文字大小
font-weight：文字粗细
font-family：文字字体
font-variant：字体变体（small-caps）
small-caps：小写字母转换为大写字母
8.文本属性
text-align：文本对齐（right/left/center）
letter-spacing:：字间距
text-indent：首行缩进
line-height：行间距
text-decoration：文本线（none/underline/overline/line-through）
underline：定义文本上的下划线
overline：定义文本上的上划线
line-through：定义文本上的中划线