<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" >

    <title>css选择器</title>

    <style type="text/css">

        /* HTML 文档css

        :root{

            border: solid 1px red ;

        };

        */

        /*字选择器 带>号 也可以不用带*/

        /*ul > li{

            color: red;

        }*/

        /*ul > li:first-child{

            color: red;

        }

        ul > li:last-child{

            color: red;

        }

        */

        /*输入框的启用和禁止输入的CSS*/

        /*input:enabled{

            border: 1px solid red;

        }

        input:disabled{

            border: 1px solid blue;

        }*/

        /*验证成功就显示blue,验证不成功显示green*/

        /*input:valid{

            border: 1px solid blue;

        }

        input:invalid{

            border: 1px solid green;

        }*/

        /*必填表单 和 不必填表单*/

        /*input:required{

        }

        input:optional{

        }*/

        /*1. 显示 2.访问过后的显示 3.鼠标移动 4.点击不动后的显示*/

        /*a:link{

        }

        a:visited{

        }

        a:hover{

        }

        a:active{

        }*/

        /*获取光标时 谷歌不兼容*/

        /*input:focus{

            border: 1px solid red;

        }*/

        /*a标签 href!=baidu 的a元素*/

        /*a:not([href*="baidu"]){

            color: red;

        }*/

        /*em是相对的 跟字号大小挂钩,很灵活*/

        p{

            margin: 0;

            padding: 0;

            background: gray;

            font-size: 20px;

            width: 50%;

        }

    </style>

</head>

<body>

    <ul>

        <li>ul第1个子元素</li>

        <li>ul第2个子元素</li>

        <li>ul第3个子元素</li>

        <li>ul第4个子元素</li>

    </ul>

    <input type="text"  />

    <input type="email" />

    <br/>

    <a href="http:www.baidu.com" >baidu</a>

    <a href="http:www.google.com" >google</a>

    <a href="http:www.haosou.com" >haosou</a>

    <p>em单位的讲解

        em单位的讲解em单位的讲解em单位的讲解em单位的讲解

    </p>

</body>

</html>

/*
display重要的概念



块级元素(display: block;) 1.能设置大小（height,width）2. 能自动的换行 div p




内联元素(display: inline;) 1.不能设置大小 2.不能自动换行 span b




内联-块(display: inline-block;) 1.能设置大小 2.不能自动换行 img




float浮动 理解：如果有div A,B。 A浮动B不浮动，相当于水下面的物体A浮动起来，然后在A后面的B就会跑到A的位置，A就会浮动到水面上，则就会挡住B。就相当于div A凸起来了，B就跑到A原来的位置了、
			clean 为了下面的元素不受上面元素的浮动干扰，可以使用
			clean:left|right|both; (清除浮动)
		*/


 






div{

            width: 400px;

            height: 300px;

            /*css3中的透明度*/

            opacity: 0.5;

            border: 10px solid green;

            /*

            阴影效果

            1. 左右阴影 正是右边 负是左边

            2. 上下

            3. 阴影的模糊值 默认是0

            4. 阴影的延伸半价

            5. 颜色（可选）

            6. inset值 （可选，内阴影）

            */

            box-shadow: 5px 5px 5px 5px;

            /*轮廓*/

            outline: red solid 1px;

        }

        /*

            em 和 rem单位的用法，都是相对的

        */

        html{

            font-size: 10px;

            // 等价于 6.25%  (默认字体大小16px,10/16)

        }

        .p1{

            font-size: 1.7em;     // em 相对于父元素的字体大小

        }

        .p2{

            font-size: 17px;

        }

        .p3{

            font-size: 1.7rem;    // rem 直接相对于根目录（设置html的字体大小）

        }


												


											
html5 css3中的一些笔记的更多相关文章
	

    
								
  1. html5+css3中的background: -moz-linear-gradient 用法
		
    在CSS中background: -moz-linear-gradient 让网站背景渐变的属性,目前火狐3.6以上版本和google浏览器支持这个属性. background: -moz-linea ...
    
		
    2. 
						
  2. html5+css3中的background: -moz-linear-gradient 用法 (转载)
		
    转载至-->http://www.cnblogs.com/smile-ls/archive/2013/06/03/3115599.html 在CSS中background: -moz-linea ...
    
		
    3. 
						
  3. html5+css3 权威指南阅读笔记（三）---表单及其它新增和改良元素
		
    一.新增元素及属性 1.表单内元素的form属性. html5: <form id="testForm"> <input type=text> </f ...
    
		
    4. 
						
  4. 前端笔记之HTML5&CSS3（中）选择器&伪类伪元素&CSS3效果&渐变背景&过渡
		
    一.CSS3选择器 CSS3是CSS的第三代版本,新增了很多功能,例如:强大的选择器.盒模型.圆角.渐变.动画.2D/3D转换.文字特效等. CSS3和HTML5没有任何关系!HTML5骨架中,可以用 ...
    
		
    5. 
						
  5. 《HTML5与CSS3基础教程》笔记
		
    以下笔记摘要页码基于 人民邮电出版社 2013年1月第1版 英文书名:HMTL5 and CSS3 Visual Quickstart Guide (Seven Edition) 前言 P2: 渐进增 ...
    
		
    6. 
						
  6. 【HTML5&CSS3进阶04】CSS3动画应该如何在webapp中运用
		
    动画在webapp的现状 webapp模式的网站追求的就是一个体验,是HTML5&CSS3浪潮下的产物,抛开体验不说,webapp模式门槛比较高: 而体验优化的一个重点便是动画,可以说动画是w ...
    
		
    7. 
						
  7. HTML5&CSS3练习笔记(二)
		
    HTML5&CSS3  练习CSS3伪选择器使用 1.first-line  格式:元素:first-line 说明:设置同一个标签下所有行内容的第一行的样式,例如: <table st ...
    
		
    8. 
						
  8. HTML5+CSS3学习笔记（二） 页面布局：HTML5新元素及其特性
		
    HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 本次学习HTML5的新标签元素有: <head ...
    
		
    9. 
						
  9. HTML5+CSS3学习笔记（一）
		
    HTML5+CSS3概述 HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那就是HTML ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. NoSql之旅--Cassandra的Cql简介(二)
			
    安装完Cassandra后我们就开始体验一下这个数据库的查询吧,传统的关系数据库使用的sql进行查询,而Cassandra使用的cql. cql语法还是很多的,这里不一一详细阐述了,也没这个必要,具体 ...
    
			
    2. 
						
  2. Java深入 - Java 内存分配和回收机制
			
    Java的GC机制是自动进行的,和c语言有些区别需要程序员自己保证内存的使用和回收. Java的内存分配和回收也主要在Java的堆上进行的,Java的堆中存储了大量的对象实例,所以Java的堆也叫GC ...
    
			
    3. 
						
  3. Zookeeper的学习材料
			
    https://www.ibm.com/developerworks/cn/opensource/os-cn-zookeeper/ https://www.zhihu.com/question/351 ...
    
			
    4. 
						
  4. Github 安全类Repo收集整理
			
    作者:天谕链接:https://zhuanlan.zhihu.com/p/21380662来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.刚好这两天对之前github上关 ...
    
			
    5. 
						
  5. 关于a标签和submit标签
			
    a如果没有连接“#”:“javascript:void(0)”;或“(胡乱写一堆)” 这两个标签点击都有刷新功能,所以会清空你的数据.
    
			
    6. 
						
  6. BZOJ 1191 【HNOI2006】 超级英雄Hero
			
    Description 现在电视台有一种节目叫做超级英雄,大概的流程就是每位选手到台上回答主持人的几个问题,然后根据回答问题的多少获得不同数目的奖品或奖金.主持人问题准备了若干道题目,只有当选手正确回 ...
    
			
    7. 
						
  7. 苹果系统里面部署ASP.NET
			
    需要在global文件里设置一下 protected void Application_Start() { AreaRegistration.RegisterAllAreas(); FilterCon ...
    
			
    8. 
						
  8. Linux 信号详解四（pause，alarm）
			
    pause函数 --将进程置为可中断睡眠状态,然后它调用内核函数schedule(),使linux进程调度器找到另一个进程来运行. --pause使调用者进程挂起,知道一个信号被捕获. alarm函数 ...
    
			
    9. 
						
  9. eclipse: workspace出错导致无法启用的解决
			
    通常我们会在eclipse中创建多个workspace,比如一个用于学习,一个用于工作... ,因为种种原因,时不时会发现eclipse切换workspace后启动失败,提示让你去看workspace ...
    
			
    10. 
						
  10. WPF中的数据验证
			
    数据验证 WPF的Binding使得数据能够在数据源和目标之间流通,在数据流通的中间,便能够对数据做一些处理. 数据转换和数据验证便是在数据从源到目标 or 从目标到源 的时候对数据的验证和转换. V ...
    
			
    11.