引入css样式表方式
1.行内
<div style="设置的属性">行内样式</div>
2.内部样式
在head标签里面加style双标签将代码写在style里面
3.外部样式
将css样式写在一个css文件然后用link标签引入css样式表
快速生产标签
css快速生成
1.字体样式
font-size字体大小 默认大小为16px,页面最小为12px 1em=16px
font-family字体样式
font-weight字体粗细 bold或者700加粗 细体lighter 正常normal后者400
font-style字体倾斜 normal默认正常,italic斜体倾斜
综合写法顺序:斜体,粗细,大小,样式
font:italic 500 20px "宋体";(可以不写宽度和斜体但是必须有大小和样式);
如font:16px "宋体"
2.css外观属性
width宽 height高 border:1px solid #ccc(边框)
文本颜色 color:red(单词表示法)
color:#777(十六进制表示法)
color:rgb(255,234,12) (rgb表示法)0-255之间的数
color:rgba(255,12,1,1)颜色半透明值为0—1
line-height行高 文本垂直居中行高=盒子高
text-align:center(水平对齐方式):center居中 right右对齐 lft左对齐 justify两端对齐
text-indent首行缩进 单位em
text-decoration:none清除下划线 underline下划线 overline上划线 line-through删除线
letter-spacing 字符间距
word-spacing单词间距
文字阴影 text-shadow:水平位置 垂直位置 模糊距离 阴影颜色
3.复合选择器
交集选择器 既符合是个div标签又符合class类名的选择器
/* 1.交集选择器 */
div.box {
color: #f00;
}
并集选择器
同级的多个选择器同时添加样式
p,
span,
b {
color: pink;
}
后代选择器 父级选择器下的某一个选择器
.father .son {
color: purple;
}
直系后代选择器
父子级关系的选择器
.father1>.son1 {
color: red;
}
标签显示模式的转换
display:block块级元素
display:inline行内元素
display:inline-block行内块元素
4背景属性
background-color:red (背景颜色) transparent透明色
background-image 背景图
background-repeat背景平铺方式 no-repeat不平铺
background-position背景定位
background-attachment背景附着
background-size: cover;背景缩放
cover必须保证背景将容器撑满 contain 必须保证自身图片完整
精灵图的三个属性
background-image
background-repeat
background-position
5.
目录
盒子属性
border边框
/* 边框 */
/* border: 边框厚度 边框样式 边框颜色; */
border: 10px solid #0f0;
/* 单独控制某一个方向的边框 */
border-top: 10px solid pink;
border-right: 10px solid #00f;
border-left: 10px solid #0ff;
border-bottom: 10px solid #f0f;
/* 单独控制边框的某一个属性 */
border-width: 2px;
/* 单实线 solid 虚线dashed 点线dotted 双实线double 山脊线groove */
border-style: solid;
border-color: pink;
border-radius边框圆角 设置50%是圆
padding内边距
margin外边距
float浮动
position定位 相对定位relative 绝对定位absolute 固定定位fixed
盒子消失 display:none消失 display:block显示
盒子隐身 visibility:hidden隐身 visibility:visible显示
溢出隐藏
overflow:hidden超出隐藏
overflow:auto超出自动显示滚动条
overflow:scroll不管超出与否,总是显示滚动条
超出文本变为省略号
/* 1.让文本在一行展示 */
white-space: nowrap;
/* 2.设置溢出隐藏 */
overflow: hidden;
/* 3.超出文字变为省略号 */
text-overflow: ellipsis;
鼠标样式 pointer小手 text文本 move十字架 not-allowed禁用