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/>分割线