0.css的发展史
1996 发布第一个版本
2004 年发布的2.01版本
2010 最新版本3.0 版本。
-->
1.图片和文本的对齐方式
/* vertical-align: middle; 中间*/
/* vertical-align: bottom; 下方 默认值*/
/* vertical-align: top; 上方*/
2.文本样式
1.文字颜色
/* color:red; */
/* color: #000; 黑色*/
/* color: rgb(255, 0, 0); */
/* color: rgba(255, 0, 0, .9); */
/* rgba();设置透明色 透明度的0.9 可以写成 .9 */
2.文本的排列方式
/* text-align: left; */
/* 将文本排到左边 默认值就是左边 */
/* text-align: right; */
/* 将文本排到右边 */
/* text-align: center; */
/* 将文本居中 */
3.盒子的样式
/* 设置文本首行缩进 */
/* text-indent: 20px; */
/* width: 800px;
height: 100px; */
/* 设置文本的行高 */
/* line-height: 100px; */
/* 设置行高等于高度，并且再设置text-align:center 就可以让文本水平垂直居中 */
/* 设置文本装饰 */
/* text-decoration: none; */
/* 默认值为none */
4.下划线
/* 给文本添加下划线 */
/* text-decoration: underline; */
/* 给文本上方添加一条线 */
/* text-decoration: overline; */
/* 给文本加上一条线，穿过这个文本 */
/* text-decoration: line-through; */
/* text-decoration: none; */
/* 可以去掉a标签默认的下划线 */
5.css的字体样式
/* 设置P标签里面的字体为16px */
font-size: 30px;
/* 设置P标签里面的字体类型为 幼圆*/
font-family: "幼圆";
/* 设置P标签里面的字体样式为 倾斜 */
font-style: italic;
/* 设置P标签里面的字体粗细 */
/* font-weight: bold; 加粗 */
/*font-weight: bolder;
在bold的基础上，再加粗 */
/* font-weight: lighter; 变得更细*/
/* font-weight: 100-900; 常用400 600 900 */
font-weight: 400;
font: italic 900 50px "楷体";
/* (字体样式的简写)font: font-style font-weight font-size font-family */
3.css引入样式的方式和优先级
/* 外部引入第二种 导入css */
/* @import url(./css/css\ 3种引入方式.css); */
</div>
我是段落标签
行内样式>内部样式>外部样式
4.a标签的伪类
a:link{
/* 未访问时候的样式 */
color: springgreen;
}
a:visited{
/* 访问过后的样式 */
color: palegoldenrod;
}
a:hover{
/* 鼠标悬浮上方的样式 */
color: skyblue;
}
a:active{
/* 鼠标点击未松开时候的样式 */
color: slateblue;
}
5.css的基本语法
</div>
h1{
color:red;
/*字体默认颜色是黑色*/
}
选择器{
声明1；(声明里面包含了属性名和属性值)
声明2；
}
h1{
color:red;
}
-->
我是h1标签
6.css选择器
1.三种基本的选择器
/* 直接用标签改变样式，这个标签就称作
标签选择器 */
p{
color: blue;
}
h2{
color: skyblue;
}
/* 类选择器 可以给多个标签设置一样的类名 */
.c{
font-size: 50px;
}
/* id选择器 一个id名只能对一个标签（唯一性）*/
#d{
font-size: 30px;
color: green;
}
2.子代选择器后代选择器
/* .outer>p{ */
/* 子代选择器 父元素>子元素 */
/* color: slateblue; */
/* } */
.outer p{
/* 后代选择器 祖先元素 后代元素{} */
color: red;
}
3.3种选择器的优先级
id 最大 --- class ---标签最小
7.补充span标签
行内块元素，没有实际意义
