Day02-CSS
2017-09-21 11:29:43 0 举报AI智能生成
开发中常用的CSS知识点
作者其他创作
大纲/内容
概述
什么是CSS：层叠样式表
CSS作用：美化HTML页面,代码复用,将样式和页面进行分离.
CSS的使用：CSS的基本语法
语法
CSS的引入方式：
行内样式：在元素上使用style属性
页面内样式：在<style></style>中定义CSS
外部样式：定义一个CSS文件,引入文件.<link href="xx.css"/>
CSS的选择器
元素选择器：p{}
id选择器:#id{}
类选择器：.类名{}
后代选择器：p span
子元素选择器：p > span
伪元素选择器: a:link{}, a:hover{} ,a:active{},a:visited{}
组合选择器:p,a,div{}
优先级
ID>Class>HTML
同级时选择离元素最近的一个的
#p { color: red }
#p { color: #f60 }
执行颜色为#f60的
常见属性
颜色
color属性定义文本的颜色
color：green
color：#ff6600
color：#f60
简写式
color：rgb（255,255,255）
红(R)、绿(G)、蓝(B) 每个的取值范围0~255
color：rgba（255,255,255,1）
RGBA是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha的(色彩空间)透明度，透明度0~1s
背景
repeat-x 向Y轴重复
repeat-y 向Y轴重复
no-repeat 不重复
纵向（top,center,bottom）
如果使用英文，background-position: top left ,第一个代表纵向，第二个代表横向
1. background-color 背景颜色
2.background-image 背景图片
background-image:url(图片路径)
background-image:none
background-image:url(图片路径)
background-image:none
3.background-repeat 背景重复
repeat 重复平铺满repeat-x 向Y轴重复
repeat-y 向Y轴重复
no-repeat 不重复
4.background-position 背景位置
横向（left,center,right）纵向（top,center,bottom）
如果使用英文，background-position: top left ,第一个代表纵向，第二个代表横向
如果使用数字位置,background-position:20px 20px; 第一个代表横向，第二个代表纵向
简写方式
background:背景颜色 url(图像) 重复 位置
background:#f60 url(images/bg,jpg) no-repeat top center
边框
1.边框风格 border-style
边框风格样式的属性值
1、none 无边框
2、solid 直线边框
3、dashed 虚线边框
4、dotted 点状边框
5、double 双线边框
2.边框宽度 border-width
3.边框颜色 border-color
属性值
1、颜色值的名称
red、green
RGB
rgb(255,255,0)
RGBA
rgba(255,255,0,0.1)
十六位进制
#ff0、#ff0000
简写方式
border：solid 2px #f60
文本
1.text-align:center/left/right;
2.text-decoration:none/underline
3.line-height:10px;
2.text-decoration:none/underline
3.line-height:10px;
字体
建议使用英文，百度 微软雅黑 英文即可可以使用“，”隔开，以确保当字体不存在的时候直接使用下一个
字体属性的连写 font:font-style font-weight font-size font-family;
1.font-size 字体大小
2.font-family 定义字体
font-family：微软雅黑，serif；建议使用英文，百度 微软雅黑 英文即可可以使用“，”隔开，以确保当字体不存在的时候直接使用下一个
3.font-weight 字体加粗
normal(默认值)、bold(粗)、bolder(更粗)、lighter(更细)
4.font-style
normal(默认值)、bold(粗)、bolder(更粗)、lighter(更细)
4.font-style
normal 正常
italic 斜体，比倾斜更倾斜
oblique 倾斜
inherit 继承
字体属性的连写 font:font-style font-weight font-size font-family;
可以省略前两个，但是后面两个必须写且不能省略
列表
list-style-type:none
盒模型
margin:盒子的外边距
padding:盒子的内边距，相当于箱子里面的泡沫
border
width
height
content
计算盒子的宽高
宽：border-left + padding-left + width + padding-right + border-right
高：border-top + padding-top + height + padding-bottom + border-bottom
浮动和定位
浮动
什么是浮动
如何清除浮动
clear:both
使用伪元素
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
浮动常用的两种方式
什么时候使用浮动
注意：使用浮动后造成的后果千奇百怪，如我们只需要清除浮动即可.在开发中我们常常将需要浮动的元素放入一个盒子，然后在盒子上使用"clearfix"清除浮动
定位position
relative 相对
absolute 绝对定位
收藏
收藏
0 条评论
下一页
