CSS知识点
1、CSS样式表
- 1内联样式表
<p style=’color:red；’>helloworld</p>
- 2内部样式表
<head>
<style type=’test/css’>
*{
Margin:0
Padding:0
}
Ul{
Display:none;
}
</style>
</head>
- 3外部样式表
写法和内部样式表一致，引入使用link
<head>
<link rel="stylesheet" type="text/css" href="./min.css"/>
</head>
优先级：内联>内部样式表>外部样式表
2、基础选择器4个
2.1 标签选择器：使用标签名作为选择符
Td{
Color:red;
}
2.2 ID选择器：使用标签的ID作为选择符
#info{
Color：red;
}
2.3 类选择器：使用标签的类名作为选择符
.info{
Color:red
}
2.4 通配选择器：选择所有的标签
*{
Color:red;
}
3、符号选择器5个
3.1 逗号选择器：只要满足逗号分隔得任意一个即可
#info,.info{
Color:red;
}
3.2 空格选择器：选择前者的所有子孙级别中满足后者的标签
P span{
Color:red;
}
3.3 >选择器：仅仅是儿子级别
Ul>li{
Color:yellow;
}
3.4 +选择器：必须是相邻的
P+span{
Color:red;
}
3.5 ~选择器：可以是不相邻的
P~span{
Color:red;
}
4、伪类选择器4个
超链接未访问状态
a:link{……}
超链接已访问状态
a:visited{……}
鼠标悬停在超链接上
a:hover{……}
超链接正在访问状态
a:active{……}
注意以上伪类选择器顺序是不能错误的
span:hover{......} 等标签也是可以使用伪类选择器的
5、CSS常用字体样式
5.1 font-family
指定字体，可以为文字指定多个字体，不同字体间用“，”隔开
字体名字中间有空格的，要用引号引起来
5.2 font-size
字体大小,多用px/em单位
5.3 font-style
字体倾斜效果、normal不倾斜、italic倾斜
5.4 font-weight
字体粗细
6、CSS常用文本样式
6.1 text-transform
英文字母大小写转换
capitalize 单词首字母大写
uppercase 全部大写
lowercase 全部小写
6.2 text-decoration
文本的装饰效果
underline 文字加下划线
line-through 文字加删除线
overline 文字加上划线
6.3 text-index
段落内容首行缩进（悬挂缩进），比如用于段落缩进两个汉字：2em
6.4 text-align
文本的水平位置，行标签中才有效果
left，左对齐（默认值）
right,右对齐
center,居中对齐
7、CSS常用背景样式
7.1 background-color
定义标签的背景颜色
7.2 background-image
定义背景图片，可定义多背景
7.3 background-repeat
定义背景图片的显示方式
repeat，图片重复
repeat-x，图片横向重复
repeat-y，图片纵向重复
no-repeat，图片不重复
background-position
7.4 定义背景图片的位置
直接使用两个定位单词，例:background-position: right top;
使用x、y坐标，例:background-position: 20px 30px;
8、CSS常用列表样式
8.1 list-style-type
列表样式类型 disc/circle/square
8.2 list-style-image
列表样式图片
8.3 list-style-position
列表样式位置outside/inside
9、CSS盒子模型
9.1 border（边框）
width,边框的宽度
color,边框的颜色
style,边框的样式: （border-style:dotted、solid、double、dashed; ）
分开单独设置，例：border-width:1px; border-color:#00f; border-style:solid;
四边独立设置
border-left-width:1px;
border-left-color:#00F;
border-left-style:solid;
使用综合属性
border-left:1px #00F solid;
9.2 padding（内边距）
边框和内容之间的空白宽度
注意：这个部分只有空白，不能设置外观样式，颜色等，只能设置空白的宽度
padding的综合设置。例：padding:2px;(四个内边距都为2px)
padding的单边设置。例：padding-left:2px;(左边的边框和内容之间的距离为2px)
9.3 margin（外边距）
标签和它相邻的标签之间的空白宽度
外边距的设置是相叠加的
margin的综合设置。例：margin:10px;(和四边临近的标签的距离都为10px)
margin的单边设置。例：margin-left:10px;(标签距左边10px)
9.4 width和height
只定义内容的大小，不包含边框和边距如果内容太多，超过了width或height，那么默认情况下将忽略width或height的设置
9.5 overflow属性
定义内容超过width和heigth时的显示方式auto 根据情况，如果内容超出了width，则出现横向滚动条，如果内容超过了height，则出现纵向滚动条，否则不显示滚地条
hidden 超出部分被隐藏
10、CSS显示与定位
10.1 display显示
none ：隐藏
block ：“块”元素，前后有换行
inline ：“行内”元素，不能定义尺寸
inline-block：“行内块”元素，可以定义尺寸
10.2 float浮动与清除
会用float将脱离文档流并且向左或右移动，直到浮动到边缘clear会清除浮动，另起一行。可以取值：left，right，both经常见到clear：both就是将新的浮动在原来浮动之后另起一行
10.3 定位
position的值
static，默认值，即使用基于“文档流”的定位从左到右，从上到下排列，不能使用left，top等
relative，相对定位，即在“文档流”的基础上，结合left和top属性，相对定位
absolute，绝对定位，即脱离“文档流”，并基于它的“包含框”，使用left和top属性来定位
fixed，固定定位，即特殊的绝对定位，即它的“包含框”为浏览器
sticky，粘性定位
11、动画渐变
11.1 transform：translate(50px,50px) rotate(45deg) scale(2)
意思为移动50px
旋转45度
放大两倍
11.2 @keyframes myrotate
from{
transform: rotate(0deg);
}
to{
transform: rotate(359deg);
}
animation: myrotate 2s linear infinite;
设置旋转动画
11.3 .target3:hover{
width: 200px;
opacity: 0.1s;
transition: all 2s;
渐变变形
4422
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
