当前位置:   article > 正文

CSS知识点汇总(第二篇)_border-style: solid;

border-style: solid;

边框属性

上边框:border-top    下边框:border-bottom

左边框:border-left    右边框:border-right

综合样式就是在所属边框的后面加上-style/-width/-color

边框样式(border-style)属性值

none:没有边框; dashed:边框为虚线;

solid:边框为单实线; dotted:边框为点线;

double:边框为双实线;

边框样式(border-style)遵循值复制原则

  1. border-style:solid ; 四边均为实线
  2. border-style:solid dotted; 上下实线,左右点线
  3. border-style:solid dotted dashed; 上实线,左右点线,下虚线
  4. border-style:solid dashed dotted double ;上实线,右虚线,下点线,左双实线

边框样式(border-width)属性值

注意:在设置边框宽度时,必须同时设置边框样式,如果未设置样式或者样式为none,不论宽度为多少都无效。(常用取值单位为像素)

其中border-width的用法与border-style类似,透明色为transparent

综合设置边框样式

  1. border-top/-bottom/-left /-right:所选边框的宽度 样式 颜色;
  2. 实例:border: 1px #F0C6C7 solid;

内边距属性(padding)

知识点概述:内边距指的是元素内容与边框之间的距离,也常常称为内填充。能调整内容在盒子中的显示位置。(与border类似)

上内边距:padding-top 下内边距:padding-bottom

左内边距:padding-left 右内边距:padding-right

四边内边距:padding

注意

1、内边距不允许使用负值

2、如果设置内外属性值为百分比,不论上下或左右的内外边距,都是相对于父元素宽度width的百分比,随父元素width的变化而变化,和高度height无关。

外边距属性(margin)

知识点概述:指元素边框与相邻元素之间的距离,可以拉开盒子与盒子之间的距离,合理地布局网页。

上外边距:margin-top 下外边距:margin-bottom

左外边距:margin-left 右外边距:margin-right

四边外边距:margin

内外边距的区别:margin可以取负值,padding不能取负值

块元素水平居中的方法

知识点概述:当对块元素应用宽度属性width,并将左右的外边距都设置为auto,可使块级元素水平居中。

  1. 实例:margin:0 auto; /*利用margin实现块元素水平居中*/
  2. margin:5px auto; /*利用margin实现块元素水平居中,并且上下拉开5像素边距*/

内外边距清除

知识点概述:为了更方便地控制网页中的元素,制作网页时,通常先清除元素的默认内外边距。

  1. *{
  2. padding:0; /* 清除内边距 */
  3. margin:0; /* 清除外边距 */
  4. }

注意:如果没有明确定义标签的宽高时,内边距相比外边距的容错率更高。

盒子模型的总宽度与总高度总结

盒子总宽度=width+左右内边距之和+左右边框之和+左右外边距之和;

盒子总高度=height+上下内边距之和+上下边框之和+上下外边距之和;

设置背景颜色(background-color)

知识点概述:在css中,网页元素的背景颜色使用background-color属性来设置。

知识点补充:需要整个页面都设置背景颜色时可以对body设置背景颜色。

设置背景图像( background-image)

知识点概述:在css中,可以将图像作为网页元素的背景,通过background-image属性实现。

  1. 例如:
  2. body{
  3. background-image:url(图片路径);
  4. }

注意:同时设置background-color和background-image时,图片会将颜色覆盖掉;

设置背景图像平铺(background-repeat)

知识点概述:默认情况下,背景图像会自动向水平和竖直两个方向平铺,如果不希望背景图像平铺,或只沿一个方向平铺,可以通过background-repeat属性来控制。

平铺属性值:

repeat:沿水平和竖直两个方向平铺(默认值);

no-repeat:不平铺(图像位于元素的左上角,只显示一次);

repeat-x:只沿水平方向平铺;

repeat-y;只沿竖直方向平铺;

设置背景图像的位置(background-position)的参数

1、单位数值:设置图像左上角在元素中的坐标,例如:background:20px 30px;(意思是距左侧边框20px,距上方边框30像素)

2、预定义的关键字:水平方向(left,center,right),垂直方向(top,center,bottom),例如:background: center;

3、百分比

0% 0%(图像左上角与元素的左上角对齐);

50% 50%(图像50% 50%中心点与元素50% 50% 的中心点对齐);

20% 30%(图像20% 30%的中心点与元素20% 30%的点对齐);

100% 100%(图像右下角与元素的右下角对齐,而不是图像充满元素);

例如:background: 0% 0%;

设置背景图像固定(background-attachment)

参数设置

scroll:图像随页面元素一起滚动(默认值)。

fixed:图像固定到屏幕上,不随页面元素滚动。

实例

  1. background-attachment:scroll;
  2. background-attachment:fixed;

设置元素背景(background)

知识点概述:CSS中的背景属性也是一个符合属性,可以将背景相关样式都综合定义在一个复合属性background中。

格式:background:背景色 url("图像") 平铺 位置 固定;(顺序任意,中间用空格隔开,不需要的样式可以省略)。

实例

background:url("图像") no-repeat 50px 80px fixed;

元素类型

块元素:1、在界面中以区域块的形式出现;2、每个块元素通常都会独自占据一整行或多整行;3、可以对其设置宽度、高度、对齐等属性。(<div>  <h1> ~ <h6>  <p>)

行内元素:1、不占有独立的区域; 2、仅仅靠自身的字体大小和图像尺寸来支撑结构; 3、一般不可以设置宽度、高度、对齐等属性。(<strong> <em>)

区别:块元素无论宽度为多少都会独自占据一行;而行内元素一行可以占据多个。

注意:在行内元素中有几个特殊的标签如<img>和<input>,对它们可以设置宽高和对齐属性,有些资料会称它们为行内块元素。

< span>标签

1、< span>标记是一个行内标记;

2、< span>  与 < /span> 之间只能包含文本和各种行内标记;

3、< span> 标记常用于定义网页中某些特殊显示的文本,配合class属性使用;

4、当其他行内标记都不合适时,就可以使用< span>标记;

5、< span> 标签本身没有结构特征,只有在应用样式时,才会产生视觉上的变化;

6、< div> 标签可以内嵌< span>标签, 但是< span> 标签中不能嵌套< div>标签。

元素类型的转换(display)

属性值设置:

inline:此元素将显示为行内元素(行内元素默认的display属性值);

block:此元素将显示为块元素(块元素默认的display属性值);

inline-block:此元素将显示为行内块元素,可以将其设置宽高和对齐等属性,但是该元素不会独占一行;

none:此元素将被隐藏,不显示,也不占用页面空间。

颜色透明度(rgba & opacity)

知识点概述:通过引入RGBA模式和opacity属性,对背景与图片设置不透明度。

rgba(r,g,b,alpha); (其中r,g,b的取值范围为0~255之间任意整数,alpha取值范围是0~1任意数字)

例如

p{background-color:rgba(255,0,0,5);}

opacity属性用于定义标签的不透明度,参数opacityValue表示不透明度的值,它是介于0~1之间的浮点数,0表示完全透明,1表示完全不透明,0.5表示半透明。

例如

opacity: opacityValue(这是一个0~1之间的浮点数);

总结:rgba只对背景颜色透明度有效,opacity对任意内容都有效

图片边框(border-image)

知识点概述:在网页设计中,我们还可以使用图片作为元素的边框,运用CSS3中的border-image属性就可以轻松实现这个效果。

图片边框属性值的设置参数:

border-image-source:指定图片的路径,url设置路径;

border-image-slice:指定边框图像顶部、右侧、底部、左侧内偏移量(分割线)。使用百分比数值

border-image-width:指定边框宽度,使用像素;

border-image-outset:指定边框背景向盒子外部延伸的距离,设置边框图像与边框距离,取值为数字,表示倍率。

border-image-repeat:指定背景图片的平铺方式。stretch拉伸,repeat平铺,round自适应平铺(不完整的部分会被直接删除)。

  1. border-image-source: url(图片位置);
  2. border-image-slice:33%;
  3. border-image-width:40px;
  4. border-image-outset:1px;
  5. border-image-repeat:repeat;
  6. /*等同于下面一段*/
  7. border-image:url(图片位置) 33%/40px/1px repeat;
  8. /*需要注意的是涉及距离的值要用斜线隔开,其他值正常空格隔开即可*/

阴影(box-shadow)

知识点概述:改变阴影的投射方向以及添加多重阴影效果;

书写格式参考:box-shadow:h-shadow v-shadow blur spread color outset(或者是inset);

blur:模糊半径

spread: 阴影面积。

注意

1、实际使用时blur spread outset(或者是inset)都可以不写;

2、多个模糊值之间用逗号隔开

实例

box-shadow:5px 5px 10px 2px #999 inset, -5px -5px 10px 2px #333 inset;

3、设置内边距阴影(inset)时, 一定要同时设置内边距(padding),否则阴影不会显示。

线性渐变

知识点概述:线性渐变起始颜色会沿着一条直线按顺序过渡到结束颜色。运用CSS3中的“background-image:linear-aradient(参数值);”样式可以实现线性渐变效果。

格式

background-image:linear-gradient(渐变角度,颜色值1,颜色值2...,颜色值n);

linaer-gradient用于定义渐变方式为线性渐变,括号内用于设定渐变角度和颜色值。

渐变角度:指水平线和渐变线之间的夹角,可以是以deg为单位的角度数值或关键字(to top/right/button/left)。

颜色值:用于设置渐变颜色,""颜色1"表示起始颜色,"颜色n表示结束颜色",起始颜色和结束颜色之间可以添加多个颜色值,各颜色值之间用逗号隔开。

径向渐变

知识点概述:是网页中一种常用的渐变,在径向渐变过程中,起始颜色会从一个中心开始,按照椭圆或圆形形状进行扩张渐变,运用CSS3中“background-image:radial-gradient(参数值);”样式可以实现径向渐变效果。

格式

background-image:radial-gradient(渐变形状 圆心位置,颜色值1,颜色值2...,颜色值n);

radial-gradient用于定义渐变的方式为径向渐变,括号内的参数值用于设定渐变形状、圆心位置和颜色值。

渐变形状用来定义径向渐变的形状,其取值即可以是定义水平和垂直半径的像素值或百分比,也可以是相应的关键词。(关键词为:circle:圆形, ellipse:椭圆)

圆心位置用于确定元素渐变的中心位置,使用"at"加上关键词参数值来定义径向渐变的中心位置。

“颜色值1"表示起始颜色, "颜色值n”表示结束颜色,起始颜色和结束颜色之间可以添加多个颜色值,各颜色值之间用中隔开。

重复渐变

知识点概述:在CSS3中,通过"background-image:repeating-linear-gradient (参数值) ;" 样式可以实现重复线性渐变的效果。

格式

background-image.repeating-linear-gradient(渐变角度颜色值1.颜色值2..颜色值n);

圆角(border-radius)

知识点概述::在网页设计中,经常会看到一些圆角的图形,如按钮、头像图片等,运用CSS3中的border-radius属性可以将矩形边框四角圆角化,实现圆角效果。

格式:

  1. border-radius : 水平半径参数1 水平半径参数2 水平半径参数3
  2. 水平半径参数4/垂直半径参数1 垂直半径参数2 垂直半径参数3 垂直半径参数4;

注意

1、当应用值复制原则设置圆角边框时,如果“垂直半径参数”省略,则会默认等于“水平半径参数”的参数值。此时圆角的水平半径和垂直半径相等。

2、半径参数值可以用像素(10px),也可以用百分比(10%),当各边百分比达到50%时,达到临界值,图片会变成圆形。

3、属性值的值复制原则

●水平半径参数和垂直半径参数均可以设置1~4个参数值

●水平半径参数和垂直半径参数设置1个参数值时,表示四角的圆角半径均相同;

●水平半径参数和垂直半径参数设置2个参数值时,第1个参数值代表左上圆角半径和右下圆角半径,第2个参数值代表右上和左下圆角半径

●水平半径参数和垂直半径参数设置3个参数值时,第1个参数值代表左上圆角半径,第2个参数值代表右上和左下圆角半径;第3个参数值代表右下圆角半径。

(如果"垂直半径参数"省略,则会默认等于“水平半径参数的参数值)

●border-radius:50%;用于 设置圆形。

多背景图像

知识点概述:在CSS3中, 通过background-image. background-repeat. background-position和background-size等属性提供多个属性值可以实现多重背景图像效果,各属性值之间用逗号隔开。

格式:

  1. background-image:
  2. url(images/caodi.png),
  3. url(images/taiyang.png),
  4. url(images/tiankong.png);

注意:最先写出来图片会显示在最前面,所以书写时需要注意顺序,防止图片覆盖。

知识补充:

CSS3之前: 一个容器只能填充一 张背景图片,如果重复设置,最后设置的背景图片将覆盖之前的背景。

CSS3通过background-image,background-repeat, background-position 等属性的值来实现多重背景图像效果,各属性值之间用逗号隔开。

实例:

  1. .off{
  2. width: 604px;
  3. height: 227px;
  4. background-image:url("../../../Documents/muxishiye/04.jpg"),
  5. url("../../../Documents/muxishiye/05.jpg"),
  6. url("../../../Documents/muxishiye/06.jpg");
  7. background-position: left,center,right;
  8. border-radius:0px 0px 35px 35px;
  9. background-repeat: no-repeat;
  10. }

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/盐析白兔/article/detail/630967
推荐阅读
  

闽ICP备14008679号