HTML/CSS从零开始-惯用属性(三) - HTML/CSS当前位置:& &&&HTML/CSS从零开始-惯用属性(三)HTML/CSS从零开始-惯用属性(三)www.MyException.Cn&&网友分享于：&&浏览：0次HTML/CSS从零开始-常用属性(三)&
一、css文本属性
&（1）文本大小{font-size:}
&&& 单位：pt:9pt=12浏览器默认字体大小为16px&&&&&&&&& em:1em=16&&& 在CSS2.0中&&& xx-small:9px&&&& x-small:11px&&&&&& small:13px&&&&&& medium:16px&&&&&& large:19px&&&& x-large:23px&&& xx-large:27px
(2)字体颜色
& {color: rbg250,250,250/#000000/}
(3)文本字体{font-family:"字体1","字体2","字体三";}
& 浏览器按字体解读& 注意：字体名为中文时加双引号:&微软雅黑&；单个英文单词可不加:A英文有空格加引号：&Times New Romen&;
(4）字体加粗{font-weight:;}
& 属性值：normal/500(常规);bold/600-900(加粗)；bolder(更粗)；
(5)文字倾斜
{font-style:itatic（斜体字）/oblique（倾斜的文字）/normal(取消倾斜)}
(6)水平对齐方式
{text-align:left/center/right/justify(两端对齐);}
(7)垂直对齐方式
{vertical-align:top/bottom/}
(8)文本行高
{line-height:normal/}测量行高：本行文字的顶部到下一行文字的顶部；单行文本：行高=容器高时，垂直居中；行高&容器高时垂直偏上;说明：font简写顺序： font-style font-weight font-size/line-height font-&&&&&&&&&&&&&&&&& {normal 600 16px "微软雅黑";}
(9)文本修饰
{text-decoration:none/underline（下划线）/overline（下划线）/line-through(添加删除线)}扩展：&del&添加删除线&/del&
(10)首行缩进
{text-indent:}&&& value是字的个数单位为：&&& text-indent为负值，往前退&&& 只对文本首行起作用
（11）字间距
{letter-spacing:}控制英文字母与汉字之间的距离扩展：{word-break：break-}=&br/&换行
{border-top/bottom/right/left:1px solid/dotted/dashed/}
三、CSS列表属性
(1)列表符号样式
{list-style-type:disc(实心圆)/circle(空心圆)/squrare(空心方宽)/none(去掉列表符号);}&& & {list-style-type:none}同等于{list-}
(2)图片作为列表符号
{list-style-image:url();}
(3)定义列表符号位置
{list-style-position:ouside/}
(4)去掉列表符号
{list-style:}
四、背景属性
（1）背景颜色{background-color:}（2）背景图片{background-image:url(路径);}（3）背景图平铺{background-repeat:no-repeat(不平铺)/repeat(平铺)/repeat-x(水平铺)/repeat-y(垂直平铺);}（4）背景图固定{background-attachment：scroll(滚动)/fixed(固定);}（5）背景图位置{background-position:x y(数值：50px 50方向：)}&&&& 方向位置有：水平（left/center/right）垂直(top/center/bottom)（6）简写：{background:url() no-repeat center top fixed& #f00;}&&&&&&&&&& {background:url() no-repeat center 100px #f00}
五、网页常用的图片格式
（1）jpg:有损压缩 损失质量 适用颜色丰富的图像（2）gif:有损压缩 损失色彩 支持透明、动画 适用颜色较少的图像（3）png:损失图片色彩较少，不支持动画，支持透明，是说明：要求高存png,要求更高存gif,兼容时使用
六、浮动（让竖立的元素横着排）
& {float:left/right/none}（1）清除浮动{clear:left/right/}说明：浮动之后的元素是脱离文档流是悬浮在上面的，当你浮动元素的前面那个元素是标准流中的元素时（没有浮动）浮动之后的元素的位置是靠浏览器的，浮动元素后面的没有浮动的元素会挤进浮动元素原来的位置。（2）解决高度塌陷高度塌陷：产生的条件父级元素没有写高度，子元素浮动；解决办法：(1)在浮动元素的最后加一个空的&div&&/div&,给这个div写上声明div{clear:}&&&&&&&&& (2)在css中给父级元素添加一个声明，div{overflow:}
七、盒模型
1、定义：网页元素如何显示以及相互关系。&边框 边界& 补白 内容区
2、padding(补白)(1)填充：padding在设定页面中的一个元素中一个元素内容到元素的边缘（边框）之间的距离，补白；(2)用来调整内容在容器中的位置关系(3)用来调整子元素在父级元素中的位置(4)padding属性加在父级元素上面关于padding值减不减问题？1、减：父级元素有宽高2、不减：父级元素没有宽高;(5)如何减？高-（top+bottom）；宽-（left+right）；&&&&& &3、语法：四个值：{padding：top right bottom left；}一个值：{padding：20px}={padding:20px 20px 20px 20}二个值：{padding：20px 30px；}={padding：20px 30px 20px 30}二个值：{padding：20px 30px 40px；}={padding：20px 30px 40px 30}拆分：{padding-top/right/bottom/left:value；}
2、margin(1)边际：margin在设定页面中元素外边的空白区；(2)margin属性加在子级元素上面&&&&& (3)语法：四个值：{margin：top right bottom left；}一个值：{margin：20px}={padding:20px 20px 20px 20}二个值：{margin：20px 30px；}={padding：20px 30px 20px 30}二个值：{margin：20px 30px 40px；}={padding：20px 30px 40px 30}拆分：{margin-top/right/bottom/left:value；}&&&&&& &&
12345678910
12345678910
12345678910 上一篇：下一篇：文章评论相关解决方案 1234567891011 Copyright & &&版权所有html+CSS如何改方宽里面的背景色_百度知道
html+CSS如何改方宽里面的背景色
我有更好的答案
元素的内容会显示在浏览器的标题栏中;text/css&/head&&body&&p&&&/p&height:100&&class=&classtest&html&&nbsp。&&HTML&元素的内容会显示在浏览器中;head&页面&是一个方块&/div&&/body&gt:&&&}&&title&我的第一个&&&&/title&&&&nbsp。&&/p&div&style=&width:60.classtest{&&&&background-style&type=&body&p&title&nbsp&/style&gt
采纳率：85%
来自团队：
为您推荐：
您可能关注的内容
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。&nbsp>&nbsp
&nbsp>&nbsp
&nbsp>&nbsp
HTML/CSS从零开始-常用属性(三)
摘要：&一、css文本属性&(1)文本大小{font-size:}&&&单位:pt:9pt=12浏览器默认字体大小为16px&&&&&&&&&em:1em=16&&&在CSS2.0中&&&xx-small:9px&&&&x
一、css文本属性
&(1)文本大小{font-size:}
&&& 单位:pt:9pt=12浏览器默认字体大小为16px&&&&&&&&& em:1em=16&&& 在CSS2.0中&&& xx-small:9px&&&& x-small:11px&&&&&& small:13px&&&&&& medium:16px&&&&&& large:19px&&&& x-large:23px&&& xx-large:27px
(2)字体颜色
& {color: rbg250,250,250/#000000/}
(3)文本字体{font-family:&字体1&,&字体2&,&字体三&;}
& 浏览器按字体解读& 注意:字体名为中文时加双引号:“微软雅黑”;单个英文单词可不加:A英文有空格加引号:“Times New Romen”;
(4)字体加粗{font-weight:;}
& 属性值:normal/500(常规);bold/600-900(加粗);bolder(更粗);
(5)文字倾斜
{font-style:itatic(斜体字)/oblique(倾斜的文字)/normal(取消倾斜)}
(6)水平对齐方式
{text-align:left/center/right/justify(两端对齐);}
(7)垂直对齐方式
{vertical-align:top/bottom/}
(8)文本行高
{line-height:normal/}测量行高:本行文字的顶部到下一行文字的顶部;单行文本:行高=容器高时,垂直居中;行高&容器高时垂直偏上;说明:font简写顺序: font-style font-weight font-size/line-height font-&&&&&&&&&&&&&&&&& {normal 600 16px &微软雅黑&;}
(9)文本修饰
{text-decoration:none/underline(下划线)/overline(下划线)/line-through(添加删除线)}扩展:&del&添加删除线&/del&
(10)首行缩进
{text-indent:}&&& value是字的个数单位为:&&& text-indent为负值,往前退&&& 只对文本首行起作用
(11)字间距
{letter-spacing:}控制英文字母与汉字之间的距离扩展:{word-break:break-}=&br/&换行
{border-top/bottom/right/left:1px solid/dotted/dashed/}
三、CSS列表属性
(1)列表符号样式
{list-style-type:disc(实心圆)/circle(空心圆)/squrare(空心方宽)/none(去掉列表符号);}&& & {list-style-type:none}同等于{list-}
(2)图片作为列表符号
{list-style-image:url();}
(3)定义列表符号位置
{list-style-position:ouside/}
(4)去掉列表符号
{list-style:}
四、背景属性
(1)背景颜色{background-color:}(2)背景图片{background-image:url(路径);}(3)背景图平铺{background-repeat:no-repeat(不平铺)/repeat(平铺)/repeat-x(水平铺)/repeat-y(垂直平铺);}(4)背景图固定{background-attachment:scroll(滚动)/fixed(固定);}(5)背景图位置{background-position:x y(数值:50px 50方向:)}&&&& 方向位置有:水平(left/center/right)垂直(top/center/bottom)(6)简写:{background:url() no-repeat center top fixed& #f00;}&&&&&&&&&& {background:url() no-repeat center 100px #f00}
五、网页常用的图片格式
(1)jpg:有损压缩 损失质量 适用颜色丰富的图像(2)gif:有损压缩 损失色彩 支持透明、动画 适用颜色较少的图像(3)png:损失图片色彩较少,不支持动画,支持透明,是说明:要求高存png,要求更高存gif,兼容时使用
六、浮动(让竖立的元素横着排)
& {float:left/right/none}(1)清除浮动{clear:left/right/}说明:浮动之后的元素是脱离文档流是悬浮在上面的,当你浮动元素的前面那个元素是标准流中的元素时(没有浮动)浮动之后的元素的位置是靠浏览器的,浮动元素后面的没有浮动的元素会挤进浮动元素原来的位置。(2)解决高度塌陷高度塌陷:产生的条件父级元素没有写高度,子元素浮动;解决办法:(1)在浮动元素的最后加一个空的&div&&/div&,给这个div写上声明div{clear:}&&&&&&&&& (2)在css中给父级元素添加一个声明,div{overflow:}
七、盒模型
1、定义:网页元素如何显示以及相互关系。&边框 边界& 补白 内容区
2、padding(补白)(1)填充:padding在设定页面中的一个元素中一个元素内容到元素的边缘(边框)之间的距离,补白;(2)用来调整内容在容器中的位置关系(3)用来调整子元素在父级元素中的位置(4)padding属性加在父级元素上面关于padding值减不减问题?1、减:父级元素有宽高2、不减:父级元素没有宽高;(5)如何减?高-(top+bottom);宽-(left+right);&&&&& &3、语法:四个值:{padding:t}一个值:{padding:20px}={padding:20px 20px 20px 20}二个值:{padding:20px 30}={padding:20px 30px 20px 30}二个值:{padding:20px 30px 40}={padding:20px 30px 40px 30}拆分:{padding-top/right/bottom/left:}
2、margin(1)边际:margin在设定页面中元素外边的空白区;(2)margin属性加在子级元素上面&&&&& (3)语法:四个值:{margin:t}一个值:{margin:20px}={padding:20px 20px 20px 20}二个值:{margin:20px 30}={padding:20px 30px 20px 30}二个值:{margin:20px 30px 40}={padding:20px 30px 40px 30}拆分:{margin-top/right/bottom/left:}&&&&&& &&
以上是的内容，更多
的内容，请您使用右上方搜索功能获取相关信息。
若你要投稿、删除文章请联系邮箱：zixun-group@service.aliyun.com,工作人员会在五个工作日内给你回复。
云服务器 ECS
可弹性伸缩、安全稳定、简单易用
&40.8元/月起
预测未发生的攻击
&24元/月起
为您提供0门槛上云实践机会
你可能还喜欢
你可能感兴趣
阿里云教程中心为您免费提供
HTML/CSS从零开始-常用属性(三)相关信息，包括
的信息，所有HTML/CSS从零开始-常用属性(三)相关内容均不代表阿里云的意见！投稿删除文章请联系邮箱：zixun-group@service.aliyun.com，工作人员会在五个工作日内答复
售前咨询热线
支持与服务
资源和社区
关注阿里云
International