您的位置：首页 > Web前端 > CSS

web开发学习(一) Div+CSS网页设计学习

2014-01-22 15:24 501 查看

最近这段时间,利用晚上的空闲时间,简单的学习了下DIV+CSS样式数据布局,算是简单的入门吧!

现在简单的分享下一些简单的常用的属性：

1.CSS加入网页方法：主要分为三种：内部样式表、行内样式表（内嵌样式表）、外部样式表。

内部样式表主要定义在<head>内；行内样式表可直接使用style属性定义在标签内部；使用外部样式表时，css文件与网页文件（html）是分离开来的，分开的文件要用<link rel="stylesheet" type="text/css" href="文件位置、你的css文件名.css"/>链接起来，这主要针对css样式表较多的网页中，特别是要于DIV结合的网页。

2.如何设定文字字体、颜色、大小——使用font

font-style 设定斜体

font-weight 设定文字粗细

font-size 设定文字大小

font-family 设定字体

line-height 设定行距

color 设定字体颜色

以上除了color都可以写在一行font属性里；

3.如何控制段落排版——使用margin,text-align

中文段落使用<p>标签，左右（相当于缩进）、段前段后的空白，都可以用margin.比如：

P{

margin:18px 6px 6px 18px;

}

文字的对齐方式用text-align,比如：

p{

text-align:center;

}

对齐方式还有left right justify(两端对齐)

4.竖排文字——使用writing-mode

5.项目符号问题——使用list-style

6.首行缩进——使用text-indent

7.设置背景属性——使用（background）

background属性包含很多子属性，如background-color设置背景颜色；background设置背景图片；background-repeat设置背景图片的是否重复设置；background-position设置背景图片的显示位置；

以上图片属性均可写在一起，如：background:url(绝对路径或相对路径)；background-repeat,background-position:x y 坐标或百分比

8.链接（a）

css链接有四个属性：其中a:link(未访问的链接)、a:visited(已经访问的链接)、a:hover(鼠标悬停的链接)、a:active(按下鼠标的链接)，这几个顺序不能颠倒，否则可能造成部分样式无法正常显示。每个样式里可以更改字体属性、下划线、背景等。

9.DIV+CSS盒子模型;

从上图可以看到标准 W3C
盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。

对于门户或其他大型网站来说，用DIV+CSS可占绝对优势，只需改动CSS文件就完成了所有的改版。就像换衣服一样简单容易，改版时，不用改动全站HTML页面，只需重新写css，再用新css覆盖以前的css就可以实现了改版了。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航