从今天开始,我们迎来了一个新的面孔---CSS,二者这也是一个漂亮的面孔,为什么说这是一个漂亮的面孔呢?因为CSS是做特效的,可以美化HTML页面,我们看到淘宝网、网易首页等网站都非常好看,那都是一些专业的设计者用CSS美化出来的,那么这和程序员有什么关系呢?

程序员的确不用深入的研究CSS,但是程序员要读得懂设计者的代码,并且能灵活运用CSS操作HTML页面,做到和设计者完美的配合,只有合作好了,网站项目才能趋近于完美,诸葛亮很牛,但是他一个上战场打仗也肯定失败,就是这个道理,要合作,很好的合作。

我们已经知道CSS是美化HTML界面用的了,那么就让我进一步简单的介绍介绍CSS吧。

下面我来介绍一下CSS的常用属性,大家也可以根据我分享的CSS帮助文档自己查阅相应属性,一般属性都很容易理解是什么意思,因为那些属性一般都是用英语拼出来的,如果包含两个单词以上就用”-“符号在中间分隔。

1.文本属性

font-size:字体大小,属性值即为像素,如28px。

font-family:设置字体名称。

font-style:设置字体样式。

color:设置文本的颜色。值为”#”+6位十六进制的颜色值。前两位代表Red,后两位代表Blue,中间两位代表Green,值越大代表相应颜色越深。

text-align:文本对齐方式。

下面看一个具体例子:

<table border="10px">

<tr><td style="font-style:normal;font-size:36px">我是normal</td>       <td style="text-align:center;color:#FF0000;font-size:20px;font-family:Arial,Helvetica, sans-serif;font-style:italic">我是italic</td></tr>

<tr><tdstyle="color:#0000ff;font-size:28px;text-align:right;font-style:inherit">我是inheri</td><tdstyle="color:#00FF00;font-size:42px;font-style:oblique">我是oblique</td></tr>

</table>

2.背景属性

background-color:设置背景颜色。

background-image:设置背景图像。

background-repeat:设置一个指定的图像如何被重复。有四个可取值,repeat-x,repeat,no-repeat,repeat-y;具体是什么效果,你可以自己试试看,别人说千遍不如自己一试,没错,具体什么效果,试试就知道了。

看下面的例子:

<fontstyle="background-color:#FF0000">我在北京</font><hr/>

<fontstyle="background-color:#00ff00">我在上海</font><hr/>

<fontstyle="background-color:#0000ff">我在广州</font><hr/>

3.方框属性

具体例子自己体验吧,也可以查看帮助文档,看看效果。

常用属性就介绍到这,下一节将介绍CSS的选择器,HTML与CSS结合的方式有很多,也有很多方便的地方,好的,下一节见。

DHTML【6】--CSS的更多相关文章

  1. DHTML【8】--CSS

    在讲HTML时说过,有个Style标签是在CSS里用的,是的,在HTML中添加CSS样式必须要用到Style,在标签里单独定义标签属性时用的是Style属性.上一节我们也说过,先不用管那个Style标 ...

  2. 【08】css sprite是什么,有什么优缺点

    [08]css sprite是什么?有什么优缺点? 概念:将多个小图片拼接到一个图片中.通过background-position和元素尺寸调节需要显示的背景图案. 优点: 减少HTTP请求数,极大地 ...

  3. 【10】css hack原理及常用hack

    [10]css hack原理及常用hack 原理:利用不同浏览器对CSS的支持和解析结果不一样编写针对特定浏览器样式.常见的hack有1)属性hack.2)选择器hack.3)IE条件注释 IE条件注 ...

  4. 【01】CSS规范

    [01]CSS规范 []https://drafts.csswg.org/indexes/(下图)   https://www.w3.org/TR/2011/REC-CSS2-20110607/   ...

  5. 【04】 CSS开发注意事项

    [04] CSS注意事项 1. 页面编码规范 1.1. 统一使用 UTF-8 编码,用@charset "utf-8"指定页面编码. 1.2. 全局字体设置: windows 7系 ...

  6. 【01】CSS制作的图形

    [01]CSS制作的图形   绘制五角星:   通过border绘制三角形.然后通过transfrom来旋转35度. 绘制对称的图形,最后绘制顶部的三角形即可.   元素本身,加上:before和:a ...

  7. 【荐】CSS实现漂亮实用带箭头的流程图

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 【转载】CSS 伪类-:before和:after

    :before和:after的作用就是在指定的元素内容(而不是元素本身)之前或者之后插入一个包含content属性指定内容的行内元素,最基本的用法如下: #example:before { conte ...

  9. 【经验】css

    1.父元素overflow:hidden,当父元素大小减小到不容纳子元素时,会出现滚动条.2.input的盒模型尺寸基准是content-box,它的宽度将是以width-border计算,也就是说一 ...

随机推荐

  1. .ignore插件自动忽略

    AS自带的.ignore文件 在AS中新建项目时,默认会创建一个.ignore文件,其中默认忽略的是 *.iml .gradle /local.properties /.idea/workspace. ...

  2. XML 标记使用的特殊字符对应内置实体

    下表为 XML 标记使用的字符列出了五种内置实体.   实体 实体引用 含义 lt < <(小于号) gt > >(大于号) amp & &(“and”符) a ...

  3. 015_xml_函数

    015_xml_函数 --环境准备******************************************************************* USE test --f:/t ...

  4. word2vec生成词向量原理

    假设每个词对应一个词向量,假设: 1)两个词的相似度正比于对应词向量的乘积.即:$sim(v_1,v_2)=v_1\cdot v_2$.即点乘原则: 2)多个词$v_1\sim v_n$组成的一个上下 ...

  5. iOS 不同类之间的传值

    iOS是面向对象开发的,有很多不同的类,很多时候会遇到类与类之间的"交流"需求,比如通知.传递数值等等,(通知可以用nsnotificationcenter来做, 以后总结)下面主 ...

  6. [逼死强迫症 - C&C++设计风格选择.1] : 命名规范

    1.命名规范 本系列的第一篇,命名风格本就是有关艺术审美,没有美与丑的绝对标准,本文难免带有主观选择倾向,但是会尽量保持客观的态度归纳几种主流的命名风格,仅供参考.制定规范是为了方便团队沟通和利于代码 ...

  7. 支持mdev的init脚本片断

    mount -t tmpfs mdev /dev mount -t sysfs sysfs /sys mkdir /dev/pts mount -t devpts devpts /dev/pts ec ...

  8. InstallShield安装包中集成第三方安装包的方案选择[转]

      我们在制作安装包时,有些情况下会涉及第三方安装的集成,这里将讨论如何调用安装第三方包,以及需要注意的事项. 第三方安装包的介质类型有很多,主要有:单独的一个Setup.exe,单独的一个msi包, ...

  9. winform 剔除空格与换行显示

    string strTeachingPlan = this.txtTeachingPlan.Text.ToString().Trim();  string[] maarr = strTeachingP ...

  10. oracle行转列和列转行

    目录[-] 一.行转列 1.1.初始测试数据 1.2. 如果需要实现如下的查询效果图: 1.3.延伸 二.列转行 1.1.初始测试数据 1.2. 如果需要实现如下的查询效果图: 一.行转列 1.1.初 ...