CSS使用方式

一.HTML文档应用CSS,有三种方法可供选择。下面对这三种方法进行了概括。

1.内联方式 Inline Styles

内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。

<p style="color:#f00">这一行的字体颜色将显示为红色</p>

2.内部样式块对象 Embedding a Style Block

你可以在你的HTML文档的<head>标记里插入一个<style>块对象。

<style>
body{background:#fff;color:#000;}
p{font-size:14px;}
</style>

3.链入外部样式表 Linking to a Style Sheet

你可以先建立外部样式表文件*.css,然后使用HTML的link对象。

<head>
<title>文档标题</title>
<link rel="stylesheet" href="*.css" />
</head>

二. CSS的具体使用可依据CSS选择器,用于选择需要添加样式的元素。常见的CSS选择器有以下三种:

1.标签选择器

每个html页面都由很多个标签组成,通过标签选择器可以对某类标签应用相应的样式,如对p标签应用下面的样式,则页面中所有的p标签都会生效.

标签的每个申明属性用分号“;”分割,最后一个申明末尾可加分号,也不不加分号。

<style type="text/css">
p{ font-size:12px; color:red; background:blue; }
</style>

2.类(Class)选择器

以一种独立于文档元素的方式来指定样式。到页面元素使用时,添加属性Class指定为定义的样式的名称。

  • 类名称在CSS中必须以点(.)作为前缀,紧跟一个具有语义性的自定义类名(className)。
  • CSS只允许在类名称中使用字母、数字、连字号(-)和下划线(_)。
  • 在圆点之后,名称始终必须以字母开头。
  • 类名称区分大小写。
  • 一个标签可以有多个类选择器,不同的值用空格隔开,这样多个样式便可以应用的一个标签上。

定义如下:

<style type="text/css">
.error{ width:200px; padding:5px; color:red;}
</style>

使用如下:

<div class="error"> </div>

另外类Class选择器也可以针对不同的标签,实现同样的样式命名对于不同的标签有不同的样式,只要在样式名前加标签即可。

定义如下:

<style type="text/css">
input.accountinfo{text-align:right;color:red;}
label.accountinfo{font-style:italic}
</style>

使用如下:

<input class="accountinfo" type="text" value="确定" />
<label class="accountinfo" >月之圣痕</label>

3.ID选择器

为标记特定id的HTML元素指定特定的样式。

  • ID选择器名称在CSS中必须以井号(#)作为前缀,紧跟一个具有语义性的自定义名称。
  • CSS只允许在选择器名称中使用字母、数字、连字号(-)和下划线(_)。
  • 在井号后,名称始终必须以字母开头。
  • ID选择器名称区分大小写。
  • 在一个 HTML 文档中,ID 选择器会使用一次,而且仅一次。

定义如下:

<style type="text/css">
#divID{width:100px;height:20px;border:1px solid red;}
</style>

使用如下:

<div id="divID"></div>
高调做事,低调做人~!
原文地址:https://www.cnblogs.com/514687800/p/3363289.html