CSS选择器

什么叫选择器？通俗的来说就是 我想改变html 中某个地方的  字体大小 或者背景色 或者其它属性 内边距 外边距，宽度高度 等等 一些Css 样式。 那么我们如何找到对应的

元素呢？ 就要根据一定的规则来 声明 我要改变的是什么XX 的颜色，  但是要让程序知道你要改变什么东西 怎么改变 就要按照程序的标准去书写。

说了这么多，来看以下例子：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <style type="text/css">

        /* # + id  id选择器*/

        #testId{

            background-color: yellowgreen;

            color: red;

            border: 1px solid blue;

            /* 外边距，上 右 下 左 */

            margin: 10px 10px 10px 10px;

        }

        /* . + id  类选择器*/

       .leiTest{

            background-color: yellow;

            color: green;

            width: 90%;

            height: 80%;

            text-align: center; /*文字居中*/

            margin: 0 auto;

       }

       a{

             color:plum;

             font-size: 20px;

             border: 5px dotted red;

              display: block;

             padding: 10px 10px;

             background-color: #0000FF;

       }

    </style>

    <body>

        <table border="1" width="900">

            <tr>

                <th width="150">选择器</th>

                <th>表述方式</th>

                <th>效果图</th>

            </tr>

            <tr>

                <td>id 选择器</td>

                <td> 以 # 开头，标记内为id  </td>

                <td>

                    <div id="testId">

                        这是一个以testId 为id的div

                    </div>

                </td>

            </tr>

                <tr>

                <td>类 选择器</td>

                <td> 以 . 开头，标记内 为class</td>

                <td>

                    <p class="leiTest">a标记</p>

                </td>

            </tr>

                <tr>

                <td>标记 选择器</td>

                <td> 直接写标记 名</td>

                <td>

                    <a>a标记</a>

                </td>

            </tr>

        </table>

    </body>

</html>

执行结果如下图：

--------------------------------------------------以上为CSS 一些 基本的选择器 也是最为常用的-----------------------------------------------------------------

CSS 代码的位置

一张丰富多彩的网页，可能需要精确控制到每一个标记的颜色 大小位置 等等，那么这样的话就会造成css 样式代码写的非常的长，而且如果要去修改当前页面的

一些内容，从上到下拉一千多行 才可以找到body 标记的感觉 并不好。 或者为了代码的一定规范，我们可以把CSS 样式代码从当前HTML 文件中剥离出来，如：

        /* # + id  id选择器*/

        #testId{

            background-color: yellowgreen;

            color: red;

            border: 1px solid blue;

            /* 外边距，上 右 下 左 */

            margin: 10px 10px 10px 10px;

        }

        /* . + id  类选择器*/

       .leiTest{

            background-color: yellow;

            color: green;

            width: 90%;

            height: 80%;

            text-align: center; /*文字居中*/

            margin: 0 auto;

       }

       a{

             color:plum;

             font-size: 20px;

             border: 5px dotted red;

              display: block;

             padding: 10px 10px;

             background-color: #0000FF;

       }

CSS文件

HTML文件内容如下：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <link rel="stylesheet" href="css/style.css" />

    </head>

    <style type="text/css">

    </style>

    <body style="background-color: aquamarine;">

        <table border="1" width="900">

            <tr>

                <th width="150">选择器</th>

                <th>表述方式</th>

                <th>效果图</th>

            </tr>

            <tr>

                <td>id 选择器</td>

                <td> 以 # 开头，标记内为id  </td>

                <td>

                    <div id="testId">

                        这是一个以testId 为id的div

                    </div>

                </td>

            </tr>

                <tr>

                <td>类 选择器</td>

                <td> 以 . 开头，标记内 为class</td>

                <td>

                    <p class="leiTest">a标记</p>

                </td>

            </tr>

                <tr>

                <td>标记 选择器</td>

                <td> 直接写标记 名</td>

                <td>

                    <a>a标记</a>

                </td>

            </tr>

        </table>

    </body>

</html>
 <link rel="stylesheet" href="css/style.css" />   这句话 就表明 我当前的HTML文件引用了 style.css 样式文件。
 通过这样的办法，可以让页面便于维护，以及 多个页面使用通用的公共样式的作用。

  那么综合之前，CSS样式 以及位置的写法大概有以下三种： 
 一：写于标记之中，如 <p style="color:blue"></p>，称为 行内样式，也就是 内联式样式 。

 二：写在css 样式文件中，称为 外联式样式

 三：写在Style 标记之间的，称为内部样式。

注意事项：

    1. 命名一定要规范，尽量做到看到你的样式名称，就可以知道 你这个样式写的是什么作用  位置，等信息
    例如： headStyle   bodyStyle tableStyle  等等  表示 网页头部  中间  table的样式

    2.样式做到公共统一性，比如  一个网站有N张页面，每张页面，可能字体 字号信息 均为相同的，那么要使用 同样的样式文件。
    便于维护

    3. 建议 筛选层级不要过多 例如  body div p .test{ color:red },表示的就是 body 下 的div 标记下的，p标记
    下的，类名为test的 标记的 样式  字体为红色。

    4.要清楚知道，样式的先后作用关系。建议这样来记。  写的样式离你要控制的标记 越近它的优先级，越高。  即：

    行内样式(style=“”) > 内联样式(<style></style>) > 外联样式("<link href='xxx.css'/>")
												


											
Html 之div+css布局之css选择器的更多相关文章
	

    
								
  1. Html 之div+css布局之css基础
		
    Css是什么 CSS即层叠样式表(Cascading StyleSheet). 在网页制作时采用层叠样式表技术,可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控制. 只要对相应的代码 ...
    
		
    2. 
						
  2. CSS布局口诀 - CSS BUG顺口溜
		
    在进行CSS网页布局时遇到BUG,请认真阅读以下内容,非常容易记忆的,不知道哪位高人把CSS BUG编成了顺口溜了!看看好不好记住呢? 一.IE边框若显若无,须注意,定是高度设置已忘记: 二.浮动产生 ...
    
		
    3. 
						
  3. 详解CSS布局
		
    CSS页面布局允许我们拾取网页中的元素,并且控制它们相对正常布局流.周边元素.父容器或者主视口/窗口的位置.主要对文档流的改变进行布局.假设你已经掌握了CSS的选择器.属性和值,并且可能对布局有一定了 ...
    
		
    4. 
						
  4. Python之路-python(css布局、JavaScript)
		
    CSS布局 JavaScript css布局: 后台管理界面一:(左右标签都有下来菜单) 利用position: absolute;让某个标签固定在具体位置,然后使用overflow: auto;属性 ...
    
		
    5. 
						
  5. CSS 布局 - Overflow
		
    CSS 布局 - Overflow CSS overflow 属性用于控制内容溢出元素框时显示的方式. 这里的文本内容是可以滚动的,滚动条方向是垂直方向.dd马达价格 这里的文本内容是可以滚动的,滚动 ...
    
		
    6. 
						
  6. css布局基础总结
		
    前端css布局知识繁杂,实现方式多种多样.想写出高效.合理的布局,必须以深厚的css基础为前提.为了方便记忆和复习,将css布局要点记录如下.内容较多,应用方面说的不太详细,但都是很实用的点. 所谓布 ...
    
		
    7. 
						
  7. css布局&初始化&基准样式
		
    学习css布局比较好的网站 学习css布局 1.css设置模块 typography(字体) colour(颜色) link(链接) forms(表单) layout(布局) navigation(导 ...
    
		
    8. 
						
  8. 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍
		
    01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline    ...
    
		
    9. 
						
  9. 前端之DIV+CSS布局
		
    刚开始学习javaweb,首先定位学习后端,可是随着学习的深入和项目的进行,越来越发现前端知识的欠缺,之前也随着视频看过,随着时间的流逝,具体的应用也随之忘记了. 而现在开始自己练习项目,发现前端知识 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. MVC MVP 和 MVVM的图示
			
    一直对于这些什么MVC MVP 和 MVVM都是云里雾里的 完全分不清楚 感觉jq上也没怎么用过,理解也很片面,画几张图也许能够大体分清他们之间的区别. 1.MVC(Model-View-Contro ...
    
			
    2. 
						
  2. DOS常用命令总结
			
    cd 文件夹 如要进入D盘x文件夹,需要先d: 再Enter,然后cd x再Enter. echo \ & pause exit 换行等待按任意键退出,在此操作之前可以做发邮件等动作,bat调 ...
    
			
    3. 
						
  3. vs安装后当切换到图形设计界面的时候自动弹出“正在准备安装的提升”,然后程序处于假死状态
			
    Vs2008 安装后当切换到图形设计界面的时候自动弹出 ”正在准备安装的提示“,然后程序处于假死状态 在网上找了很多,最终解决问题:  从vs2008安装光盘中找到 /WCU/WebDesignerC ...
    
			
    4. 
						
  4. MindManger学习技巧
			
    ctrl+shift+f 字体颜色
    
			
    5. 
						
  5. Linq to xml 小例
			
    static void Main(string[] args)        {            string strXml = @"<?xml version='1.0' en ...
    
			
    6. 
						
  6. Android 组件属性
			
    属性名称 描述 android:background 设置背景色/背景图片.可以通过以下两种方法设置背景为透明:”@android:color/transparent”和”@null”.注意TextV ...
    
			
    7. 
						
  7. 用Runtime.getRuntime().exec()需要注意的地方
			
    有时候我们可能需要调用系统外部的某个程序,此时就可以用Runtime.getRuntime().exec()来调用,他会生成一个新的进程去运行调用的程序. 此方法返回一个java.lang.Proce ...
    
			
    8. 
						
  8. Android中ListView的用法
			
    使用方法1 显示简单的文本 在layout文件中像加入普通控件一样在layout文件中引入ListView <ListView android:id="@+id/list_view&q ...
    
			
    9. 
						
  9. SAE使用心得1
			
    最近准备在新浪云端SAE上挂点自己的小网站,这样自己开发个什么东西别人能用.但是第一次接触SAE,遇到一些问题,记下来给大家看. 1.安装的svn版本不能高于 1.8,否则无法向SAE提交代码. 2. ...
    
			
    10. 
						
  10. java day2一个模拟双色球的代码
			
    package day2; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt ...
    
			
    11.