css字体属性定义文本的字体系列,大小,加粗,风格和变形等.

css中包含两种字体系列:通用字体系列和特定字体系列.

font-family属性定义文本的字体系列: body {font-family: sans-serif;}

font-style属性用于规定斜体文本.

font-variant属性设定小型大写字母.

font-weight属性设置文本粗细

font-size属性设置文本大小.如果要避免在ie中无法调整文本的问题,许多开发者使用em单位代替pixels.w3c推荐使用em尺寸单位.1em等于当前的字体尺寸.

设置链接样式特殊性在于能够根据它们所处的状态设置它们的样式:

a:link - 普通的

a:visited - 已访问的链接

a:hover - 鼠标指针位于链接上方

a:active - 链接被点击的时刻

当为不同状态设置样式时,必须按以下次序规则:

a:hover必须位于a:link和a:visited之后,active必须位于hover之后

background-color属性规定链接的背景色

css列表属性允许你放置,改变列表项标志,将图像作为列表项标志.

修改列表项的标志类型,可以使用属性list-style-type: ul {list-style-type : square}

list-style-image属性可以为标志使用一个图像:ul li {list-style-image:url(xxx.gif)}

list-style-position属性可以确定标志出现在列表项内容之外还是之内

可以用list-style将多个列表样式属性合并成一个:li {list-style: url(xxx.gif) square inside}

使用border属性设置css表格边框:

table,th,td{

border:1px solid blue;

}

上面例子为table,th,td设置蓝色边框,可以使用border-collapse属性设置是否将表格边框折叠为单一边框.

通过width和height属性定义表格的宽度和高度

text-align和vertical-align属性设置表格中文本对齐方式

如需控制表格内容与边框的距离,可以为td和th设置padding属性

下面代码列出了一个漂亮样式的列表:

<html>
<head>
<style type="text/css">
#customers
  {
  font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
  width:100%;
  border-collapse:collapse;
  }

#customers td, #customers th
  {
  font-size:1em;
  border:1px solid #98bf21;
  padding:3px 7px 2px 7px;
  }

#customers th
  {
  font-size:1.1em;
  text-align:left;
  padding-top:5px;
  padding-bottom:4px;
  background-color:#A7C942;
  color:#ffffff;
  }

#customers tr.alt td
  {
  color:#000000;
  background-color:#EAF2D3;
  }
</style>
</head>

<body>
<table id="customers">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>

<tr>
<td>Apple</td>
<td>Steven Jobs</td>
<td>USA</td>
</tr>

<tr class="alt">
<td>Baidu</td>
<td>Li YanHong</td>
<td>China</td>
</tr>

<tr>
<td>Google</td>
<td>Larry Page</td>
<td>USA</td>
</tr>

<tr class="alt">
<td>Lenovo</td>
<td>Liu Chuanzhi</td>
<td>China</td>
</tr>

<tr>
<td>Microsoft</td>
<td>Bill Gates</td>
<td>USA</td>
</tr>

<tr class="alt">
<td>Nokia</td>
<td>Stephen Elop</td>
<td>Finland</td>
</tr>

</table>
</body>
</html>

轮廓是绘制于元素周围的一条线,位于边框边缘的外围.css outline属性规定元素轮廓的样式,颜色和宽度.

以下代码在文本框外在画虚线框:

p {

border:red solid thin;

outline:#00ff00 dotted thick;

}

还可以用outline-color设置轮廓的颜色

用outline-style设置轮廓的样式

用outline-width设置轮廓的宽度

css框模型(box model)规定了元素框处理元素内容,内边距,边框和外边距的方式.

元素框最内部分是实际内容,直接包围内容的是内边距,内边距呈现了元素的背景.内边距的边缘是边框,边框以外是外边距,外边距默认是透明的,不会遮挡后面的元素.背景应用于由内容和内边距,边框组成的区域.可以使用通用选择器对所有元素进行设置:

* {

margin:0;

padding:0;

}

术语翻译:

element:元素 padding:内边距 border:边框 margin:外边距

边框内的空白是内边距,边框外的空白是外边距.

你可以安装上,右,下,左的顺序分别设置各边的内边距,各边均可使用不同的单位或百分比值:

h1 {padding:10px 0.25em 2ex 20%;}

也可以通过pading-top, -right , -bottom , -left设置如上属性.

可以为元素的内边距设置百分比数值,其为父元素width相对值,如果父元素width改变,它们也会改变.

元素的边框有3个方便:宽度,样式和颜色

可以把图片边框定义为outset,像凸起的按钮: a:link img {border-style:outset;}

使用border-width属性为边框指定宽度.由于border-style默认值为none,如果没有声明样式,就相当于border-style:none,因此如果希望边框出现,就必须声明一个边框样式.

css使用border-color属性设置边框颜色.

css2引入了边框颜色值transparent,该值创建有宽度的不可见边框.

设置外边距会在元素外创建额外空白,设置外边距最简单的方法就是使用margin属性.

外边距合并是指,当2个垂直外边距相遇时,它们将形成一个外边距,合并后外边距高度等于2个发生合并的外边距的高度较大者.

css定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局一部分和另一部分重叠.

div,h1或p元素被称为块级元素,这意味着这些元素显示为一块内容,即"块框".与之相反,span和strong称为行内元素,因为其内容显示在行中,即"行内框".可以使用display属性改变生成框的类型,通过将display设置为block,可以让行内元素表现的像块级元素一样.

恶补web之二:css知识(2)的更多相关文章

  1. 恶补web之二:css知识(3)

    css有3种定位机制:普通流,浮动和绝对定位. 除非专门指定,否则所有框都在普通流中定位,即普通流中的元素位置由元素在(x)html中的位置决定. 通过使用position属性,可以选择4种不同类型的 ...

  2. 恶补web之二:css知识(1)

    css指层叠样式表(Cascading Style Sheets)     样式定义如何显示html元素,样式通常存储在样式表里.把样式添加到html4.0中,是为了解决内容与表现分离的问题.外部样式 ...

  3. 恶补web之七:html DOM知识

    html DOM定义了访问和操作html文档的标准;dom是w3c的标准,dom定义了访问html和xml文档的标准: w3c文档对象模型(dom)是中立平台和语言的接口,它允许程序和脚本动态访问和更 ...

  4. 恶补web之一:html学习(1)

    发现以前欠下的web知识太多鸟,只有重头开始好好学吧,恶补第一站就是html知识啦! html指的是超文本标记语言,它不是编程语言,而是一种标记语言;标记语言是一套标记标签(markup tag),h ...

  5. 恶补web之六:javascript知识(2)

    若要向html添加新元素,必须首先创建该元素,然后向一个已存在的元素追加该元素 <div id="div1"> <p id="p1">这 ...

  6. 恶补web之六:javascript知识(1)

    javascript(下称js)是一种轻量级编程语言,它可以插入html页面然后由浏览器执行. document.write("<h1>...</h1>") ...

  7. 恶补web之一:html学习(2)

    iframe用于在网页内显示网页:<iframe src="URL"></iframe>,iframe可用作链接的目标: <!DOCTYPE html ...

  8. 恶补web之八:jQuery(3)

    jquery和其他js框架.jQuery使用$作为jQuery的简写,但是还有很多js框架,比如: MooTools,Backbone,Sammy,Cappuccino,Knockout,JavaSc ...

  9. 恶补web之八:jQuery(2)

    jquery中非常重要的部分,就是操作dom的能力: text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括html标记) val() - 设置或返回表单字段 ...

随机推荐

  1. Spark技术内幕: Task向Executor提交的源码解析

    在上文<Spark技术内幕:Stage划分及提交源码分析>中,我们分析了Stage的生成和提交.但是Stage的提交,只是DAGScheduler完成了对DAG的划分,生成了一个计算拓扑, ...

  2. Spark 1.0 开发环境构建：maven/sbt/idea

    因为我原来对maven和sbt都不熟悉,因此使用两种方法都编译了一下.下面记录一下编译时候遇到的问题.然后介绍一下如果使用IntelliJ IDEA 13.1构建开发环境. 首先准备java环境和sc ...

  3. Android面试题目总结

    1.java 基础题,输入结果是什么? public static void main(String[] args) { String str = new String("abc" ...

  4. JavaScript实现的网页放大镜效果

    今天在观看视频学习的时候,学到了一个小技巧.就拿过来与大家进行分享一下啦. 实现的原理 分析需求:需要两张图,一大一小.然后根据鼠标的动作显示出不同的区域块的图像. 核心:鼠标事件的获取和处理.图片显 ...

  5. （八十一）利用系统自带App来实现导航

    利用系统的地图App进行导航,只需要传入起点和终点.启动参数,调用MKMapItem的类方法openMapWithItems:launchOptions:来实现定位,调用此方法后会打开系统的地图App ...

  6. 【Unity技巧】制作一个简单的NPC

    1. 写在前面 前几天看了cgcookie的一个教程,学习了下怎么根据已有人物模型制作一个仿版的NPC人物,感觉挺好玩的,整理一下放到博客里! 先看一下教程里面的最终效果. 是不是很像个幽灵~ 下面是 ...

  7. 如何在Cocos2D游戏中实现A*寻路算法(六)

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请告诉我,如果觉得不错请多多支持点赞.谢谢! hopy ;) 免责申明:本博客提供的所有翻译文章原稿均来自互联网,仅供学习交流 ...

  8. HTTP请求方法

    HTTP请求方法 根据HTTP标准,HTTP请求可以使用多种请求方法. HTTP1.0定义了三种请求方法: GET, POST 和 HEAD方法. HTTP1.1新增了五种请求方法:OPTIONS, ...

  9. Chapter 2 User Authentication, Authorization, and Security（2）：创建登录帐号

    原文出处:http://blog.csdn.net/dba_huangzj/article/details/38705965,专题目录:http://blog.csdn.net/dba_huangzj ...

  10. 11.4、Libgdx的音频之录制PCM音效

    (官网:www.libgdx.cn) 可以通过AudioRecorder接口访问PCM数据.通过如下方式创建一个接口实例: AudioRecorder recorder = Gdx.audio.new ...