前端精通CSS+DIV 网页样式与布局

初级前端开发需要会哪些 前端程序开发软件 web前端开发需要的软件

1、p{font-family:黑体,Arial,宋体, sans-serif;}
1)一些字体的名称中间会出现空格,例如Times New Roman,这时需要用双引号将其引起来,如“Times New Roman”。
2)通常见到的“sans-serif”和“serif”不是单个字体的名称,而是一类字体的统称。
打印机体是等宽字体,因此独立出“monospace”这一种类。
“sans-serif”的外观类似于黑体,边角没装饰;“serif”则类似宋体有装饰。
通常文章的 正文使用的是易读性较强的serif字体,用户长时间阅读下不容易疲劳。而 标题和表格则采用较醒目的sans-serif字体,它们需要显著和醒目,但不必长时间盯着这些文字来阅读。web设计及浏览器设置中也推荐遵循此原则。
2、 绝对单位:in、cm、mm、pt、pc,不会因显示器分辨率而改变大小。
   关键字一共7个:font-size:x-small;……在不同浏览器中的显示效果不一样因此不推荐使用。
    相对单位设置灵活,常用。“px”表示具体的像素,因此其显示大小与显示器的大小及其分辨率有关。采用“%”或“em”都是相对于父标记而言的比例,如果没有设定父标记的字体大小,则相对于浏览器的默认值。
   文字粗细在css中是通过属性 font-weight来设置的。斜体通过 font-style属性。
   文字的下划线、顶划线、删除线通过{ text-decoration:underline overline line-through;}
   英文字母大小写转换通过 text-transform属性。capitalize单词首字大写 uppercase全部大写 lowercase全部小写
———————————————————————————————————————————————————————
3、background:url(01.jpg)repeat-x bottom;底部背景
4、 设置标题图标的两种方式:
1) h1{…… background:url(1.jpg) no-repeat 0 50%;}
   0和50%代表的含义:表示背景图片放的位置。第一个是水平位置,第二个是垂直位置。0表示从最左边开始,50%表示垂直居中。
    显示效果会在标题前方出现一个icon.gif图标,这样在升级网站时仅仅需要上传一个新的图标,然后修改css文件,即可将所有<h1>标题前的图标更换,大大提高了工作效率。(批量更换)
2) <h1><img src=“bg.gif”border=“0”>……</h1>
   用这种编码有两个原因:1是有各种各样的图标,取决于标题的主题;2是网站或许会根据当前的时间更换整个站点的配色方案。
   要让这些图标随着页面上其他元素一起变换颜色,并不需要每次都创建新的图标,创建一些透明的gif图标即可。
    透过图标中透明的部分,使用css中的background属性设置其透出来的颜色,便可以实现风格的改变。
5、CSS段落文字
1) text-align 段落水平对齐:left、right、center、justify两端对齐
2) vertical-align 段落垂直对齐
    对于文字本身而言,该属性对于块级元素并不起作用,例如<p>和

等标记。但对于表格而言,这个属性则显的十分重要。
   如果对vertical-align属性设置具体的数值,对于文字本身则可以在垂直方向上发生位移,正数向上移动,负数向下移动。
   这个属性还有很多其他的值,不过主要适用于图片。
3) line-height 行间距  letter-spacing 字间距
   在静态页面中,文字大小固定时常常使用绝对数值,达到统一的效果。而对于论坛和博客这些可以由用户自定义字体大小的页面,通常设定为相对数值,可以随着用户自定义的字体大小而改变相应的行距。line-height 行距 8pt绝对数值 1.5em相对数值。
4)首字放大:p span{font-size:60px; float:left;padding-right:5px;……;}
    在CSS中还可以通过设置 伪类别“first-letter”来控制段落的第一个字母,也可以实现类似首字放大的效果。但设置了该属性的文字对一些其他的CSS样式支持的不好,所以并不推荐使用。除了first-letter外,first-line可以设置元素内第一行的样式风格。如: p:first-line{text-decoration:underline;} 首行下划线
前端开发 制作动态页面 前端开发面试题hr 前端开发需要证书吗
» 本文来自:前端开发者 » 《前端精通CSS+DIV 网页样式与布局》
» 本文链接地址:https://www.rokub.com/5331.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!