大步迈向CSS

最新推荐文章于 2024-09-17 10:24:19 发布

somezhc

最新推荐文章于 2024-09-17 10:24:19 发布

阅读量175

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/somezhc/article/details/78684272

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

昨天我们看了在网页中有三种形式可以引用CSS样式。今天我们看看CSS的几种选择符。

1.元素选择符：所有指定的 HTML 元素
例如：下面的代码中，body和p都属于元素选择符。即样式修改的分别是网页内的<body>标签的内容样式和<p>标签包含的内容样式。

    <head>
         <style type="text/css">
           body {background-color: red}
           p {margin-left: 20px}
        </style>
       </head>

2.ID选择符：指定 ID 的元素（ID是所有标签都存在的属性。在 HTML 页面中，每个 ID 只被允许指定一次）

例如：下面代码中#bid选择的就是<body>标签，#pid选择的就是<p>标签。即样式修改的分别是网页内的<body>标签的内容样式和<p>标签包含的内容样式。

    <head>
         <style type="text/css">
           #bid {background-color: red}
           #pid {margin-left: 20px}
        </style>
   </head>
  <body id="bid">
	这里是BODY
	<p id="pid">这里是一个段落<p>
  </body>
3.Class 选择符：指定 Class 的元素（Class也是所有标签都存在的属性 多个 Class 可以同时出现在一个页面中）
例如：下面的代码中.cll选择的是有class="cll"属性的<h1>标签和<p>标签。即样式修改的是网页内的<h1>和<p>标签的内容样式，另外#pid还选择修改了<p>标签包含的内容样式。

  <head>
         <style type="text/css">
           .cll {background-color: red}
           #pid {margin-left: 20px}
        </style>
   </head>
<body id="bid">
	这里是BODY
	<h1 class="cll">这里是标题</h1>
	<p id="pid" class="cll">这里是一个段落<p>
  </body>
  这三种选择符在外部样式表和内部样式表都适用。

1.表单标签：
 
 <form> 表单标签 决定单一表单的运作模式
<textarea> 文本区域标签 提供文字方盒以输入较大量文字
<input> 输入标签 决定输入形式
<select> 选择标签 可创建单选或多选菜单。
<option> 选项标签 每一标记标是一个选项
2.图形标签：<img src="图片地址或图片链接"  alt="图片加载不出来时显示的文字" />

3.链接标记:

<a href="链接地址">显示文字</a>

例如：下面代码中<base>指定一个根目录，其他需要地址的链接直接在根目录中寻找。该标签必须写在<head>标签中。
<head>
<base href="基准地址链接" />
<base target="在何处打开链接" />
</head>
<body>
<img src="直接在基准地址中对应的图片地址" />
<a href="直接在基准地址中对应的链接地址">页面显示文字</a>
</body>

4.框架标签：
 
 <frameset> 框架设定 设置框架
<frame> 框窗设定 设置框窗
<iframe> 页内框架 在网页中设定框架
<noframe> 不支持框架提示 当网页不支持框架时的提示

5.影像地图标签：<map>和<area>一般同时使用。设定在图片中的一个区域，点击该区域链接到新的页面或图片。注：不同的浏览器可能寻找<map>的属性不同。有的浏览器用的是name属性，有的是id属性，所以我们一般编写代码时同时给<map>name属性和id属性。

例如：<img src="图片链接" border="0" usemap="#地图名" alt="图片不显示时展示文字" />
<map name="地图名" id="地图名">
  <area shape="形状" coords="180,139,14" href ="新链接" alt="新链接图片不显示时展示文字" />
</map>

6.多媒体标签：<embed src="链接或地址">可以插入各种多媒体（包括音频和视频），拥有很多属性，例如：自动播放，循环播放，隐藏面板等。

  html标签还有好多，我们不必把每个都记下来，你可以下载一个HTML的字典。或者你可以查找https://developer.mozilla.org/zh-CN/。网站中不但有标签的用法，告诉你标签适用于哪种浏览器，还会告诉你它是否还适用，有没有替代它的标签或方法。

 当然HTML中除了标签还有特殊字符等。我们之后的文章中再说把。

somezhc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

<form>	表单标签	决定单一表单的运作模式
<textarea>	文本区域标签	提供文字方盒以输入较大量文字
<input>	输入标签	决定输入形式
<select>	选择标签	可创建单选或多选菜单。
<option>	选项标签	每一标记标是一个选项

<frameset>	框架设定	设置框架
<frame>	框窗设定	设置框窗
<iframe>	页内框架	在网页中设定框架
<noframe>	不支持框架提示	当网页不支持框架时的提示