javaweb的css部分
自己总结的知识点清单，如果转发请注明出处，尊重原创，虽然写的不怎么样吧，哈哈 ，内容中有些时候是不连贯的，那是本人做的笔记，或者写的感想，不影响阅读。有错误的地方还请批评指正。
css部分
css语法
1.css基本语法
selector{
property:value
}
例如：h1{color:red;font-size:14px}
属性大于1个之后，属性之间用分号隔开
如果值大于一个单词，则需加上引号：
P{font-family:”sansserif”}
2.css高级语法
2.1选择器分组；就是多个元素是同一个样式。
H1,h2,h3,h4,h5,h6{color:red;}
2.2继承，就是下一级的元素没有指定css样式，那么和上一级的相同。
Body{
Color:green;
}
1. css派生选择器
ul li {
……………..}
2. css的id选择器
5.1、选择器
id选择器可以为带有id的HTML元素指定特定的样式
id选择器以#来定义。
5.2、id选择器和派生选择器
目前比较流行的方式是id选择器常常用于建立派生选择器。
3. css的类选择器
1、.类选择器
类选择器以一个点进行显示
2.、class也可以作为派生选择器。
7.css属性选择器。
1、属性选择器
对带有指定属性的HTML元素设置样式。
[属性]{…………..}
2.属性和值选择器。
[属性=值] {………………}
Css样式
1. css样式-背景。
背景。
Css允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。
属性 描述
Background-attachment 背景图像是否固定或者随着页面的其余部分滚动
Background-color 设置元素的背景颜色
Background-image 把图片设置为背景。
Background-position 设置背景图片的起始位置
Background-repeat 设置背景图片是否以及如何重复
Background-size: 规定背景图片的尺寸
Background-origin 规定背景图片的定位区域
Background-clip 规定背景的绘制区域。
Padding是一个内边框。
Background-position:right----------是一个从图片右边，和中间显示，一般不单独使用
应该是这样的。Background-position:right top,也可以添加具体数值和百分比。
2. css文本
css文本属性可以定义文本外观
通过文本属性，可以改变文本颜色、字符间距、对齐方式、装饰文本、对文本缩进
属性 描述
Color 文本颜色
Direction 文本方向
Line-height 行高
Letter-spacing 字符间距
Text-align 对齐元素中的文本
Text-decoration 向文本添加修饰
Text-indent 缩进元素中的文本首行
Text-transform 元素中的字母
Unicode-bidi 设置文本方向
White-space 元素中的空白处理方式。
Word-spacing 字间距。
Text-shadow 向文本中添加阴影
Word-wrap 规定文本的换行规则。
3. css字体
css字体属性定义文本的字体系列、大小、加粗、风格和变形。
属性 描述
Font-family 设置字体系列
Font-size 设置字体尺寸
Font-style 设置字体风格
Font-variant 以小型大写字体或正常字体显示文本
Font-weight 设置字体粗细
4. css链接
4.1、css链接的四种状态
a:link 普通的、未被访问的链接。
a:visited 用户已经访问过得链接
a:hover 鼠标指针位于链接上方
a:active 链接呗点击的时刻
例如：a:visited {
Color:green;
}
4.2、常见的链接方式
Text-decoration属性大多数用于将链接的下划线去掉。
比如
text-decoration:none;
background-color:
5. css列表
css列表属性允许你放置、改变列表标志、或者将图像作为列表项标志。
属性 描述
List-style 简写列表项
List-style-image 列表项图标
List-style-position 列表标志位置
List-style-type 列表类型。
List-style-type -----可以是空心圆，或者序号等
List-style-image:url(“……图片路径”)
List-style :none是没有任何图标
6. css表格
6.1、css表格
Css表格属性可以帮助我们极大的改善表格外观
6.2表格边框
6.3、折叠边框
6.4、表格宽高
6.5、表格文本对齐;
6.6、表格内边距
6.7、表格颜色
属性 描述
Border 设置外边框
Border-collapse 折叠边框，就是合并双边框，变成单边框
Width 表格宽
Height 表格高
Text-align 表格内容居中
Solid 设置边框边缘颜色
7. css轮廓
轮廓的作用主要是用来突出元素
属性 描述
Outline 设置轮廓属性
Outline-color 设置轮廓颜色
Outline-style 设置轮廓的样式
Outline-width 设置轮廓的宽度
Css定位
1. css定位
改变元素在页面中的位置
1.1、 css定位机制
普通流：元素按照其在HTML中的位置顺序决定排布过程
浮动
绝对布局
1.2、 css定位属性
属性 描述
Position 把元素放在一个静态的、相对的、绝对的 或者固定的位置中
Top 元素向上的偏移量
Left 元素向左的偏移量
Right 元素向右的偏移量
Bottom 元素向下的偏移量
Overflow 设置元素溢出其区域发生的事情
Clip 设置元素显示的形状
Vertical-align 设置元素的垂直对齐方式
z-index 设置元素的堆叠顺序。
Position属性：
Static:left/right等都对它不起作用
Relative：相对布局。相对于父容器的位置，可以通过left属性左加上多少数。Right等调整
Absolute：绝对布局，好像是抠出来不在页面，也可以通过left。Right等调整
Fixed：固定布局，可以不随着滚动条的动而动
2. css浮动
2..1浮动
Float属性可用的值：
Left 元素向左浮动
Right 元素向右浮动
None 元素不浮动。
Inherit 从父级继承浮动属性。
2.2、clear属性
去掉浮动属性，包括继承来的浮动属性
Clear属性值
Left、right：去掉元素的左、右浮动
Both:左右两侧均去掉浮动
Inherit：从父级继承来的clear的值
Css盒子模型
1. 盒子模型的内容范围包括
Margin 外边距
Border 边框
Padding 内边距
Content 内容
2. css内边距
内边距在content外、边框内
属性 描述
Padding 设置所有边距
Padding-bottom 设置底边距
Padding-left 设置左边距
Padding-right 设置右边距
Padding-top 设置上边距
3. css边框
我们可以创建出效果出色的边框，并且可以应用于任何元素
边框的样式：
Border-style：定义了10种不同的非继承样式，包括none
边框的单边样式
Border-top-style
Border-left-style
Border-right-style
Border-bottom-style
边框的宽度：
Border-width
边框的单边宽度
Border-top-width
Border- left -width
Border- right -width
Border- bottom -width
边框颜色：
Border-color
单边框颜色
Border-top-color
Border- left -color
Border- right -color
Border- bottom -color
Css3边框
Border-radius：圆角边框 可以变成圆形，就是扣扣的那个
Box-shadow：边框阴影
Box-shadow：10px 10px 5px #FFCCFF;
：吧第一个数是左偏移，第二个数是上偏移，第三个数是透明度，第四个数是颜色
Border-image：边框图片
4. css外边距
外边距：围绕在内容边框的区域就是外边框，外边距默认为透明区域，外边距接收任何长度单位、百分数值
外边距常用属性：
属性 描述
Margin 设置所有边距
Margin-bottom 设置下边距
Margin-left 设置左边距
Margin-right 设置右边距
Margin-top 设置上边距
5. css外边距合并
外边距合并就是一个叠加的概念。遵循多个哪一个，就是两个部分的外边距都是100的话，哪么两个平行的部分就是100而不是二百。如果一个是100，一个是50，哪么两个平行的部分就是相差100
Css常用操作
1. 对齐操作
1.1、 margin进行水平对齐
margin-left属性设置成为auto
margin-right属性设置为auto
那么两边就进行了对等的分配，也就是居中对齐。
Margin:100px auto
就是上下是100px，左右是居中
1.2、使用psition属性进行左对齐或者右对齐
1.3、使用f loat属性进行左对齐或者右对齐
2.分类操作
2.1．属性
属性 描述
Height 设置元素高度
Line-height 设置行高
Max-height 设置元素最大高度
Max-width 设置元素最大宽度
Min-height 设置元素最小高度
Min-width 设置元素最小宽度
Width 设置元素宽度
分类属性
属性 描述
Clear 设置一个元素的侧面是否允许其他元素浮动
Cursor 规定当指向某元素之上时显示的指针类型
Display 设置是否以及如何显示元素
Float 定义元素在哪个方向上面浮动
Position 把元素放置到一个静态的、相对的、绝对的笃
定的位置
Visibility 设置元素是否可见或不可见
Display设置列表是否可见或者不可见，display:inline 就变成了一行，设置成了导航栏
Visibility设置列表元素是否可见或不可见
2. 导航栏
导航栏都是用列表方式实现的
2.1、垂直导航栏
2.2、水平导航栏
2.3、导航栏效果
3.css图片操作
Opacity:0.5 设置透明度。如果是0的话，那么是完全透明的，1是原图
css选择器
1. 元素选择器
1.1、 最常见的选择器就是元素选择器，文档的元素就是最基本的选择器
例如：h1{}, a{}
组合选择器：h1,h2,h3{ }
Div h1 ul li{ }
2. 类选择器
2.1、 类选择器允许以一种与文档元素的方式来指定样式
.class{ }
2.2、 组合元素选择器：
例如：a.class{ }
2.3、 多类选择器
例如：class.class{ }拥有了两个class的css
3. id选择器
id选择器类似于类选择器，不过也有一些重要差别
例如：#id{ }
3.2、类选择器和id选择器区别
Id只能在文档中使用一次，而类可以多次使用
Id选择器不能结合使用
当使用js的时候，需要用到id
4. 属性选择器
4.1、 简单属性选择器
例如：[title]{ }
4.2、 根据具体属性值选择：
除了选择拥有某些的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素，例如：a[href=”链接”]{ };
4.3、 属性和属性值必须完全匹配
4.4、 根据部分属性值选择
比如：title~=“hello”就是模糊匹配其中的值中含有hello的值
5. 后代选择器
Css3动画效果
1、2d、3d的转换
1.1
通过css3的转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸
转换是使元素改变形状、尺寸和位置的一种效果
可以使用2d、3d来转换元素
1.2、2D的转换方法。
通过transform属性来引入动画
Translate() :移动
比如在css文件中是 transform: translate(100px,100px);
-webkit-transform: translate(100px,100px); 支持safari chrome
-ms-transform: translate(100px,100px); 支持IE
-o-transform: translate(100px,100px); 支持opera
-moz-transform: translate(100px,100px); 支持firefox
360浏览器内核什么的都是用的IE所以IE的就行
Rotate(度数deg) 旋转
Scale(1，2) 缩放 第一个参数是宽度的缩放，第二个参数是高度缩放
Skew(50deg，50deg) 倾斜 第一个是围绕x轴旋转的度数，第二个是Y
Matrix() 矩阵
1.3、3D转换方法
rotateX() 一个参数，表示被压缩
rotateY()
2. 过渡
通过css3可以给元素添加一些效果
2.1、 css过渡是元素从一种形式转换成另一种形式
动画效果的css
动画执行的时间
2.2、 属性
属性 描述
Transition 设置四个过渡属性
Transition-property 过渡的名称
Transition-duration 过渡效果花费的时间
Transition-timing-function 过渡效果的时间曲线
Transition-delay 过渡效果开始的时间。延时时间
Transition: width 2s,height 2s,-webkit-transform 2s;
宽高执行时间，和旋转的执行时间2s，浏览器的支持如上
3. 动画
3.1、 通过css3，也可进行创建动画了
3.2、 Css3的动画需要遵循@keyframes规则
规定动画的时长
规定动画的名称
Animation：名称 执行时间(s);infinite alternate 一直执行，如果没有这个那么就是执行一次。
浏览器支持
然后
@keyframes 名称{
0%{background:red…….添加效果}-------------0%的时候的样子
25%{background:green…….添加效果}---------25%的时候的样子
}
浏览器支持
4. 多列
4.1、 在css3中，可以创建多列来对文本或者区域进行布局。
4.2、 属性
Column-count 分列的数量
Column-gap 每一列中间所间隔的距离
Column-rule 每一列间隔的线以及线的颜色
Column-width 每一列的宽度
多列可以实现瀑布流效果
<hr/>分割线
![web前端布局练手项目[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)