我的CSS 入门1

CSS(Cascading Style Sheets)级联样式表。我现在所知的,她的存在能够更好的管理多个HTML文件,或者是为了使得网页设计更为丰富多彩,“简单可依赖”。

如果你对HTML一无所知,没事,花二十分钟看之前写的HTML速成,然后就可以着手CSS了,你会发现CSS用起来真是爽。

开始吧:



1.初识CSS

你是否还记得当初在HTML中设置背景颜色我们用:

<p style="background-color: #FF0000"> This is red </p>

如果现在我们要将100行设置成如上,那是不是每一行都来一个style=XXXX呢。NO

如果我们在<head>中如下设置

<head>
    <style type="text/css">
        p{background-color: #FF0000;}
    </style>
</head>

然后来几个<p>

<p> First paragraph </p>
<p style="background-color: #FFFFFF"> Second </p>
<p>Third </p>

则会出现如下:

这个还需要解释吗?如果再head中的style中定义了p那么默认就是用那个格式,所以对于一百个我们需要的目标格式就用默认的就行,但是中间有特殊情况我不想默认怎么办呢(例如上例中Second背景为白色),那就直接在定义过格式,其实后面我们可以发现,我们可以给不同的格式不同的id,可以随心所欲的确定某些行用什么格式。

如上,就是已经用到了CSS了,我们称在当前HTML中的head中定义style的方式叫做内部样式表。上述说了CSS的好处之一是可以管理多个HTML,如果用内部样式表,显然不知如何。其实大工程用的肯定就是外部样式表了。



2.外部样式表

新建html文件一样,我们新建一个后缀名为.css的文件,然后用notepad++打开它,在里面操作(其实就是将内部样式表中style包含的东东赋值到css文件里头)。之后,在需要用该样式表的html文件的head中:

<head>
    <link rel="stylesheet" type="text/css" href="name.css">
</head>

这样相应的html文件就会用该css文件中的样式。这就叫做外部样式表。所以如果有一百个文件的格式统一要改的话,我们只要改一下css文件中的格式就可以了啊,真实爽爆天啊。

下面我们通过几个例子来多深入了解一下CSS。



3.背景设置

拼爹的时代,我们就从背景开始。例子:背景灰色,在页面中间插入图片,并且在该行平铺,随着鼠标滚动运动。

原始图片:

在style.css文件中写上:

body
{
    background-color: #DCDCDC;
    background-image: url("ball.jpg");
    background-repeat: repeat-x;
    background-attachment: scroll;
    background-position: center center;
}

然后新建一个html:引用这个css文件。

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
</body>

</html>

然后双击该html文件就会出现如下图了:

看到结果就是我们想要的。现在我们来每条语句学习。

background-color: #DCDCDC;  使得背景为#DCDCDC的颜色,这个颜色可以自己根据RGB表定,哪个看着爽,哪个来

background-image: url("ball.jpg");  图片的路径

background-repeat: repeat-x;  平铺方式,还可以是repeat,repeat-y,no-repeat,挨个试试效果去吧

background-attachment: scroll;  随着屏幕往下运动它往上消失,还可以是fixed,总是在页面中

background-position: center center;  就是一个图片的位置,如果是no-repeat,那么这个图片就只在中间了,除了中间还可以有对于x:left right 对于y:top bottom。

好了,到这,你已经可以给自己设置背景了。最后来一条语句概括所有五个功能。

body{ background: #DCDCDC url("ball.jpg") repeat-x scroll center center; }

这条效果和如上一样,是偷懒的写法,按照顺序的,如果缺省,则为默认值。



4.字体设置

为什么接着介绍字体设置呢,因为你刚学习了背景设置,以及背景设置的偷懒方法,现在告诉你,字体也是类似的,很快你就接受了。

同背景设置,我们直接分析字体的五个功能吧。

font-style: normal; 正常的方式,也可以是斜体,用italic或者oblique,记得我们之前说过的<i>是斜体吧,这个可以直接代替她。

font-vatiant: normal; 不做变换,也可以是small-caps,显示小体的大写字母。

font-weight: normal; 默认正常,也可以是bold加粗,还记得<b>加粗吧,同样可以代替。

font-size: 2px; 表示2pixels大小,可以用磅pt,可以用百分比 ~% 或者~em,em我不知道什么。

font-family: "宋体"; 确定字体,也可以是“Time NewRoman”,arial,等。据说在字体后面加个字体所属的族,那么如果计算机没有该字体就会在相应族类中选择。

例如:font-family:arial,sans-serif;

偷懒的方式就是:

font:- - - - -



5.文本操作

我们也通过例子来说吧。目标:对一句话,缩进10px,左对齐,下划线,字符间距2px,将首字母大写。

在css中我们写入:

p
{
    text-indent: 10px;
    text-align: left;
    text-decoration:underline;
    letter-spacing:2px;
    text-transform:capitalize;
}

在html中:

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

<p>hello everyone do you like english </p>

</body>

</html>

显示:

因为我们刚才设置了背景是灰色,所以还是灰色,发现都达到要求了。我们来学学这几个功能:

text-indent: 10px; 缩进功能,可以是像素或百分比
text-align: left; 对齐方式还可以是居中center,右对齐right,两端对齐justify
text-decoration:underline; 下划线修饰,可以是上划线line-through,删除线overline
letter-spacing:2px; 字符间距
text-transform:capitalize; 首字母大写,还可以是转换为大写字母uppercase,转为小写字母lowercase,不做变化none

我没有发现他们的偷懒写法,你可以去试试。

先到这吧。好好消化一下。

时间: 2024-08-24 03:53:30

我的CSS 入门1的相关文章

HTML与CSS入门——第十三章  使用框架

知识点: 1.建立框架集的方法 2.在框架和窗口之间链接的方法 3.使用内联框架的方法 13.1 什么是框架: 框架是浏览器窗口中的一个矩形区域,每个框架显示的是一个完整的页面. 作者不建议使用框架,原因: 1.框架与Web的基础概念冲突 /*什么概念?*/ 2.框架化的网站的打印部分非常困难. 3.如果框架爱缺乏合适的编码,或者有合适的编码但是被用于邪恶的目的,用户可能在框架化的网站中无法看到框架外部的内容. /*不明白……*/ 4.框架已经从html5标准中移除…… 但是iframe依旧存在

HTML与CSS入门——第十四章  使用边距、填充、对齐和浮动

知识点: 1.在元素周围添加边距的方法 2.在元素中添加填充的方法 3.对齐的方法 4.float属性的使用 这里提到了CSS禅意花园,这块有时间可以玩玩~ margin和padding:用于添加元素周围的间距 14.1 使用边距 margin是边距 参数可以有[1~4]4种类型 14.2 填充元素 padding用于填充border与内容之间的空间 参数与margin一致 14.3 保持对齐 align,对齐: 有text-align,vertical-align 使用值根据自己的需求再自行研

#2 CSS入门

CSS: cascading style sheets(层叠样式表) css2.0是现在我们教的版本(2013.11月教的) css3.0是最新的版本 推荐一个学习CSS的网站:禅意花园(PS:顶级优秀的网站) .dtd 文档类型定义:    这个是用来让一些低级版本的浏览器识别最新技术的命令. eg:  IE4.0版本的,如果识别最新的HTML的代码,有加上这个(HTML代码上面自动生成的这个东西) 浏览器就会自动到网站下载这个东西.然后就可以识别最新的命令 charset=UTF-8:  

CSS入门教程——定位(positon)

CSS入门教程——定位(positon) CSS定位在网页布局中是起着决定性作用. 定位 CSS的定位功能是很强大的,利用它你可以做出各种各样的网页布局.本节就介绍一些CSS常用的定位语句. 1.相对定位(relative) 相对定位是指相对它本来应该处的位置所做的移动. …… <style type="text/css">.dingwei{ position:relative; left:50px;} </style> …… <p>我是一段正常的文

HTML与CSS入门——第六章 使用字体

知识点: 1.粗体.斜体和特殊文本格式的使用 2.字体的调整方法 3.特殊字符的使用方法 6.1 粗体.斜体和特殊文本格式: font-weight控制粗细 加粗<strong> font-style控制斜体 斜体<em> 其他标签:small,sup,sub,tt,pre,strike PS:pre可以使得空格符和分行被保留. 6.2 调整字体: font-family,font-size,color. PS:用户可以自定义字体.注意字体名如果有空格需要用''包含. 6.3 使用

HTML与CSS入门——第七章 使用表格显示信息

知识点: 1.创建简单表格的方法 2.控制表格大小的方法 3.对齐内容及在表格中跨越行和列的方法 7.1 创建简单的表格: table标签,border控制边框 tr标签,创建表格的行,包含td td标签,单元格cell,其中th标签是表头的标题部分,自带居中加粗. 7.2 控制表格大小: width,height:可以用百分比来控制 7.3 表格中的对齐和跨越: 在表格中用text-align和vertical-align效果会出奇的好~ colspan跨列控制合并单元格,rowspan是跨行

HTML与CSS入门——第五章 使用文本块和列表

知识点: 1.在页面上对齐文本的方法 2.三种HTML列表的使用方法 3.在列表中放置列表的方法 5.1 在页面上对齐文本: 父元素内子元素文本的居中:在控制父元素的text-align:center 子元素相对于父元素的居中:在控制子元素的margin:0 auto; PS:div指的是division(分组). 5.2 三种HTML列表: <ol>...<li>:有序列表,整列表有缩进,每个列表项前有数字或者字母 <ul>...<li>:无序列表,与有序

HTML与CSS入门——第三章 理解HTML和XHTML的关系

知识点: 1.以HTML创建一个简单网页的方法 2.包含每个网页必须有的所有HTML标签的方法 3.用段落和换行组织页面的方法 4.用标题组织内容的方法 5.HTML.XML.XHTML和HTML5之间的差别 3.1 从一个简单的网页开始: 作者建议:从简单的文本编辑器开始学习,之后再转向可视化工具. 扩展名支持:.htm以及.html 如.jsp,.asp,.php之类的文件类型使用超出了HTML范围的服务器端技术,需要专门的服务端支持.比如Apache服务器 3.2 每个XHMTL网页必须有

第十二章 CSS入门

第 12 章 CSS 入门学习要点:1.使用 CSS2.三种方式3.层叠和继承 本章主要探讨 HTML5 中 CSS(层叠样式表),它是用来对 HTML 文档外观的表现形式进行排版和格式化. 一.使用 CSSCSS 样式由一条或多条以分号隔开的样式声明组成.每条声明的样式包含着一个 CSS属性和属性值.<p style="color:red;font-size:50px;">这是一段文本</p>解释:style 是行内样式属性.color 是颜色属性,red 是

html/css入门第一篇

1.基本教程学习 大概三天业余时间看完下面两个教程. HTML文字教程 CSS文字教程 2.练习 看完教程后,做第一练习时,总结如下: 1)div居中 需要设置属性:margin-left:auto; margin-right:auto; 2) 给图片加链接后,图片有边框,消除边框方法:给图片设置属性 border-width:0px; 3)图片相连时,图片间有距离,消除图片间距离:给图片设置属性 display: block; html/css入门第一篇