整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

CSS Id 和 Class选择器

CSS Id 和 Class选择器

d 和 class 选择器

如果你要在HTML元素中设置CSS样式,你需要在元素中设置"id" 和 "class"选择器。


id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。

以下的样式规则应用于元素属性 id="para1":

实例

#para1

{

text-align:center;

color:red;

}

ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。


class 选择器

class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。

class 选择器在HTML中以class属性表示, 在 CSS 中,类选择器以一个点"."号显示:

在以下的例子中,所有拥有 center 类的 HTML 元素均为居中。

实例

.center {text-align:center;}

你也可以指定特定的HTML元素使用class。

在以下实例中, 所有的 p 元素使用 class="center" 让该元素的文本居中:

实例

p.center {text-align:center;}

类名的第一个字符不能使用数字!它无法在 Mozilla 或 Firefox 中起作用。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!

TML主体标记

代码分为三部分编写

<html>              是网页文件的最外层标记
	<head>          之间的文本是头信息
		不会显示在浏览器中,包括基本的描述,整个网页的公共属性
	</head>
	<body>      是网页文件的主体部分
		正文 :文字、图片、链接、表单等
	</body>	
</html>

HTML文档头部标记

<head> 头部标记</head>

<title> </title> 只能有一个

<base /> 只能有一个

<link> 可以有多个

<meat> 可以有多个

<meat name=“” content=“”>

<meat http-equiv=“” content=“”>

title

  • 定义网页标题,显示在浏览器的标题栏中
  • 公司名称+公司产品
  • 有利于搜索引擎(也是在搜索引擎中显示的标题)

base

  • 基底网址标记
  • 用于设定浏览器中文件的绝对路径
  • 网页中的文件只需要写下文件的相路径即可,这个路径就是base中指定下的路径

link

  • 设置外部文件的链接标记
  • 用于确定本页面和其它文档之间的关系

meta两种用法

<meta name="" content="">

<meta http-equiv="" content="">

Name 用于在网页中加入一些关于网页的描述信息,网页的关键字,网页描述信息

http-equiv:属性用于在HTML文档中模拟HTTP协议的响应消息头,例如,告诉浏览器是滞缓存页面,使用什么样的字符集显示网页内容

Meta标签的name属性

不是自己定义的值:

Keywords : 网页的关键字

Description:网页的描述

Robots : index noindex follow nofollow all none

Author

copright

Meta标签的http-equiv属性设置

Content-Type

Refresh

Expires

Windows-Target

Pragma

Page-Enter和Page-Exit

主本标记<body>

在它中放置网页中所有内容

  • Text
  • Bgcolor
  • Background
  • Link
  • Alink
  • Vlink
  • Topmargin
  • Leftmargin

只要是可以用样式控制的就不用HTML本身属性

Id name class style 通用属性,所有的元素都可以使用

DTD

文档类型定义

  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • Html
  • Public
  • Version
  • URL

本的网页结构

网页基本结构:

<html>
	<head>
        <title>这是网页标题</title>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
        <meta name="keywords" content="这是关键字"/>
        <link href="css文件路径" rel="stylesheet"/>
        <link rel="shortcut icon" href="favicon.ico"/>
    </head>
    <body>
        
    </body>
</html>

常见网页标签:

标签

含义

常用属性

a

超链接

href / target / title

img

图片

src / alt / title / width / heiht

h1-h6



p



br



hr



em



strong



i



span



div



CSS美化网页

css样式使用方式

  1. 行内(内敛)样式
  2. 内部样式
  3. 外部样式

css基本选择器

  1. ID - > #
  2. CLASS -> .
  3. 标签 -> 标签名

优先级

  1. ID > CLASS > 标签 (在同一个元素上的ID , CLASS比较)
  2. 行内 > 内部> 外部
  • *important 最高级别
  • 高级选择器:

    1. 并集选择器
    2. 交集选择器
    3. 后代选择器
    4. 子元素选择器
    5. 兄弟选择器
    6. 属性选择器

    前提: 非继承属性 > 继承属性(除此条件外,基本可以适应以下计算规则)

    ID

    CLASS

    标签

    100

    10

    1

    文本样式

    样式

    含义

    属性值

    字体样式

    列表与表格

    表单

    盒子模型

    浮动

    定位