CSS笔记--选择器

mate的使用

<meta charset="UTF-8">

    <title>Document</title>

    <meta name="keywords" content="java培训,大前端培训">

    <meta name="description" content="据说中国口碑最好的IT培训机构！">

    <meta http-equiv="refresh" content="5; http://www.itcast.cn">

    <link rel="stylesheet" href="1.css">

    <link rel="icon" href="favicon.ico">

keywords：为了可以方便速索

description：是网站的描述信息

refresh：页面刷新，内容是数字；地址，多久之后跳转到这个地址。

css的外部引入

    <link rel="stylesheet" href="1.css">

    <link rel="icon" href="favicon.ico">

表格

    <table width="400" height="400" border="1" cellspacing="0" align="center" bgcolor="pink">

        <tr>

            <th colspan="2">京东会员</th>

            <!-- <td></td> -->

        </tr>

        <tr>

            <td>用户名:</td>

            <td><input type="text" value="请输入用户名" maxlength="6"><font color="red" size="2">最多输入6个字符</font></td>

        </tr>

        <tr>

            <td>密 码:</td>

            <td><input type="password"  maxlength="6"><font color="red" size="2">最多输入6个字符</font></td>

        </tr>

        <tr>

            <td>验证码:</td>

            <td><input type="text"><br><br><img src="作业/yzm.jpg" width="100"></td>

        </tr>

        <tr>

            <td align="center" colspan="2"><a href="dl.html">登录</a>|<a href="zc.html">注册用户</a></td>

            <!-- <td></td> -->

        </tr>

    </table>

介绍：

  1. table：设置长和高
  2. 背景色（bgcolor）
  3. colspan:合并列

选择器

  1. 标签选择器
  2. 类选择器
  3. id选择器
案例
	<style type="text/css">

		类选择器

		.G{

			font-size: 200px;//字体大小和颜色

			color: #000099;

		}

		.o1{

			font-size: 200px;

			color: #990000;

		}

		.o2{

			font-size: 200px;

			color: orange;

		}

		.g1{

			font-size: 200px;

			color: #000099;

		}

		.l{

			font-size: 200px;

			color: #009900;

		}

		.e{

			font-size: 200px;

			color: #990000;

		}

	</style>

</head>

<body>

	<span class="G">G</span>

	<span class="o1">o</span>

	<span class="o2">o</span>

	<span class="g1">g</span>

	<span class="l">l</span>

	<span class="e">e</span>

</body>

通配符选择器

*{

		font-size: 100px;

		color: red;

	}

交集选择器

div.test[标签+类选择器]

div#test[标签+id选择器]

后代选择器

类选择器

/*.box{

 	font-size:40px;

	color:red;

}

后代选择器[标签+标签]

 div span{

   	font-size: 50px;

 }*/

 类+标签

  /*.box span{

   	background-color: blue;

 }*/

 /* .box .miss{

     	color:red;

   }*/

     .box span{

     	color:red;

     }

子代选择器

div>span{

		color:red;

		font-size:40px;

	}

p>span{

	color:green;

	font-size:60px;

}

子代和后带的区别就是，后代不论隔了多少代，子代仅仅是一代。

并集选择器

.box,#miss,span,h1{

	font-size:100px;

	color: #fff;

	background-color: green;

}

CSS笔记--选择器的更多相关文章

  1. CSS 笔记——选择器

    1. 选择器 (1)类型选择器(标签选择器) 基本语法 E { sRules } 使用说明 类型选择器.以文档对象(Element)类型作为选择器. 选择面较大,适合做某种标签元素外观的常规设置. 代 ...

  2. 【CSS复合选择器、元素显示模式、背景】前端小抄(3) - Pink老师自学笔记

    [CSS复合选择器.元素显示模式.背景]前端小抄(3) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS的复合选择器 1.1 什么是复合选择器 在 CSS 中,可以根据选 ...

  3. CSS笔记——属性选择器

    1.存在和值(Presence and value)属性选择器这些属性选择器尝试匹配精确的属性值:[attr]:该选择器选择包含 attr 属性的所有元素,不论 attr 的值为何.[attr=val ...

  4. 前端学习笔记之CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解

    派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...

  5. CSS 笔记之 CSS 选择器

    /*先设置背景再设置前景*/ pre{ background-color: #f8f8f8; border: solid 1px #ccc; border-radius: 3px; overflow: ...

  6. HTML+CSS笔记 CSS笔记集合

    HTML+CSS笔记 表格,超链接,图片,表单 涉及内容:表格,超链接,图片,表单 HTML+CSS笔记 CSS入门 涉及内容:简介,优势,语法说明,代码注释,CSS样式位置,不同样式优先级,选择器, ...

  7. CSS系列（7）CSS类选择器Class详解

    这一篇文章,以笔记形式写. 1,  CSS 类选择器详解 http://www.w3school.com.cn/css/css_selector_class.asp 知识点: (1)    使用类选择 ...

  8. CSS的选择器

    <div id="demo"> <div class="inner"> <p><a href="#" ...

  9. JS实战 · 仿css样式选择器

    代码如下: <html> <head>     <meta http-equiv="Content-Type" content="text/ ...

随机推荐

  1. 网站及监控利器 Pandora FMS使用体验

    Pandora FMS 是一个 开源的应用程序 ,用来监测网站的各种活动,它可以收到实时的监测报告,并发送到你指定的邮箱,也可以通过e-mail, SMS 发送. 650) this.width=65 ...

  2. Android 数据库框架总结，总有一个适合你！

    一:OrmLite 简述: 优点: 1.轻量级:2.使用简单,易上手:3.封装完善:4.文档全面.缺点:1.基于反射,效率较低(本人还没有觉得效率低):2.缺少中文翻译文档 jar包 地址:http: ...

  3. 记录一下sql两个表关联的查询使用方法

    SELECT * FROM t_yymp_user_info where user_id = (select b.user_id from t_yymp_auth_role as a,t_yymp_a ...

  4. printf---格式化并输出结果到标准输出。

    printf命令格式化并输出结果到标准输出. 语法 printf(选项)(参数) --help:在线帮助: --version:显示版本信息. 参数 输出格式:指定数据输出时的格式: 输出字符串:指定 ...

  5. 【Henu ACM Round#16 C】Graph and String

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 根据题意:先明确以下规则: 1.如果两个点之间没有边,那么这两个点只能是a或c,且不能相同 2.如果两个点之间有边,那么他们之间的差 ...

  6. 洛谷 P3887 [GDOI2014]世界杯

    P3887 [GDOI2014]世界杯 题目描述 3014年世界杯足球赛就要开始了!作为卫冕冠军中国足球队的教练,手下每位球员都是猛将,如何摆出最强的11人阵容也是一件幸福的烦恼事啊. 众所周知,足球 ...

  7. 什么是PV和UV?

    技术角度 1个PV是指从浏览器发出一个对网络server的Request,网络server接到Request之后.会開始把该Request相应的一个Page(Page就是一个网页)发送到client的 ...

  8. 【推荐】适合本科生的网络公开课（MOOC为主），不断更新……

    题记:身在海大(湛江),是幸运还是不幸,每一个人有自己的定义.人生不能再来一次,唯有把握当下.提高自己,才可能在不能拼爹的年代靠自身实力前行.或许,我们做不了富二代.但我们每一个人.都有机会成为富二代 ...

  9. jquery20--animate() : 运动的方法

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  10. selection-内容选中跟光标移动

    如果我们希望手动的改变edittext的光标,我们可以使用 setSelection(int start, int end); setSelection(int index); 这个方法,如果我们选择 ...