css知识点清单

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

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 如果转载,需要获得作者授权。保留追究法律责任的权力 https://blog.csdn.net/swf_shixinshou/article/details/79732566
个人分类: javaweb
上一篇HTML知识点清单
下一篇js知识点清单
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭