html自我介绍网页模板代码加上css(用html做自我介绍代码)

http://www.itjxue.com  2023-02-02 22:42  来源:未知  点击次数: 

需要在html中加CSS怎么加

三种方式

一种是直接写到标签上的style属性里面

div?id="myDIV"?style="width:?200px;border:?1px?solid?#f00;margin:?0;"/div

一种是写到head标签里面的style标签里面

style?type="text/css"

????#myDIV{

????????width:?200px;border:?1px?solid?#f00;margin:?0;

????}

/style

再一个就是引入外部的css文件

link?rel=stylesheet?type=text/css?href="/css/skin.css"

使用引入外部css文件可以多个页面公用css格式,减小页面大小,三种都在页面里的最简单情形如下

!DOCTYPE?html

html?lang="en"

head

????meta?charset="UTF-8"

????titleTest/title

????style?type="text/css"

????????#myDIV{

????????????width:?200px;border:?1px?solid?#f00;margin:?0;

????????}

????/style

????link?rel=stylesheet?type=text/css?href="/css/skin.css"

/head

body

????div?id="myDIV"?style="width:?200px;border:?1px?solid?#f00;margin:?0;"/div

/body

/html

用html制作一个个人网页要求有五个链接,每页都有css格式

方法/步骤

1

CSS是由选择器加声明组成的。

比如:

h1{color:red;}

h1就是选择器,意思是只要遇到h1,就使用该CSS的规则

color:red; :这个事声明

color:这个是属性

red:这个是值

2

OK,我们先来分析选择器。

END

一.选择器

1

选择器的种类很多,各有各的作用。我们来一一讲解。

标签选择器

class选择器

id选择器

全局选择器

组合选择器

伪类选择器

2

标签选择器

顾名思义,HTML中有许多标签,而标签选择器就是用来给标签直接申明样式的,简单、实用、常用。

举例:

p{color:red;}

只要是p标签,其P标签内部的颜色,都是红色。

如图代码

headmeta http-equiv="Content-Type" content="text/html; charset=utf-8" /title无标题文档/titlestylep{ color:red;}/style/headbodyp嘿嘿哦嘿嘿呀哦嘿嘿哦/p/body

其中,style标签是样式标签,请将CSS放在其中

(这部分内容后续会介绍,这里只是先提一下)

3

看网页效果

4

class选择器

也叫做类选择器,直接说概念估计你也不明白,直接上例子吧。

举例:

.alsp{color:red;}

这就是一个class选择器,意思是有一种CSS的样式,其名字是alsp,谁想用谁用。

看代码:

headmeta http-equiv="Content-Type" content="text/html; charset=utf-8" /title无标题文档/titlestyle type="text/css".alsp{color:red;}/style/headbodyp class="alsp"嘿嘿哦嘿嘿呀哦嘿嘿哦/pol class="alsp"li嘿啥嘿/lili我想嘿嘿/lili专制各种不服/li/olp世界为亡,死不投降/p/body

5

看网页效果

通过.alsp定义一个class选择器。

在后面的代码中,哪个标签想用,就用class="alsp"去调用,就可以使用这件“衣服”来修饰自己了

6

ID选择器

ID和class很像,但是和class有一个区别。class像姓名,两个人是可以同名的,但是id像身份证,只有一个人可以使用。

例如:

#alsp{color:red;}

OK,上代码:

#alsp{color:red;}/style/headbodyp id="alsp"嘿嘿哦嘿嘿呀哦嘿嘿哦/polli嘿啥嘿/lili我想嘿嘿/lili专制各种不服/li/olp世界为亡,死不投降/p/body

7

看网页效果

只能有一个标签使用该id,或者说该标签专属ID

8

全局选择器

*{margin:0; padding:0;}

这个很简单,前面用个*来表示,整个网页都会使用。这句话也是网页基本都要添加的,什么意思呢?自己试试看吧。

9

组合选择器

组合选择,小编是非常喜欢使用的,原因无他,懒而已。他可以减少代码量,并且方便、易读。

不过组合选择器的组合方式比较多,但也多很好理解。

1)群模式

比如:

h1{color:red; font-size:14px;}

p{color:red; font-size:14px;}

a{color:red; font-size:14px;}

这三个虽然标签不同,但是样式是一模一样的,所以,可以这样写:

h1,p,a,{color:red; font-size:14px;}

2)继承模式

比如:

.alsp li{color:red;}

ul class=".alsp"

lifdf/li

/ul

li是在ul之中的,算是ul的后代。通过.alsp li确定li是属于调用alsp类选择器里的li标签,其他的li标签并不会使用该样式。

3)群模式(多元素并列选择器)

其实也是一种特殊的群模式

p.alsp{color:red;}

p class="alsp"p.alsp/p

a class="alsp"a.alsp/p

alsp仍然是一种class选择器,但是他只有在p的标签下被使用才生效。

所以,第一行生效,p.alsp字样变红,第二行不生效

10

伪类选择器

“伪”字暴露了他的本质,伪类选择器并不像其他选择器直接做用在标签上,但是他偏偏又是在标签上进行使用,所以称为“伪类选择器”。

伪类的作用,是作用在状态上。

一般情况正常运行,只有当达成条件的时候触发,才会执行伪类选择器所代表是css样式。

伪类选择器很多,但许多都是我们这辈子估计都用不到的。

OK,伪类选择器后续我会专门写一篇经验介绍,有点小多,这里也就不多说了。

END

二.在HTML中调用CSS

调用CSS的常用方法有3中

内样式

外样式

行间样式

内样式

直接看代码,如图所示

在head/head中,加入style/style,并将相关的CSS样式放在其中

外样式

直接看代码,如图所示:

link rel="stylesheet" type="text/css" href="index.css"

这里,href为css的路径。

意思是,你专门创建一个index.css的文件,里面放上CSS样式,和内样式的语法一模一样,只是专门找了一个文件存放而已。

4

行间样式

行间样式直接写在元素里面

例如:p style="color:#900"嘿嘿哦嘿嘿呀哦嘿嘿哦/p

直接在标签后面加上style

一般不要用,不过可以用来调试使用

HTML网页怎么使用CSS样式?

在制作一个网页的时候,Css样式的添加一共有四种方式,一起来看看这四种方式:

一、使用STYLE属性: 将STYLE属性直接加在个别的元件标签里。

元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...}

例如:

TD STYLE="COLOR:BLUE; font-size:9pt; font-family:"标楷体"; line-height:150%

这种用法的优点 是可灵巧应用样式於各标签中,但是缺点则是没有整篇文件的『统一性』。

二、使用STYLE标签: 将样式规则写在STYLE.../STYLE标签之中。

通常是将整个的 STYLE.../STYLE结构写在网页的HEAD /HEAD部份之中。这种用法的优点就是在於整篇文件的统一性,只要是有声明的的元件即会套用该样式规则。缺点就是在个别元件的灵活度不足。

三、使用 LINK标签: 将样式规则写在.css的样式档案中,再以LINK标签引入。

假设我们把样式规则存成一个example.css的档案,我们只要在网页中加入

LINK REL=STYLESHEET TYPE="text/css" HREF="example.css"

即可套用该样式档案中所制定好的样式了。 通常是将LINK标签写在网页的head/head部份之中。这种用法的优点就是在於可以把要套用相同样式规则的数篇文件都指定到同一个样式档案即可。缺点也是在个别文件或元件的灵活度不足。

四、使用@import引入: 跟LINK用法很像,但必 放在STYLE.../STYLE 中。

要注意的是,行末的分号是绝对不可少的!这种方式也可以把

如何在html中添加css样式

有两种方式

1、在head标签之间添加style标签

2、直接在HTML代码里添加style属性,然后在属性里定义css代码

3、也可以将1中的style标签里的内容放到一个css文件里,然后在html页面引用这个文件也是一样的效果

link href="css文件路径" rel="stylesheet" ?!--这样就可以了,尽量代码简洁--

4、下面是我的HTML代码

网页设计自我介绍代码,至少包含五个以上页面(css或dreamwave)页面包括个人信息,学习经历等。谢谢大佬

去开创者素材下载几个差不多的模板,自己改改里面的文字就行了,学校的网页要求不高,那里的模板满足要求了。

html?中如何加css代码,急求!

Html中引入css的主要方式有四种,分别是外部样式、内部样式、内联样式、导入式。

一、外部样式

(一) 使用外部样式的好处

1.减少代码量 ,网站中相同部分的样式只需要编写一次,我们只需要把css文件引入到不同的html页面中即可实现展示效果。

2.更改网站风格方便,我们可以通过修改一个css文件就可以实现整个网站的外观修改。

3.Html页面渲染时,css文件能够被同时加载。

4.结构与表现分离,便于后期维护。

(二) 适用于多个页面需要相同样式内容的时候使用

(三) 书写位置:新建单独的后缀名为.css文件,使用link标签引入到html页面中,将link标签放到Html页面的head标签中

例:

rel:规定当前文档与被连接文档之间的关系.

href:规定为连接文档的位置

type:规定被连接文档的MIME类型

二、内部样式

(一) 使用内部样式的好处

1.结构与表现分离,便于后期维护。

2.所有的CSS控制都是针对单独的面,没有多余的CSS代码。

3.同样页面中相同的样式可以重复使用。

(二) 使用内部样式的缺点

1.只能在一个页面中使用

2.网站更换风格麻烦

3.Css在html页面中,页面显得臃肿

(三) 适用于个别页面需要特殊样式时

(四) 书写位置:写在html页面的head标签之间,在head标签之间书写style标签

例:

三、行间样式

(一) 使用内部样式的好处

1. 单独修改单个标签的样式

(二) 使用内部样式的缺点

1. 结构与表现没有分类,不利于后期维护。

2. 只能修改单个标签的样式,代码重复利用率不高,代码冗长。

(三) 适用于个别标签需要特殊样式时

(四) 书写位置:在标签的开始标签内部书写style=””

例:

四. 导入式

(一) 使用导入的好处

1.减少代码量,网站中相同的部分的样式只需要书写一次,后续只需要把css文件引入到不同的Html页面中即可。

2.更改网站风格方便,我们可以通过修改一个css文件,就可以修个整个网站的外观。

3.结构与表现分离,便于后期维护。

(二) 使用导入的缺点

1.需要等Html页面全部加载完才能加载css文件。

(三) 适用于多个页面需要展示相同样式的时候

(四) 书写位置:写在Html页面的head标签中的style表现中,用@import导入css文件

以上就是html导入css代码的详细介绍,更多关于html方面的知识点,可以看下这个视频教程:网页链接,希望我的回答能帮到你。

(责任编辑:IT教学网)

更多