html5 css3中的一些笔记

<!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. 阴影的模糊值 默认是04. 阴影的延伸半价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的字体大小）}

转载于:https://www.cnblogs.com/shaoshao/p/4641261.html

html5 css3中的一些笔记相关推荐

html5 css 响应式_在HTML5 / CSS3中编写响应式简历
本文是我们的" Web响应式设计系列"的一部分,该系列由工具,资源和教程组成,可帮助您为所有平台的用户创建网站. 单击此处查看同一系列的更多文章. 业务部分的几乎每个人都在某个时间 ...
HTML5+CSS3 非常全的笔记
文章目录 HTML5 vsco的使用常用标签图像标签超链接标签锚点链接特殊字符表格标签列表标签表单标签实战(注册页面) CSS3 书写规范 css选择器基础选择器标签选择器类选 ...
HTML背景渐变圆圈,背景渐变：html5+css3中的background: -moz-linear-gradient 用
在CSS中background: -moz-linear-gradient 让网站背景渐变的属性,目前火狐3.6以上版本和google浏览器支持这个属性. 背景使用CSS渐变显示可以不使用图像就实现两 ...
html5+css3中的background: -moz-linear-gradient 用法
http://hi.baidu.com/zyyhyzazwm/item/72dc6c9a40513acf1a49df56 在CSS中background: -moz-linear-gradient 让 ...
Html5,Css3快速注释快捷键
在编写HTML5+CSS3中对于编写的每个模块十分有必要添加一个注释,在需要修改的时候便于快速查找到相应模块,对于新手来说快速添加注释就需要了解以下两个快速注释的快捷键. HTML5:快速注释快捷键为 ...
前端HTML5+CSS3学习笔记
HTML5+CSS3学习笔记 ==CSS第一天== 一.css简介二.css语法规范三.css代码风格四.css选择器的作用五.css基础选择器 1.标签选择器: 2.类选择器 3.多类名选择 ...
最最详细的黑马前端HTML5+CSS3笔记，给大家整理好了
基于黑马前端视频学习的CSS3笔记,每一天的知识点都放在一起,方便学习查阅 ==CSS第一天== 一.css简介二.css语法规范三.css代码风格四.css选择器的作用五.css基础选择器 ...
Web前端html5+css3前端开发入门学习笔记
文章目录前言 HTML 认识HTML 1. 网页组成和本质 2.了解浏览器 3.web标准 4.HTML感知 5.HTML骨架 6.编译软件vscode的简介和使用 7.注释 8.标签组成和关系 9 ...
HTML5+CSS3+ES5/6+TS+WebAPI前端入门/实习题库笔记
目录网页组成注释 HTML CSS JS HTML5 字符实体 meta标签基本标签 form表单标签 table表格标签 img图像标签 a超链接标签 dl描述列表标签媒体标签 audio音 ...

html5 css3中的一些笔记

html5 css3中的一些笔记相关推荐

最新文章

热门文章