【精通CSS.DIV网页样式与布局】——css总结(一)

css总结(一)

所有CSS字体属性

Property

描述

font

在一个声明中设置所有的字体属性

font-family

指定文本的字体系列

font-size

指定文本的字体大小

font-style

指定文本的字体样式

font-variant

以小型大写字体或者正常字体显示文本。

font-weight

指定字体的粗细。

 

 

链接样式

链接的样式,可以用任何CSS属性(如颜色,字体,背景等)。

特别的链接,可以有不同的样式,这取决于他们是什么状态。

这四个链接状态是:

  • a:link - 正常,未访问过的链接
  • a:visited - 用户已访问过的链接
  • a:hover - 当用户鼠标放在链接上时
  • a:active - 链接被点击的那一刻

 

设置为若干链路状态的样式,也有一些顺序规则:

  • a:hover 必须跟在 a:link 和 a:visited后面
  • a:active 必须跟在 a:hover后面

 

列表

在HTML中,有两种类型的列表:

  • 无序列表 - 列表项标记用特殊图形(如小黑点、小方框等)
  • 有序列表 - 列表项的标记有数字或字母

 

所有的CSS列表属性

属性

描述

list-style

简写属性。用于把所有用于列表的属性设置于一个声明中

list-style-image

将图象设置为列表项标志。

list-style-position

设置列表中列表项标志的位置。

list-style-type

设置列表项标志的类型。

 

CSS margin(外边距)


CSS margin(外边距)属性定义元素周围的空间。


margin

margin 清除周围的(外边框)元素区域。margin 没有背景颜色,是完全透明的。

margin 可以单独改变元素的上,下,左,右边距,也可以一次改变所有的属性。

 

说明

auto

设置浏览器边距。
这样做的结果会依赖于浏览器

length

定义一个固定的margin(使用像素,pt,em等)

%

定义一个使用百分比的边距

Margin可以使用负值,重叠的内容。

 

CSS padding(填充)


CSS padding(填充)是一个简写属性,定义元素边框与元素内容之间的空间,即上下左右的内边距。


padding(填充)

当元素的 padding(填充)内边距被清除时,所释放的区域将会受到元素背景颜色的填充。

单独使用 padding 属性可以改变上下左右的填充。

说明

length

定义一个固定的填充(像素, pt, em,等)

%

使用百分比值定义一个填充

 

 

隐藏元素 - display:none或visibility:hidden

隐藏一个元素可以通过把display属性设置为"none",或把visibility属性设置为"hidden"。但是请注意,这两种方法会产生不同的结果。

visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。

实例

h1.hidden {visibility:hidden;}

 

第1部分 CSS基础知识篇  第1章 CSS的初步体验    1.1 CSS的概念    1.2 使用CSS控制页面    1.3 体验CSS   第2章 CSS的基本语法    2.1 CSS选择器    2.2 选择器声明   2.3 CSS的继承  第3章 用CSS设置丰富的文字效果    3.1 CSS文字样式   3.2 文字实例一:模拟Google公司Logo    3.3 文字实例二:制作页面的五彩标题    3.4 CSS段落文字   3.5 段落实例:百度搜索   第4章 用CSS设置图片效果    4.1 图片样式    4.2 图片的对齐   4.3 图文混排    4.4 图文实例:八仙过海  . 第5章 用CSS设置网页中的背景    5.1 背景颜色    5.2 背景图片    5.3 背景综合一:我的个人主页    5.4 背景综合二:古词《念奴娇·赤壁怀古》   第6章 用CSS设置表格与表单的样式    6.1 控制表格    6.2 表格实例一:隔行变色    6.3 表格实例二:鼠标经过时变色的表格    6.4 表格实例三:日历    6.5 CSS与表单    6.6 综合实例一:直接输入的Excel表格    6.7 综合实例二:模仿新浪网民调查问卷   第7章 用CSS设置页面和浏览器的元素    7.1 丰富的超链接特效   7.2 鼠标特效   7.3 页面滚动条   第8章 用CSS制作实用的菜单    8.1 项目列表    8.2 无需表格的菜单    8.3 菜单的横竖转换    8.4 菜单实例一:百度导航条    8.5 菜单实例二:流行的Tab菜单   第9章 CSS滤镜的应用    9.1 滤镜概述    9.2 通道(Alpha)    9.3 模糊(Blur)    9.4 运动模糊(Motion Blur)    9.5 透明色(Chroma)    9.6 下落的阴影(Dropshadow)    9.7 翻转变换(Flip)    9.8 光晕(Glow)    9.9 灰度(Gray)    9.10 反色(Invert)    9.11 遮罩(Mask)    9.12 阴影(Shadow)    9.13 X射线(X-ray)    9.14 浮雕纹理(Emboss和Engrave)    9.15 波浪(Wave)  第2部分 CSS+DIV美化和布局篇  第10章 理解CSS定位与div布局    10.1  div 标记与 span 标记   10.2 盒子模型   10.3 元素的定位    10.4 定位实例一:轻轻松松给图片签名    10.5 定位实例二:文字阴影效果   第11章 CSS+div布局方法剖析    11.1 CSS排版观念    11.2 固定宽度且居中的版式   11.3 左中右版式    11.4 块的背景色问题   11.5 排版实例:电子相册    11.6 div排版与传统的表格方式排版的分析   第12章 CSS+div美化与布局实战    12.1 框架搭建    12.2 实例一:蓝色经典    12.3 实例二:清明上河图    12.4 实例三:交河故城    12.5 自动选择CSS样式  第3部分 CSS混合应用技术篇  第13章 CSS与JavaScript的综合应用    13.1 JavaScript概述   13.2 JavaScript语法基础   13.3 实例一:输入时高亮显示的Excel表格    13.4 实例二:由远到近的文字    13.5 实例三:跑马灯特效    13.6 实例四:图片淡入淡出    13.7 实例五:CSS实现PPT幻灯片    13.8 实例六:灯光效果    13.9 实例七:舞台灯光    13.10 实例八:探照灯    13.11 实例九:鼠标文字跟随   第14章 CSS与XML的综合运用    14.1 XML基础    14.2 XML链接CSS文件    14.3 XML文字阴影效果    14.4 XML古诗字画    14.5 XML实现隔行变色的表格   第15章 CSS与Ajax的综合应用    15.1 Ajax概述    15.2 Ajax入门   15.3 Ajax实例:能够自由拖动布局区域的网页  第4部分 综合案例篇  第16章 我的博客    16.1 分析构架    16.2 模块拆分    16.3 整体调整   第17章 小型工作室网站    17.1 分析构架    17.2 模块拆分   17.3 整体调整   第18章 企业网站    18.1 分析构架   18.2 模块拆分   18.3 整体调整   第19章 网上购物网站    19.1 分析构架   19.2 模块分析   19.3 整体调整   第20章 旅游网站    20.1 分析构架    20.2 模块拆分   20.3 整体调整
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值