1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > html网页让字体浮动的颜色 HTML/CSS从零开始-常用属性(三)(示例代码)

html网页让字体浮动的颜色 HTML/CSS从零开始-常用属性(三)(示例代码)

时间:2023-03-30 17:00:28

相关推荐

html网页让字体浮动的颜色 HTML/CSS从零开始-常用属性(三)(示例代码)

一、css文本属性

(1)文本大小{font-size:value;}

单位:pt:9pt=12px;浏览器默认字体大小为16px

em:1em=16px;

在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/red;}

(3)文本字体{font-family:"字体1","字体2","字体三";}

浏览器按字体解读

注意:字体名为中文时加双引号:“微软雅黑”;单个英文单词可不加:Arial;英文有空格加引号:“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/middle;}

(8)文本行高

{line-height:normal/value;}

测量行高:本行文字的顶部到下一行文字的顶部;

单行文本:行高=容器高时,垂直居中;行高

说明:font简写顺序: font-style font-weight font-size/line-height font-family;

{normal 600 16px "微软雅黑";}

(9)文本修饰

{text-decoration:none/underline(下划线)/overline(下划线)/line-through(添加删除线)}

扩展:添加删除线

(10)首行缩进

{text-indent:value;}

value是字的个数单位为:em;

text-indent为负值,往前退

只对文本首行起作用

(11)字间距

{letter-spacing:value;}

控制英文字母与汉字之间的距离

扩展:{word-break:break-all;}=

换行

二、边框

{border-top/bottom/right/left:1px solid/dotted/dashed/double;}

三、CSS列表属性

(1)列表符号样式

{list-style-type:disc(实心圆)/circle(空心圆)/squrare(空心方宽)/none(去掉列表符号);}

{list-style-type:none}同等于{list-style;none;}

(2)图片作为列表符号

{list-style-image:url();}

(3)定义列表符号位置

{list-style-position:ouside/inside;}

(4)去掉列表符号

{list-style:none;}

四、背景属性

(1)背景颜色{background-color:value;}

(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 50px;方向:right bottom;)}

方向位置有:水平(left/center/right)垂直(top/center/bottom)

(6)简写:{background:url() no-repeat center top fixed #f00;}

{background:url() no-repeat center 100px #f00 scroll;}

五、网页常用的图片格式

(1)jpg:有损压缩 损失质量 适用颜色丰富的图像

(2)gif:有损压缩 损失色彩 支持透明、动画 适用颜色较少的图像

(3)png:损失图片色彩较少,不支持动画,支持透明,是fireworks;

说明:要求高存png,要求更高存gif,兼容时使用gif;

六、浮动(让竖立的元素横着排)

{float:left/right/none}

(1)清除浮动{clear:left/right/both;}

说明:浮动之后的元素是脱离文档流是悬浮在上面的,当你浮动元素的前面那个元素是标准流中的元素时(没有浮动)

浮动之后的元素的位置是靠浏览器的,浮动元素后面的没有浮动的元素会挤进浮动元素原来的位置。

(2)解决高度塌陷

高度塌陷:产生的条件父级元素没有写高度,子元素浮动;

解决办法:(1)在浮动元素的最后加一个空的

(2)在css中给父级元素添加一个声明,div{overflow:hidden;}

七、盒模型

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 20px;}

二个值:{padding:20px 30px;}={padding:20px 30px 20px 30px;}

二个值:{padding:20px 30px 40px;}={padding:20px 30px 40px 30px;}

拆分:{padding-top/right/bottom/left:value;}

2、margin

(1)边际:margin在设定页面中元素外边的空白区;

(2)margin属性加在子级元素上面

(3)语法:

四个值:{margin:top right bottom left;}

一个值:{margin:20px}={padding:20px 20px 20px 20px;}

二个值:{margin:20px 30px;}={padding:20px 30px 20px 30px;}

二个值:{margin:20px 30px 40px;}={padding:20px 30px 40px 30px;}

拆分:{margin-top/right/bottom/left:value;}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。