一、ID选择器

ID选择器使用"#"前缀标识符进行标识,后面紧跟指定的元素的ID名称。

#box{ width:100px; height:100px;}

元素的ID名称是唯一的,只能对应于文档中一个具体的元素。在HTML中,用来构建整体框架的标签应该定义ID属性,因为这此对象一般在页面中都是比较唯一的,固定的,不会重复,如Logo包含框,导航条,主体包含框,版权区域等。

二、ID设置页面布局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="css/test4.css" />
<title>测试ID</title>
</head> <body>
<div id="header"><!--头部模块-->
<div id="logo"></div><!--网站logo-->
<div id="banner"></div><!--广告条-->
<div id="nav"></div><!--导航条-->
</div>
<div id="main"><!--主体模块-->
<div id="left"></div><!--左侧通栏-->
<div id="content"></div><!--内容-->
</div>
<div id="footer"><!--底部模块-->
<div id="copyright"></div><!--版权信息-->
</div>
</body>
</html>
@charset "utf-8";
/* CSS Document */ #header{
margin:0 auto;
width:960px;
height:210px;
border:solid 1px #000000;
}
#logo{
width:100px;
height:100px;
border:solid 1px #000000;
float:left;
}
#banner{
margin-left:30px;
float:left;
width:800px;
height:100px;
border:solid 1px #000000;
}
#nav{
clear:both;
margin:0 auto;
width:800px;
height:100px;
border:solid 1px #000000;
}

三、外部ID内部class属性

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="css/test3.css" />
<title>ID选择器</title>
</head> <body>
<div id="father">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>
</body>
</html>
@charset "utf-8";
/* CSS Document */
/* 父级样式*/
#father{
width:500px;
height:500px;
border:solid 2px blue;
margin:5px;
}
/* 通过父级样式设置父级样式下的标签div模式*/
#father div{
width:100px;
height:100px;
border:solid 1px red;
padding:10px;
margin:10px;
background-color:#0000FF;
}
/* 通过父级样式设置父级样式下的类*/
#father .child1{
width:100px;
height:100px;
margin:20px;
padding:10px;
border:solid 5px #FF00FF;
background-color:#66FF00;
}
/* 通过父级样式设置父级样式下的类*/
#father .child2{
width:100px;
height:100px;
margin:10px;
padding:10px;
border:solid 5px #00FF00;
background-color:#FF0000;
}
/*这里直接设置类样式不起作用因为上面通过#father div已经设置过了,这里的类选择器优先级小于标签选择器*/
.child3{
width:100px;
height:100px;
margin:10px;
padding:10px;
border:solid 10px #0000FF;
background-color:#FF00FF;
}

CSS ID选择器(三)的更多相关文章

  1. CSS id 选择器

    id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式. id 选择器以 "#" 来定义. 下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二 ...

  2. CSS ID选择器&通配选择器

    ID选择器 ID(IDentity)是编号的意思,一般指定标签在HTML文档中的唯一编号.ID选择器和标签选择器.类选择器的作用范围不同. ID选择器仅仅定义一个对下对象的样式,而标签选择器和类选择器 ...

  3. CSS 类选择器

    在 CSS 中,类选择器以一个点号显示: .center {text-align: center} 在上面的例子中,所有拥有 center 类的 HTML 元素均为居中. 在下面的 HTML 代码中, ...

  4. Android程序员学WEB前端(6)-CSS(1)-选择器-Sublime

    转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76576469 觉得博文有用,请点赞,请评论,请关注,谢谢!~ CSS外部文档链接: & ...

  5. CSS基础(三):选择器

    常用选择器 元素选择器,即html标记如div,ul,li,p,h1~h6,table等. p { font-size:14px; } h1 { color:#F00; } 复合选择器, 由两个选择器 ...

  6. CSS类选择器和ID选择器

    CSS类选择器和ID选择器皆允许以一种独立于文档元素的方式来指定样式,同时二者皆区分大小写. 区别如下: 第一:在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class 第二:当页 ...

  7. CSS中的选择器之类选择器和id选择器

    1.css中的选择器: 1.类选择器,又叫class选择器 2.id选择器 3.html元素选择器(又叫标签选择器) 4.通配符选择器 5.伪类选择器 6.组合选择器(多元素选择器,子元素选择器,后代 ...

  8. CSS【03】:CSS 基础选择器与三种引入方式

    基础选择器 选择器:css 选择 html 标签的一个工具,是将 css 与 html 建立起联系,那么 css 就可以控制 html 样式 选择器其实就是给 html 标签起名字 标签选择器 作用: ...

  9. css样式——选择器(三)

    https://www.cnblogs.com/haiyan123/p/7552235.html 1.怎么找到标签 2.如何操作标签的对象 一.css概述 CSS是Cascading Style Sh ...

随机推荐

  1. Machine Learning : Pre-processing features

    from:http://analyticsbot.ml/2016/10/machine-learning-pre-processing-features/ Machine Learning : Pre ...

  2. 找出链表中倒数第 k 个结点

    /* 题目:输入一个单向链表,输出该链表中倒数第 k 个结点.链表的倒数第 0 个结点为链表 的尾指针. 链表结点定义如下: struct node { int data; struct node * ...

  3. Pass云Docker介绍

    1.Docker 简介 Docker是一个开源可以将任何应用包装在”LXC容器”中运行的工具.如果说VMware,KVM包装的虚拟机,Docker包装的是应用.是一个实至名归的PaaS. 当应用被打包 ...

  4. [OpenCV] Image Processing - Spatial Filtering

    "利用给定像素周围的像素的值决定此像素的最终的输出值“ 教学效果: 策略: 1. 拉普拉斯,突出小细节: . 梯度,突出边缘: . 平滑过的梯度图像用于掩蔽: . 灰度变换,增加灰度动态范围 ...

  5. LoRaWAN协议(四)--入网方式概述

    前言 在LoRaWAN中,node最终和服务器能够正常数据交互,需要先入网,入网的本质,也就是获得一些通信相关的参数,有以下几个: NwkSKey AppSKey DevAddr DevEui 其中 ...

  6. Hadoop入门进阶课程2--Hadoop2.X 64位编译

    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博主为石山园,博客地址为 http://www.cnblogs.com/shishanyuan  ...

  7. EF封装类,供参考!

    以下是我对EF DB FIRST 生成的ObjectContext类进行封装,代码如下,供参考学习: using System; using System.Collections.Generic; u ...

  8. android图片拖动缩放

    这篇图片拖拽缩放也是我在项目中用到的,今天整理一下,将源码奉献给大家,希望对大家以后碰到相似的问题有帮助.android 大图片拖拽缩放 这篇就不做过多介绍了,直接上源码: public class ...

  9. 大话设计模式-->模板方法设计模式

    在学习java的过程中,我们肯定听到过设计模式这名词,在行业中有这么一句话,若您能熟练的掌握23种设计模式,那么你便是大牛! 好了,废话不多说,今天我跟大家分享一下23种设计模式之一的  模板方法 设 ...

  10. ASP.NET 取得 Uri 各项属性值

    Uri uri = new Uri("http://www.yoercn.com/aboutus/idea.html");string Host = uri.Host;       ...