Web前端入门新人必看，怎样使用CSS修改HTML的样式

、CSS的起源

当web开发还是一项新技术的时候，无论定义网页内容还是定义网页样式，都是使用的HTML语言，HTML的内容和样式没有区分开，如古老的HTML样式：

<H3 COLOR=RED><CENTER>样式</CENTER></H3>

其中color表示颜色，center让文字居中，不是目前规范的书写形式，而且旧的HTML标签都是大写的，web开发人员还需要来回切换大小写，所以很多人认识到了这种开发方式并不理想。

Web开发人员想开发一种新的语言，把表示样式的代码从HTML中分离出来，并且创建一种规则来定义HTML标签要显示成什么样子，这门语言叫做CSS，CSS是用来描述HTML标签应该如何显示的一个代码。如：

<h3>样式</h3>

用CSS可以让h3标签显示成绿色，让h3字体在大一点，让h3有一个下划线，可以统一字体的显示样式等。

CSS样式

二、CSS的工作方式

CSS的全称叫做 Cascading Style Sheets 级联样式表，CSS的工作方式依赖于"选择器"可以选择HTML标签，并且修改这些标签的样子。

选择器的类型有：

1、类型选择器：不带尖括号的标签名，最简单的选择器

类型选择器

定义了一个P标签，如果想在CSS中选择这个标签，首先写上字母P，然后选择要定的属性如text-decoration，并设置这个属性的属性值为underline下划线，在浏览器中这个段落就会显示下划线。

类型选择器

使用选择器的时候我们必须要遵守选择器的特殊语法规则：

选择器名字后面是一个开始的大括号，属性和属性值中间是冒号，属性值后面是分号，这里面任何一部分都不能丢掉，否则CSS无法正常工作，并且要注意标点符号全部是英文半角的，最后在所有的属性列表后面是一个结束的大括号，大括号的作用就是可以在里面写很多属性，如图：

类型选择器

显示结果为带下划线的红色字体段落：

类型选择器

在CSS中使用标签名选择标签的时候，类型选择器会作用在所有同名标签中。所以这里只定义额一CSS样式，它会作用在所有的P标签中。

2、派生选择器

可以让CSS标签作用在很小的范围内，如下图，只让CSS作用在li标签中，所以选择ul标签中的li标签即可。

派生选择器

3、伪类选择器

1）在原有选择器的基础上添加一个限定条件，当某种情况发生时在选择这个标签。如下图，首先定义个a的类型选择器，让页面中所有的超链接下划线都不显示，然后通过派生选择器控制鼠标的动作，当鼠标移上去的时候，超链接文字显示下划线并显示为深蓝色。

伪类选择器

这条规则只有当鼠标放到超链接上停留的时候才会被应用，因此当某种情况发生时候伪类选择器才会被应用在某个标签上。

a的伪类选择器一共有四种：

:link 未被访问的链接的样式；和a标签相同时，并且同时存在的时候会覆盖a标签

:hover 鼠标移动到超链接上的时候

:active 选择器用于活动链接，被选定的超链接。

:visited 已被访问的超链接，

注释：在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后（如果存在的话），这样样式才能生效。

2）使用伪类选择器缩小选择范围

:first-child 缩小标签的选择范围，如图：

如果一个标签后面还接了一个子标签，在子标签后面冒号：first-child，说明这里只选择了子标签中的第一个标签，可以看到浏览器中有序列表中的第一个li子元素"北京"颜色为紫色。

伪类选择器

CSS样式

三、CSS样式表放在什么地方

在head标签中添加style子标签，在style标签里写一个属性type="text/css"，这样浏览器就知道当页面显示出来的时候，需要把style中的CSS代码应用到HTML中，因此可以在style标签中创建CSS规则。

css样式

每天进步一点点，跟着教头学开发。

天遇到个来咨询利用原生的JS代码来修改HTML代码的的童鞋，耐心的给这个童鞋做了解答后，然后整理了一下测试代码，写成文章记录一下，方便以后有同需求的站长们。

目标需求

HTML原始代码

<form action="" method="post" class="form">
 <input id="mm" type="text" >
 <input id="mochu" type="text" onclick="act(this.value)" />
 <input id="mc" type="text" >
</form>

目标要求：

利用JS代码将以上HTML代中的 id 为 mochu 的 input 中的 cnclick 属性去掉

<input id="mochu" type="text" onclick="act(this.value)" />

换成

<input id="mochu" type="text" />

解决方案

利用 JS中dom对象的 outerHTML 属性，可以轻松的解决这个问题

outerHTML：设置或获取对象及其内容的 HTML 形式

例：JS获取元表本身的HTML代码

代码：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</form>

var html = document.getElementById('mochu').outerHTML;

console.log(html);

</script>

</body>

</html>

打印结果：

例：js修改指定元素的本身的HTML代码

通上面的例子，可以知道 outerHTML 属性可以获取到元素本身的HTML代码，既然可以获取也能设置或修改元素本身的代码

代码：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="" method="post" class="form">
 <input id="mm" type="text" value="飞鸟慕鱼博客" >
 <input id="mochu" type="text" onclick="act(this.value)"/>
 <input id="mc" type="text" >
</form>
<script>
 var html = document.getElementById('mochu').outerHTML = '<input id="mochu" type="text" value="http://www.feiniaomy.com" />';
</script>
</body>
</html>

运行结果如图所示

补充说明

以下是与 outerHTML 功能相似的属性，下一篇文章会详细说明一下他们的作用与区别

innerHTML:设置或获取对象起始标签和结束标签之间的内容。

innerText:设置或获取位于对象起始和结束标签内的文本

outerHTML:设置或获取对象及其内容的 HTML 形式

outerText:设置或获取对象的文本

TML常用代码之：修改页面的实用性HTML代码

贴图：<img src="图片地址">

加入连接：<a href="所要连接的相关地址">写上你想写的字</a>

在新窗口打开连接：<a href="相关地址" target="_blank">写上要写的字</a>

移动字体(走马灯)：<marquee>写上你想写的字</marquee>

字体加粗：<b>写上你想写的字</b>

字体斜体：<i>写上你想写的字</i>

字体下划线: <u>写上你想写的字</u>

字体删除线: <s>写上你想写的字</s>

字体加大: <big>写上你想写的字</big>

字体控制大小：<h1>写上你想写的字</h1> (其中字体大小可从h1-h5,h1最大，h5最小)

更改字体颜色：<font color="#value">写上你想写的字</font>(其中value值在000000与ffffff(16位进制)之间

消除连接的下划线：<a href="相关地址" style="text-decoration:none">写上你想写的字</a>

贴音乐：<embed src="音乐地址" width="宽度" height="高度" autostart=false>

贴flash: <embed src="flash地址" width="宽度" height="高度">

贴影视文件：<img dynsrc="文件地址" width="宽度" height="高度" start=mouseover>

换行：<br>

段落：<p>段落</p>

原始文字样式：<pre>正文</pre>

换帖子背景：<body background="背景图片地址">

固定帖子背景不随滚动条滚动：<body background="背景图片地址" body bgproperties=fixed>

定制帖子背景颜色：<body bgcolor="#value">(value值见10)

帖子背景音乐：<bgsound="背景音乐地址" loop=infinite>

贴网页：<iframe. src="相关地址" width="宽度" height="高度"></iframe>

在线咨询

上一篇：js取得当前url,javascript获取当前页面url值,js获取域名
下一篇：好烦，怎么输入拼音的过程也会触发input事件！！！

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

Web前端入门新人必看，怎样使用CSS修改HTML的样式

、CSS的起源

二、CSS的工作方式

三、CSS样式表放在什么地方

目标需求

目标要求：

解决方案

补充说明

您的项目需求