CSS的Class以及ID选择器

9、CSS的Class以及ID选择器

id和class的不同指出在于一个页面同一个ID只能只有一次,而class可以无限制使用。
  同样,你可以在html选择器后面使用一个选择器来指定特殊HTML元素,比如p.jam{值}将作用到带有'jam'class属性的段落。
10、这个都差点忘了。页面布局
      clear    float    disply等这几个,关于网站用div+css主要把这个用好。
总结:基本上都差不多,css的概念都有了一个了解,必定我们是做web开发,但是css,html前端的我们不能不知道,要知道个大概,查资料也知道怎么查就行了。所以我接下来想做一个demo来演示一下。今晚发上,希望大家支持一下黑侠客,我也是一只很老的菜鸟,现在才踏进来这个web之间,希望大家多多帮助,谢~
11、演练html+css

由于我的目的是学习web开发,所以这个html+css不要求太精,了解一下大概,在以后我拿到一个实例可以改就行了,这就是我的目的。不知道大家是什么要求。
接下来我就改一下百度的页面,因为本人比较懒,比较大的页面可能没有耐心做下去,就模仿一下百度吧,也不知道这两天学的行不行.

    首先看到这个布面,我先分析结构,用html把结构弄出来,接下来再看表现方式用css定义。

 代码如下 复制代码

<html>
<head>
        <title>html+css baidu.com demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="css/css.css" rel="stylesheet" type="text/css" />
<body>
        <div id="box">
      <div id="login"><a href="#">登录</a></div>
             <div id="log"></div>
       <div id="txt">
                    <ul>
                        <li><a href="#">新闻</a></li>
                    <li><a href="#">网页</a></li>
                    <li><a href="#">贴吧</a></li>
                    <li><a href="#">知道</a></li>
                    <li><a href="#">MP3</a></li>
                    <li><a href="#">图片</a></li>
                    <li><a href="#">视频</a></li>
                </ul>
              </div>
        <div id="ipt">
                <input type="text" />
                          <input type="button" value="百度一下" id="btn" />
              </div> 
        <div id="help">
            <ul>
                <li><a href="#">帮助</a></li>
                <li><a href="#">搜索</a></li>
             </ul>
         </div>
       <div id="link">
            <ul>
               <li><a href="#">企业推广</a></li>
               <li><a href="#">搜索风云榜</a></li>
               <li><a href="#">关于百度</a></li>
               <li><a href="#">About Baidu</a></li>
            </ul>
        </div>
         <div id="copy">©2008 Baidu <a href="#">使用百度前必读 京ICP证030173号</a></div>
</div>
</body>
</html>

body{
        width: 98%;
        margin: 0px auto;
}
#login{
        float: right;
        font-size: 12px;
        padding-top: 7px;
}
#log{
        background-image:url(../images/log.gif);
        height:129px;
        padding:0;
        background-repeat: no-repeat;
        background-position: center;
}
#txt ul{
        float: left;
}
input #btn{
   color: Blue;
}
#nav{
    margin: 0px auto;
         height: 200px;
}
#link ul{
        margin: 0px auto;
        color: Black;
   float: left;
}
#copy{
        clear: both;
   text-align: center;
        color: #7777cc;
        font-size: 12px;
}
#copy a{
        color: #7777cc;
}

 

时间: 2024-08-04 12:07:13

CSS的Class以及ID选择器的相关文章

一个CSS元素同时有id选择器和类选择器的例子

一个元素可同时有id选择器和类选择器,但只能有一个id选择器,且id选择器的优先级大于class选择器. 例: html文件内容: <html> <head> <title>一个元素可同时有id选择器和类选择器</title> <link rel="stylesheet" type="text/css" href="test.css" /> </head> <body&

CSS的id选择器的例子

基本语法: #id选择器{ 属性名:属性值; -- } 示例: html文件: <html> <head> <title>CSS的id选择器</title> <link rel="stylesheet" type="text/css" href="selector.css" /> </head> <body> <span id="id1"

css类选择器和id选择器

在CSS中,类选择器以一个点号显示: .center {text-align: center} 在上面的例子中,所有拥有 center 类的 HTML 元素均为居中. 在下面的 HTML 代码中,h1 和 p 元素都有 center 类.这意味着两者都将遵守 ".center" 选择器中的规则. <h1 class="center"> This heading will be center-aligned </h1> <p class=

CSS ID选择器与CLASS选择器

  在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素.          属性选择器可以根据元素的属性及属性值来选择元素.   三种基本的选择器类型:标签名选择器.类选择器.ID选择器 具体语法如下:  1.标签名选择器,如: html {color:black;} h1 {color:blue;} h2 {color:silver;} 即直接使用HTML标签作为选择器. 2.类选择器 类选择器允许以一种独立于文档元素的方式来指定样式. 该选择器可以单独使用,也可以与其他元素结合使用

CSS id 选择器

核心提示:id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式. id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式. id 选择器以 "#" 来定义. 下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二个定义元素的颜色为绿色: #red {color:red;}#green {color:green;} 下面的 HTML 代码中,id 属性为 red 的 p 元素显示为红色,而 id 属性为 green 的 p 元素显示为绿色.

css复合选择器:使用css的类名交集复合选择器

文章简介:使用css的类名交集复合选择器. 首先先看一下基本定义: 复合选择器就是两个或多个基本选择器,通过不同方式连接而成的选择器,主要包括"交集"选择器."并集"选择器."后代"选择器. 交集选择器 "交集"复合选择器是由两个选择器直接连接构成,其结果是选中二者各自元素范围的交集.其中第一个必须是标记选择器,第二个必须是类别选择器或者ID选择器.这两个选择器之间不能有空格,必须连续书写. 注意其中第一个必须是标记选择器,如

CSS学习笔记:id与class、padding和margin、min-height和height

核心提示:首先要明白id和class的各自的优缺点.这样才能根据他们的各自的特点进行使用. id和class到底要用哪一个? 首先要明白id和class的各自的优缺点.这样才能根据他们的各自的特点进行使用. id的优点(class的缺点):id写在css用"#"选择器,class写在css中用"."选择器."#"选择器的优先级高于"."选择器大约10倍,所以当你需要提升优先级的时候,id标签,或者id容器内的标签将是很容易和有

对CSS的Class及Id的规范化命名

css|规范|规范化 Web开发人员可以通过创建CSS的Class及id名称并使用这些名称来对div以及其他的格式页面元素进行标识.对开发人员来说,在命名重新定义XHTML标记(tags)的CSS selectors时,必须保证其与预定义的标记准确匹配,但就类以及id选择器名称而言,则仁者见仁,智者见智.然而随心所欲的为这些类以及id命名则并不是个好的习惯. 在阅读了由Andy Clarke(of Stuff and Nonsense and All That Malarkey)以及Eric M

在用CSS创建类及id时应注意的一些规范化命名

css|创建|规范|规范化 Web开发人员可以通过创建CSS类及id名称并使用这些名称来对divs以及其他的格式页面元素进行标识.对开发人员来说,在命名重新定义XHTML标记(tags)的CSS selectors时,必须保证其与预定义的标记准确匹配,但就类以及id选择器名称而言,则仁者见仁,智者见智.然而随心所欲的为这些类以及id命名则并不是个好的习惯.  在阅读了由Andy Clarke(of Stuff and Nonsense and All That Malarkey)以及Eric M