CSS基础_橘里_前端开发者

一  css显示模式

一  css显示模式一  css显示模式

 

  1,标签级别

  1,标签级别1,标签级别

  csshtml标签做了分类:文本级,容器级。

  csshtml标签做了分类:文本级,容器级。

  文本级标签只能嵌套文字,图片等信息。常用的文本级标签包含:span,p,em,img等。

  文本级标签只能嵌套文字,图片等信息。常用的文本级标签包含:span,p,em,img等。

  容器级标签可以嵌套其他所有标签。常用的包含:div,ul,ol,table等所有结构化语义标签都是容器级,比如header,footer,nav,section等。

  容器级标签可以嵌套其他所有标签。常用的包含:div,ul,ol,table等所有结构化语义标签都是容器级,比如header,footer,nav,section等。

  

  

  2,元素分类

  2,元素分类2,元素分类

  CSS将所有html元素分为三大类:块级元素,行类元素,行内块级元素。

  CSS将所有html元素分为三大类:块级元素,行类元素,行内块级元素。

  块级元素:独占一行;如果没有设置宽度,将继承父元素的宽度;如果设置了宽高,将按照设置值显示。

  块级元素:独占一行;如果没有设置宽度,将继承父元素的宽度;如果设置了宽高,将按照设置值显示。

  行内元素:在一行内共存。不能设置宽高(margin和padding依然可以使用)。默认按内容大小显示。

  行内元素:在一行内共存。不能设置宽高(margin和padding依然可以使用)。默认按内容大小显示。

  行内块级:不会独占一行,但可以设置宽高。

  行内块级:不会独占一行,但可以设置宽高。

  CSS对元素的这种分类,我们称之为显示模式。

  CSS对元素的这种分类,我们称之为显示模式。

  

  

  3,显示模式转换

  3,显示模式转换3,显示模式转换

  CSS使用display属性设置元素的显示模式。display属性可以是以下这些值:inline(行内),block(块级),inline-block(行内块级),flex(弹性盒子),inline-flex(行内弹性盒子)。

  CSS使用display属性设置元素的显示模式。display属性可以是以下这些值:inline(行内),block(块级),inline-block(行内块级),flex(弹性盒子),inline-flex(行内弹性盒子)。

 

 

二  CSS选择器

二  CSS选择器二  CSS选择器

  

  

  1,常用选择器

  1,常用选择器1,常用选择器

  a),通配符

  a),通配符

    CSS使用(*)星号表示通配符选择器,选中所所有标签。

    CSS使用(*)星号表示通配符选择器,选中所所有标签。

1 *{font-size:14px;}
1 *{font-size:14px;}

1*font-size14px

  b),特别重要

  b),特别重要

    CSS可以在属性值后添加 !important 强调该属性,该属性一定会被应用到html元素上,不管是否还设置了其他样式。

    CSS可以在属性值后添加 !important 强调该属性,该属性一定会被应用到HTML元素上,不管是否还设置了其他样式。

1 p{color:red !important;}
1 p{color:red !important;}

1pcolorred !important

  c),标签选择器

  c),标签选择器

    直接使用HTML标签名作为选择器。

    直接使用HTML标签名作为选择器。

1 p{}/*选中所有p元素*/
1 p{}/*选中所有p元素*/

1p/*选中所有p元素*/

  d),类选择器

  d),类选择器

    CSS使用(.)点表示类选择器。

    CSS使用(.)点表示类选择器。

1 .wrap{}/*选中所有class为wrap的元素*/
1 .wrap{}/*选中所有class为wrap的元素*/

1.wrap/*选中所有class为wrap的元素*/

  e),id选择器

  e),id选择器

    CSS使用(#)井号表示id选择器。

    CSS使用(#)井号表示id选择器。

1 #firstname{}/*选中id为firstname的元素*/
1 #firstname{}/*选中id为firstname的元素*/

1#firstname/*选中id为firstname的元素*/

  f),后代选择器

  f),后代选择器

    CSS使用( )空格表示后代选择器,左边表示父元素,右边表示后代元素。

    CSS使用( )空格表示后代选择器,左边表示父元素,右边表示后代元素。

1 div p{}/*选中div中的所有后代p*/
1 div p{}/*选中div中的所有后代p*/

1div p/*选中div中的所有后代p*/

  g),子选择器

  g),子选择器

    CSS使用(>)大于表示自选择器,左边表示父元素,右边表示儿子元素。

    CSS使用(>)大于表示自选择器,左边表示父元素,右边表示儿子元素。

1 div>p{}/*选中div中的所有儿子p*/
1 div>p{}/*选中div中的所有儿子p*/

1 div>p1/*选中div中的所有儿子p*/

  h),兄弟选择器

  h),兄弟选择器

    CSS使用(+)加号表示兄弟选择器。

    CSS使用(+)加号表示兄弟选择器。

1 div+p{}/*选中紧接在div之后的兄弟p元素*/
1 div+p{}/*选中紧接在div之后的兄弟p元素*/

1div+p/*选中紧接在div之后的兄弟p元素*/

  i),属性选择器

  i),属性选择器

    CSS使用([])表示属性选择器。

    CSS使用([])表示属性选择器。

1 input[name]/*选中所有带有name属性的元素。*/
2 input[name='ren']/*选中所有name属性值为ren的元素。*/
1 input[name]/*选中所有带有name属性的元素。*/
2 input[name='ren']/*选中所有name属性值为ren的元素。*/

1input[name]/*选中所有带有name属性的元素。*/2input[name=’ren’]/*选中所有name属性值为ren的元素。*/

  j),并列选择器

  j),并列选择器

    上面的选择器直接连在一起,不使用任何符号隔开,即是CSS中的并列选择器。

    上面的选择器直接连在一起,不使用任何符号隔开,即是CSS中的并列选择器。

1 div.wrap{}/*选中calss为wrap的p元素。*/
1 div.wrap{}/*选中calss为wrap的p元素。*/

1 div.wrap1/*选中calss为wrap的p元素。*/

  h),组选择器

  h),组选择器

    上面的选择器使用逗号隔开,即是CSS中的组选择器。

    上面的选择器使用逗号隔开,即是CSS中的组选择器。

1 p,.wrap,div,#firstname{}/*同时选中p、class为wrap、div、id为firstname的元素。*/
1 p,.wrap,div,#firstname{}/*同时选中p、class为wrap、div、id为firstname的元素。*/

1p,.wrap,div,#firstname/*同时选中p、class为wrap、div、id为firstname的元素。*/

  i),伪类选择器

  i),伪类选择器

    伪类选择器的形式是:普通选择器+冒号+关键字,伪类用于修饰普通选择器,常用来设置普通选择器选中元素的特殊状态。

    伪类选择器的形式是:普通选择器+冒号+关键字,伪类用于修饰普通选择器,常用来设置普通选择器选中元素的特殊状态。

1 div:hover{}/*d用于设置div被鼠标滑过时的样式。*/
2 p:first-child{}/*选中在兄弟元素中作为第一个元素的p元素。*/
1 div:hover{}/*d用于设置div被鼠标滑过时的样式。*/
2 p:first-child{}/*选中在兄弟元素中作为第一个元素的p元素。*/

1div:hover/*d用于设置div被鼠标滑过时的样式。*/2p:first-child/*选中在兄弟元素中作为第一个元素的p元素。*/

    CSS还有很多其他的伪类选择器,详情请参考:https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes

    CSS还有很多其他的伪类选择器,详情请参考:https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classeshttps://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes

  j),伪元素选择器

  j),伪元素选择器

    伪元素选择器的形式和伪类相似,不同点在于,它使用双冒号连接关键字。伪元素用来对普通选择器选中的元素的特殊部分单独设置样式。它会把该元素的一部分当做一个完整的元素看待,从而为其设置单独的样式。

    伪元素选择器的形式和伪类相似,不同点在于,它使用双冒号连接关键字。伪元素用来对普通选择器选中的元素的特殊部分单独设置样式。它会把该元素的一部分当做一个完整的元素看待,从而为其设置单独的样式。

1 p::first-line{}/*选中所有p元素的第一行文本。*/
2 p::before{}/*创建一个元素作为p的第一个子元素,该元素默认是行内元素,可以使用content属性添加内容。*/
1 p::first-line{}/*选中所有p元素的第一行文本。*/
2 p::before{}/*创建一个元素作为p的第一个子元素,该元素默认是行内元素,可以使用content属性添加内容。*/

1p::first-line/*选中所有p元素的第一行文本。*/2p::before/*创建一个元素作为p的第一个子元素,该元素默认是行内元素,可以使用content属性添加内容。*/

    更多伪元素请参考:https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements

    更多伪元素请参考:https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elementshttps://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements

  虽然W3C规范要求使用双冒号来表示伪元素,但大多数浏览器依然支持使用单冒号表示伪元素,为了不产生混淆,推荐大家使用双冒号,加以区分。

  虽然W3C规范要求使用双冒号来表示伪元素,但大多数浏览器依然支持使用单冒号表示伪元素,为了不产生混淆,推荐大家使用双冒号,加以区分。虽然W3C规范要求使用双冒号来表示伪元素,但大多数浏览器依然支持使用单冒号表示伪元素,为了不产生混淆,推荐大家使用双冒号,加以区分。

  

  

  2,CSS选择器权重

  2,CSS选择器权重2,CSS选择器权重

    !important:infinity。

    !important:infinity。

    内联样式:1000。

    内联样式:1000。

    id选择器:100。

    id选择器:100。

    class||属性||伪类:10。

    class||属性||伪类:10。

    标签:1。

    标签:1。

    通配符:0。

    通配符:0。

  请注意:权重值不是十进制数,很可能是256进制的。这意味着即使你使用11个calss属性选中一个元素,它的优先级还是不及一个id选择器。

  请注意:权重值不是十进制数,很可能是256进制的。这意味着即使你使用11个calss属性选中一个元素,它的优先级还是不及一个id选择器。请注意:权重值不是十进制数,很可能是256进制的。这意味着即使你使用11个calss属性选中一个元素,它的优先级还是不及一个id选择器。

  通常,我们并不需要通过权重计算来判断css选择器的优先级,按照以下方式就可以简单快速的判断:  

  通常,我们并不需要通过权重计算来判断css选择器的优先级,按照以下方式就可以简单快速的判断:  

  !important > 内联样式 > id > (class || 属性选择器)> 标签 >通配符。

  !important > 内联样式 > id > (class || 属性选择器)> 标签 >通配符。!important > 内联样式 > id > (class || 属性选择器)> 标签 >通配符。

  只有在使用并列选择器时,才需要计算权重值来判定优先级,如果权重值一样,那么就按照谁写在后面谁优先级高的原则。

  只有在使用并列选择器时,才需要计算权重值来判定优先级,如果权重值一样,那么就按照谁写在后面谁优先级高的原则。

 

 

三  CSS属性

三  CSS属性三  CSS属性

  

  

  1,文本类属性

  1,文本类属性1,文本类属性

    文本样式类:

    文本样式类:

常用属性 含义         可选值                                                    
font-style 字体样式 italic(斜体),normal(正常的,默认值)
font-size 字体尺寸 所有css支持的
font-family 字体类型 各种字体名称
font-weight 字体粗细 normal,100-900,bold(粗),bolder(更粗),lighter(细)
text-decoration 文本装饰 none(无),underline(下划线),overline(上划线),line-through(删除线)
color 文本颜色 rgb值,16进制值,颜色关键字(单词)
text-shadow 文本阴影 需要四个值:1,水平偏移量;2,垂直偏移量;3,模糊半径(0表示无阴影);4,阴影颜色
text-transform 文本转换 none(不转换),uppercase(转换为大写),lowercase(转换为小写),capitalize(首字母转换为大写),full-width(转换为全角)
常用属性 含义         可选值                                                     font-style 字体样式 italic(斜体),normal(正常的,默认值) font-size 字体尺寸 所有css支持的 font-family 字体类型 各种字体名称 font-weight 字体粗细 normal,100-900,bold(粗),bolder(更粗),lighter(细) text-decoration 文本装饰 none(无),underline(下划线),overline(上划线),line-through(删除线) color 文本颜色 rgb值,16进制值,颜色关键字(单词) text-shadow 文本阴影 需要四个值:1,水平偏移量;2,垂直偏移量;3,模糊半径(0表示无阴影);4,阴影颜色 text-transform 文本转换 none(不转换),uppercase(转换为大写),lowercase(转换为小写),capitalize(首字母转换为大写),full-width(转换为全角) 常用属性 含义         可选值                                                     常用属性

常用属性常用属性

含义        

含义        含义   

可选值                                                    

可选值                                                    可选值

font-style 字体样式 italic(斜体),normal(正常的,默认值) font-style

font-style

字体样式

字体样式

italic(斜体),normal(正常的,默认值)

italic(斜体),normal(正常的,默认值)

font-size 字体尺寸 所有css支持的 font-size

font-size

字体尺寸

字体尺寸

所有css支持的

所有css支持的

font-family 字体类型 各种字体名称 font-family

font-family

字体类型

字体类型

各种字体名称

各种字体名称

font-weight 字体粗细 normal,100-900,bold(粗),bolder(更粗),lighter(细) font-weight

font-weight

字体粗细

字体粗细

normal,100-900,bold(粗),bolder(更粗),lighter(细)

normal,100-900,bold(粗),bolder(更粗),lighter(细)

text-decoration 文本装饰 none(无),underline(下划线),overline(上划线),line-through(删除线) text-decoration

text-decoration

文本装饰

文本装饰

none(无),underline(下划线),overline(上划线),line-through(删除线)

none(无),underline(下划线),overline(上划线),line-through(删除线)

color 文本颜色 rgb值,16进制值,颜色关键字(单词) color

color

文本颜色

文本颜色

rgb值,16进制值,颜色关键字(单词)

rgb值,16进制值,颜色关键字(单词)

text-shadow 文本阴影 需要四个值:1,水平偏移量;2,垂直偏移量;3,模糊半径(0表示无阴影);4,阴影颜色 text-shadow

text-shadow

文本阴影

文本阴影

需要四个值:1,水平偏移量;2,垂直偏移量;3,模糊半径(0表示无阴影);4,阴影颜色

需要四个值:1,水平偏移量;2,垂直偏移量;3,模糊半径(0表示无阴影);4,阴影颜色

text-transform 文本转换 none(不转换),uppercase(转换为大写),lowercase(转换为小写),capitalize(首字母转换为大写),full-width(转换为全角) text-transform

text-transform

文本转换

文本转换

none(不转换),uppercase(转换为大写),lowercase(转换为小写),capitalize(首字母转换为大写),full-width(转换为全角)

none(不转换),uppercase(转换为大写),lowercase(转换为小写),capitalize(首字母转换为大写),full-width(转换为全角)

 

 

    文本布局类:

    文本布局类:

常用属性 含义        可选值                                               
text-align 文本对齐方式 left(左对齐),right(右对齐),center(居中)
line-height 行高 所有css支持的
letter-spacing 字间距 所有css支持的
word-spacing 单词间距 所有css支持的
text-indent 首行缩进量 所有css支持的
text-overflow 溢出处理 clip(不显示截断内容,默认值),ellipsis(以省略号显示被截断内容,需要配合white-space:nowrap使用才有效)
white-space 空白和换行处理 normal(合并,可换行),nowrap(合并,不换行),pre(保留)
常用属性 含义        可选值                                                text-align 文本对齐方式 left(左对齐),right(右对齐),center(居中) line-height 行高 所有css支持的 letter-spacing 字间距 所有css支持的 word-spacing 单词间距 所有css支持的 text-indent 首行缩进量 所有css支持的 text-overflow 溢出处理 clip(不显示截断内容,默认值),ellipsis(以省略号显示被截断内容,需要配合white-space:nowrap使用才有效) white-space 空白和换行处理 normal(合并,可换行),nowrap(合并,不换行),pre(保留) 常用属性 含义        可选值                                                常用属性

常用属性常用属性

含义       

含义       含义       

可选值                                               

可选值                                               可选值                                               

text-align 文本对齐方式 left(左对齐),right(右对齐),center(居中) text-align

text-align

文本对齐方式

文本对齐方式

left(左对齐),right(右对齐),center(居中)

left(左对齐),right(右对齐),center(居中)

line-height 行高 所有css支持的 line-height

line-height

行高

行高

所有css支持的

所有css支持的

letter-spacing 字间距 所有css支持的 letter-spacing

letter-spacing

字间距

字间距

所有css支持的

所有css支持的

word-spacing 单词间距 所有css支持的 word-spacing

word-spacing

单词间距

单词间距

所有css支持的

所有css支持的

text-indent 首行缩进量 所有css支持的 text-indent

text-indent

首行缩进量

首行缩进量

所有css支持的

所有css支持的

text-overflow 溢出处理 clip(不显示截断内容,默认值),ellipsis(以省略号显示被截断内容,需要配合white-space:nowrap使用才有效) text-overflow

text-overflow

溢出处理

溢出处理

clip(不显示截断内容,默认值),ellipsis(以省略号显示被截断内容,需要配合white-space:nowrap使用才有效)

clip(不显示截断内容,默认值),ellipsis(以省略号显示被截断内容,需要配合white-space:nowrap使用才有效)

white-space 空白和换行处理 normal(合并,可换行),nowrap(合并,不换行),pre(保留) white-space

white-space

空白和换行处理

空白和换行处理

normal(合并,可换行),nowrap(合并,不换行),pre(保留)

normal(合并,可换行),nowrap(合并,不换行),pre(保留)

 

 

  2,盒子类属性

  2,盒子类属性2,盒子类属性

  display:设置盒子是否显示。

  display:设置盒子是否显示。  

1 div{
2     display:none;/*完全隐藏,不占用空间*/
3     /*display:block;块级元素*/
4     /*display:inline;行内元素*/
5     /*display:inline-block;行内块级*/
6 }
1 div{
2     display:none;/*完全隐藏,不占用空间*/
3     /*display:block;块级元素*/
4     /*display:inline;行内元素*/
5     /*display:inline-block;行内块级*/
6 }

1 div{
2 display:none;/*完全隐藏,不占用空间*/
3 /*display:block;块级元素*/
4 /*display:inline;行内元素*/
5 /*display:inline-block;行内块级*/
6 }
1div2 displaynone/*完全隐藏,不占用空间*/3/*display:block;块级元素*/4/*display:inline;行内元素*/5/*display:inline-block;行内块级*/6

  content:width和height,分别定义盒子内容区域的宽高。

  content:width和height,分别定义盒子内容区域的宽高。  

1 p{
2     width:200px;
3     height:200px;
4 }
1 p{
2     width:200px;
3     height:200px;
4 }

1 p{
2 width:200px;
3 height:200px;
4 }
1p2 width200px3 height200px4

  padding:环绕在content区域之外的就是内边距(或者叫填充)。

  padding:环绕在content区域之外的就是内边距(或者叫填充)。

1 p{
2     padding-top:10px;
3     padding-right:20px;
4     padding-bottom:30px;
5     padding-left:40px;
6     /*padding:10px 20px 30px 40px;简写方式,顺时针方向*/
7     /*padding:20px; 如果四周padding值相同,可这样简写*/
8 }
1 p{
2     padding-top:10px;
3     padding-right:20px;
4     padding-bottom:30px;
5     padding-left:40px;
6     /*padding:10px 20px 30px 40px;简写方式,顺时针方向*/
7     /*padding:20px; 如果四周padding值相同,可这样简写*/
8 }

1 p{
2 padding-top:10px;
3 padding-right:20px;
4 padding-bottom:30px;
5 padding-left:40px;
6 /*padding:10px 20px 30px 40px;简写方式,顺时针方向*/
7 /*padding:20px; 如果四周padding值相同,可这样简写*/
8 }
1p2 padding-top10px3 padding-right20px4 padding-bottom30px5 padding-left40px6/*padding:10px 20px 30px 40px;简写方式,顺时针方向*/7/*padding:20px; 如果四周padding值相同,可这样简写*/8

  border:环绕在padding和content区域之外的即是边框。

  border:环绕在padding和content区域之外的即是边框。

 1 p{
 2     border-width:5px;/*边框宽度*/
 3     border-style:solid;/*边框类型,solid实线,dotted圆点虚线,dashed虚线*/
 4     border-color:black;/*边框颜色*/
 5     /*border:5px solid black;简写方式*/
 6     /*单独设置某个方向边框的方式与padding类似*/
 7     /*border-top-color:red;也可以通过该方式单独设置某一边的单个属性*/
 8     border-radius:5px;/*四角的圆角*/
 9     /*圆角也是一个复合属性,你可以单独设置某一个,例如左上角的圆角:border-top-left-radius*/
10 }
 1 p{
 2     border-width:5px;/*边框宽度*/
 3     border-style:solid;/*边框类型,solid实线,dotted圆点虚线,dashed虚线*/
 4     border-color:black;/*边框颜色*/
 5     /*border:5px solid black;简写方式*/
 6     /*单独设置某个方向边框的方式与padding类似*/
 7     /*border-top-color:red;也可以通过该方式单独设置某一边的单个属性*/
 8     border-radius:5px;/*四角的圆角*/
 9     /*圆角也是一个复合属性,你可以单独设置某一个,例如左上角的圆角:border-top-left-radius*/
10 }

1p 2 border-width5px/*边框宽度*/ 3 border-stylesolid/*边框类型,solid实线,dotted圆点虚线,dashed虚线*/ 4 border-colorblack/*边框颜色*/ 5/*border:5px solid black;简写方式*/ 6/*单独设置某个方向边框的方式与padding类似*/ 7/*border-top-color:red;也可以通过该方式单独设置某一边的单个属性*/ 8 border-radius5px/*四角的圆角*/ 9/*圆角也是一个复合属性,你可以单独设置某一个,例如左上角的圆角:border-top-left-radius*/10

  margin:元素最外层的包裹层就是margin区域。使用时请注意margin的折叠问题(塌陷),前一篇《CSS概述》中有详细介绍。

  margin:元素最外层的包裹层就是margin区域。使用时请注意margin的折叠问题(塌陷),前一篇《CSS概述》中有详细介绍。《CSS概述》

1 p{
2     margin:10px 20px 30px 40px;
3     /*margin设置方式同padding*/
4 }    
1 p{
2     margin:10px 20px 30px 40px;
3     /*margin设置方式同padding*/
4 }    

1 p{
2 margin:10px 20px 30px 40px;
3 /*margin设置方式同padding*/
4 }
1p2 margin10px 20px 30px 40px3/*margin设置方式同padding*/4

  CSS的两种盒子模型:标准盒模型,怪异盒模型。你可以使用box-sizing设置CSS以哪种模式解析元素。

  CSS的两种盒子模型:标准盒模型,怪异盒模型。你可以使用box-sizing设置CSS以哪种模式解析元素。  CSS的两种盒子模型:标准盒模型,怪异盒模型。你可以使用box-sizing设置CSS以哪种模式解析元素。

1 div{
2     box-sizing:content-box;/*默认值,标准模型*/
3     /*box-sizing:border-box;怪异模型*/
4 }
1 div{
2     box-sizing:content-box;/*默认值,标准模型*/
3     /*box-sizing:border-box;怪异模型*/
4 }

1 div{
2 box-sizing:content-box;/*默认值,标准模型*/
3 /*box-sizing:border-box;怪异模型*/
4 }
1div2 box-sizingcontent-box/*默认值,标准模型*/3/*box-sizing:border-box;怪异模型*/4

  他们唯一的区别是:标准盒模型解析width,height属性为内容区域的宽高,怪异模型则解析为content+padding+border区域。

  他们唯一的区别是:标准盒模型解析width,height属性为内容区域的宽高,怪异模型则解析为content+padding+border区域。

  

    

  3,内容溢出

  3,内容溢出  3,内容溢出

  我们已经知道,CSS将所有元素解析为一个个盒子,并可以通过设置width和height属性规定盒子内容区的大小。那么,当内容过多,盒子大小不足以容纳这么多内容时,CSS是怎么处理的呢?实际上,CSS为了避免数据丢失(用户无法查看所有内容),会在超出设置的范围之外显示剩余内容,进而可能影响到其他元素的显示,这种现象我们称之为内容溢出。

  我们已经知道,CSS将所有元素解析为一个个盒子,并可以通过设置width和height属性规定盒子内容区的大小。那么,当内容过多,盒子大小不足以容纳这么多内容时,CSS是怎么处理的呢?实际上,CSS为了避免数据丢失(用户无法查看所有内容),会在超出设置的范围之外显示剩余内容,进而可能影响到其他元素的显示,这种现象我们称之为内容溢出。  

  一般有两种情况会导致内容溢出,一种是子元素的尺寸大于父元素的尺寸,另一种是文本超出行内块级元素的尺寸。你可以通过设置父元素的overflow属性来控制CSS如何处理溢出的情况。

  一般有两种情况会导致内容溢出,一种是子元素的尺寸大于父元素的尺寸,另一种是文本超出行内块级元素的尺寸。你可以通过设置父元素的overflow属性来控制CSS如何处理溢出的情况。一般有两种情况会导致内容溢出,一种是子元素的尺寸大于父元素的尺寸,另一种是文本超出行内块级元素的尺寸。你可以通过设置父元素的overflow属性来控制CSS如何处理溢出的情况。

1 div{
2     overflow:hidden;/*隐藏超出部分*/
3     /*overflow:scroll;显示滚动条*/
4     /*overflow:scroll-x/scroll-y;仅上下或左右方向有滚动条*/
5     /*overflow:auto;一般交给浏览器决定*/
6 }
1 div{
2     overflow:hidden;/*隐藏超出部分*/
3     /*overflow:scroll;显示滚动条*/
4     /*overflow:scroll-x/scroll-y;仅上下或左右方向有滚动条*/
5     /*overflow:auto;一般交给浏览器决定*/
6 }

1 div{
2 overflow:hidden;/*隐藏超出部分*/
3 /*overflow:scroll;显示滚动条*/
4 /*overflow:scroll-x/scroll-y;仅上下或左右方向有滚动条*/
5 /*overflow:auto;一般交给浏览器决定*/
6 }
1div2 overflowhidden/*隐藏超出部分*/3/*overflow:scroll;显示滚动条*/4/*overflow:scroll-x/scroll-y;仅上下或左右方向有滚动条*/5/*overflow:auto;一般交给浏览器决定*/6

 

 

四  背景

四  背景四  背景

  

    

  1,颜色

  1,颜色  1,颜色

  背景是修饰HTML常用的方式,CSS中使用background属性设置背景属性。

  背景是修饰HTML常用的方式,CSS中使用background属性设置背景属性。

1 p{
2     backrgound-color:orange;/*背景颜色*/
3 }
1 p{
2     backrgound-color:orange;/*背景颜色*/
3 }

1 p{
2 backrgound-color:orange;/*背景颜色*/
3 }
1p2 backrgound-colororange/*背景颜色*/3

  

   

  2,图片

  2,图片  2,图片

  除了可以设置背景颜色外,CSS还可以设置背景图片。

  除了可以设置背景颜色外,CSS还可以设置背景图片。

1 p{
2     backrgound-img:url('url');/*背景图片*/
3     background-repeat:no-repeat;/*不平铺(重复)*/
4     /*该属性还有几个可选值:repeat:水平垂直都平铺(默认值);repeat-x:只在x轴平铺;repeat-y:只在y轴平铺*/
5 }
1 p{
2     backrgound-img:url('url');/*背景图片*/
3     background-repeat:no-repeat;/*不平铺(重复)*/
4     /*该属性还有几个可选值:repeat:水平垂直都平铺(默认值);repeat-x:只在x轴平铺;repeat-y:只在y轴平铺*/
5 }

1 p{
2 backrgound-img:url(‘url’);/*背景图片*/
3 background-repeat:no-repeat;/*不平铺(重复)*/
4 /*该属性还有几个可选值:repeat:水平垂直都平铺(默认值);repeat-x:只在x轴平铺;repeat-y:只在y轴平铺*/
5 }
1p2 backrgound-imgurl(‘url’)/*背景图片*/3 background-repeatno-repeat/*不平铺(重复)*/4/*该属性还有几个可选值:repeat:水平垂直都平铺(默认值);repeat-x:只在x轴平铺;repeat-y:只在y轴平铺*/5

  请注意,如果背景图像和颜色都被设置了,一般情况下图像会覆盖颜色。

  请注意,如果背景图像和颜色都被设置了,一般情况下图像会覆盖颜色。请注意,如果背景图像和颜色都被设置了,一般情况下图像会覆盖颜色。

  你还可以通过设置background-size来调整背景图片的尺寸,以适应网页的需要。

  你还可以通过设置background-size来调整背景图片的尺寸,以适应网页的需要。

1 p{
2     background-size:100px 200px;/*指定具体尺寸*/
3     /*如果你不知道具体尺寸,那么你可以使用关键字,让浏览器帮你设置大小。
4   cover:保证图片的宽高比,放大图片以填满整个区域,可能导致图片部分内容溢出。
5   contain:保证图片不溢出,尽量填满整个区域,可能导致部分区域无法被图像覆盖。
*/ 6 }
1 p{
2     background-size:100px 200px;/*指定具体尺寸*/
3     /*如果你不知道具体尺寸,那么你可以使用关键字,让浏览器帮你设置大小。
4   cover:保证图片的宽高比,放大图片以填满整个区域,可能导致图片部分内容溢出。
5   contain:保证图片不溢出,尽量填满整个区域,可能导致部分区域无法被图像覆盖。
*/ 6 }

1 p{
2 background-size:100px 200px;/*指定具体尺寸*/
3 /*如果你不知道具体尺寸,那么你可以使用关键字,让浏览器帮你设置大小。
4   cover:保证图片的宽高比,放大图片以填满整个区域,可能导致图片部分内容溢出。
5   contain:保证图片不溢出,尽量填满整个区域,可能导致部分区域无法被图像覆盖。
*/
6 }
1p2 background-size100px 200px/*指定具体尺寸*/3/*如果你不知道具体尺寸,那么你可以使用关键字,让浏览器帮你设置大小。
4   cover:保证图片的宽高比,放大图片以填满整个区域,可能导致图片部分内容溢出。
5   contain:保证图片不溢出,尽量填满整个区域,可能导致部分区域无法被图像覆盖。

4
5*/6

  

  

  3,定位

  3,定位3,定位

  在图像不需要填满整个区域的时候,你可以使用background-position来定位图片,让其显示在你想要的位置,需要配合background-repeat:no-repeat使用。

  在图像不需要填满整个区域的时候,你可以使用background-position来定位图片,让其显示在你想要的位置,需要配合background-repeat:no-repeat使用。

  在学习如何定位之前,我们应该先了解一下CSS中的坐标系:

  在学习如何定位之前,我们应该先了解一下CSS中的坐标系:

  

  

   坐标原点即盒子的左顶点,水平向右为x轴正方向,垂直向下为y轴正方向。

   坐标原点即盒子的左顶点,水平向右为x轴正方向,垂直向下为y轴正方向。坐标原点即盒子的左顶点,水平向右为x轴正方向,垂直向下为y轴正方向。

1 p{
2     background-img:url('url');
3     backrgound-repeat:no-repeat;
4     background-position:50px 50px;/*设置水平和垂直偏移量*/
5 }
1 p{
2     background-img:url('url');
3     backrgound-repeat:no-repeat;
4     background-position:50px 50px;/*设置水平和垂直偏移量*/
5 }

1 p{
2 background-img:url(‘url’);
3 backrgound-repeat:no-repeat;
4 background-position:50px 50px;/*设置水平和垂直偏移量*/
5 }
1p2 background-imgurl(‘url’)3 backrgound-repeatno-repeat4 background-position50px 50px/*设置水平和垂直偏移量*/5

  偏移量可以是正值,也可以是负值,单位可以使px,百分比,em,或者单位名词。

  偏移量可以是正值,也可以是负值,单位可以使px,百分比,em,或者单位名词。

  

  

  4,关联

  4,关联4,关联

  通常,如果我们设置了背景图片,且网页内容较多,出现滚动条时,当我们滑动滚动条,背景图片也会随着网页一起滚动。如果你想让背景图片固定不动,即使滑动滚动条,也只是内容上下或左右移动,那么你可以通过设置背景与滚动条的关联方式来达到目的。

  通常,如果我们设置了背景图片,且网页内容较多,出现滚动条时,当我们滑动滚动条,背景图片也会随着网页一起滚动。如果你想让背景图片固定不动,即使滑动滚动条,也只是内容上下或左右移动,那么你可以通过设置背景与滚动条的关联方式来达到目的。

1 div{
2     background-img:url('url');
3     background-attachment:fixed;
4     /*另一个取值scroll是该属性的默认值,即图片随滚动条一起滚动*/
5 }
1 div{
2     background-img:url('url');
3     background-attachment:fixed;
4     /*另一个取值scroll是该属性的默认值,即图片随滚动条一起滚动*/
5 }

1 div{
2 background-img:url(‘url’);
3 background-attachment:fixed;
4 /*另一个取值scroll是该属性的默认值,即图片随滚动条一起滚动*/
5 }
1div2 background-imgurl(‘url’)3 background-attachmentfixed4/*另一个取值scroll是该属性的默认值,即图片随滚动条一起滚动*/5

 

  5,简写

  5,简写5,简写

  如果你想一次设置多个背景相关的属性,其实你大可不必像上面那样。上面介绍的背景相关属性可以简写为:

  如果你想一次设置多个背景相关的属性,其实你大可不必像上面那样。上面介绍的背景相关属性可以简写为:

1 /*background:颜色 图片 平铺方式 关联方式 定位*/
2 div{
3     background:red url('url') no-repeat fixed 50px 50px;
4 }
1 /*background:颜色 图片 平铺方式 关联方式 定位*/
2 div{
3     background:red url('url') no-repeat fixed 50px 50px;
4 }

1 /*background:颜色 图片 平铺方式 关联方式 定位*/
2 div{
3 background:red url(‘url’) no-repeat fixed 50px 50px;
4 }
1/*background:颜色 图片 平铺方式 关联方式 定位*/
2div3 backgroundred url(‘url’) no-repeat fixed 50px 50px4

 

  6,渐变

  6,渐变6,渐变

  你一定在网页上见过渐变色,它是那么的炫酷,现在,你也可以通过css定义自己的渐变色了。

  你一定在网页上见过渐变色,它是那么的炫酷,现在,你也可以通过css定义自己的渐变色了。

  使用linear-gradient()函数创建线性渐变。

  使用linear-gradient()函数创建线性渐变。使用linear-gradient()函数创建线性渐变。

  函数需要3个或多个参数,第一个表示渐变方向(可以是关键字或角度deg),第二个表示开始颜色,第三个表示结束颜色,如果在后面添加了更多的颜色,那么这些颜色都会在渐变过程中出现。

  函数需要3个或多个参数,第一个表示渐变方向(可以是关键字或角度deg),第二个表示开始颜色,第三个表示结束颜色,如果在后面添加了更多的颜色,那么这些颜色都会在渐变过程中出现。

1 p{
2     background:linear-gradient(to right,red,blue);
3     /*创建一个从左到右的,从红色到蓝色的渐变*/
4 }
5 p{
6     background:linear-gradient(to bottom right,red,blue);
7     /*创建一个从左上角到右下角的,从红色到蓝色的渐变*/
8 }
1 p{
2     background:linear-gradient(to right,red,blue);
3     /*创建一个从左到右的,从红色到蓝色的渐变*/
4 }
5 p{
6     background:linear-gradient(to bottom right,red,blue);
7     /*创建一个从左上角到右下角的,从红色到蓝色的渐变*/
8 }

1 p{
2 background:linear-gradient(to right,red,blue);
3 /*创建一个从左到右的,从红色到蓝色的渐变*/
4 }
5 p{
6 background:linear-gradient(to bottom right,red,blue);
7 /*创建一个从左上角到右下角的,从红色到蓝色的渐变*/
8 }
1p2 backgroundlinear-gradient(to right,red,blue)3/*创建一个从左到右的,从红色到蓝色的渐变*/45p6 backgroundlinear-gradient(to bottom right,red,blue)7/*创建一个从左上角到右下角的,从红色到蓝色的渐变*/8

  使用radial-gradient()函数创建径向渐变。

  使用radial-gradient()函数创建径向渐变。使用radial-gradient()函数创建径向渐变。

  函数需要3个或多个参数,第一个参数定义渐变的圆点,默认值为center,即元素的中心点,你也可以通过具体尺寸或关键字(top,right,bottom,left,center或他们的组合)指定其位置;第二个参数定义径向渐变的形状(circle(圆),ellipse(椭圆,默认值))和大小。然后是起止颜色,同线性渐变。你也可以给每个颜色后面添加一个百分比(用空格隔开),表示该颜色在整个渐变区域中的占比。

  函数需要3个或多个参数,第一个参数定义渐变的圆点,默认值为center,即元素的中心点,你也可以通过具体尺寸或关键字(top,right,bottom,left,center或他们的组合)指定其位置;第二个参数定义径向渐变的形状(circle(圆),ellipse(椭圆,默认值))和大小。然后是起止颜色,同线性渐变。你也可以给每个颜色后面添加一个百分比(用空格隔开),表示该颜色在整个渐变区域中的占比。

1 p{
2     background:radial-gradient(top center,circle,orange 70%,purple 30%);
3     /*定义一个以盒子上边缘中间点为圆点,橘色占70%,紫色占30%的圆形径向渐变。*/
4 }
1 p{
2     background:radial-gradient(top center,circle,orange 70%,purple 30%);
3     /*定义一个以盒子上边缘中间点为圆点,橘色占70%,紫色占30%的圆形径向渐变。*/
4 }

1 p{
2 background:radial-gradient(top center,circle,orange 70%,purple 30%);
3 /*定义一个以盒子上边缘中间点为圆点,橘色占70%,紫色占30%的圆形径向渐变。*/
4 }
1p2 backgroundradial-gradient(top center,circle,orange 70%,purple 30%)3/*定义一个以盒子上边缘中间点为圆点,橘色占70%,紫色占30%的圆形径向渐变。*/4

  由于渐变在CSS3才被引入,所有现在各大浏览器对它的支持各不相同,并且语法也与标准语法有一定出入,在使用时请一定作重考虑他们的兼容性问题。更多渐变知识请参考https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Using_CSS_gradients

  由于渐变在CSS3才被引入,所有现在各大浏览器对它的支持各不相同,并且语法也与标准语法有一定出入,在使用时请一定作重考虑他们的兼容性问题。更多渐变知识请参考https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Using_CSS_gradientshttps://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Using_CSS_gradients

 

 

» 本文来自:前端开发者 » 《CSS基础_橘里_前端开发者》
» 本文链接地址:https://www.rokub.com/73430.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!