jackyrong
- 浏览: 7947678 次
- 性别:
- 来自: 广州
-
文章分类
- 全部博客 (2425)
- 软件工程 (75)
- JAVA相关 (662)
- ajax/web相关 (351)
- 数据库相关/oracle (218)
- PHP (147)
- UNIX/LINUX/FREEBSD/solaris (118)
- 音乐探讨 (1)
- 闲话 (11)
- 网络安全等 (21)
- .NET (153)
- ROR和GOG (10)
- [网站分类]4.其他技术区 (181)
- 算法等 (7)
- [随笔分类]SOA (8)
- 收藏区 (71)
- 金融证券 (4)
- [网站分类]5.企业信息化 (3)
- c&c++学习 (1)
- 读书区 (11)
- 其它 (10)
- 收藏夹 (1)
- 设计模式 (1)
- FLEX (14)
- Android (98)
- 软件工程心理学系列 (4)
- HTML5 (6)
- C/C++ (0)
- 数据结构 (0)
- 书评 (3)
- python (17)
- NOSQL (10)
- MYSQL (85)
- java之各类测试 (18)
- nodejs (1)
- JAVA (1)
- neo4j (3)
- VUE (4)
- docker相关 (1)
最新评论
-
xiaobadi：
jacky~~~~~~~~~
推荐两个不错的mybatis GUI生成工具 -
masuweng：
(转）JAVA获得机器码的实现 -
albert0707：
有些扩展名为null
java 7中可以判断文件的contenttype了 -
albert0707：
非常感谢!!!!!!!!!
java 7中可以判断文件的contenttype了 -
zhangle：
https://zhuban.me竹板共享 - 高效便捷的文档 ...
一个不错的网络白板工具
css小结1
1 lable for标签：
<label for="name"><input id="name" type="text"/>
则LABEL FOR为关联的表单元素的ID，
主要是点LABEL的时候，关联的元素也会获得焦点
2 em:相对于“当前元素的”的字体大小而言，比如当前元素的font-size为10PX,则1em=10pX,
如果当前元素无定义，则继承父元素的font-size，如果都无定义，则继承浏览器默认的，则为16PX；
比如首行缩进使用text-indent:2em:
<style type="text/css">
p
{
font-size:14px;
text-indent:2em;
width:360px;
}
</style>
3 1em=16px*1=16pX
默认字体16PX*62.5%=10px，
则1em=10PX
0.75em=7.5PX
比如：
<style type="text/css">
body{font-size:62.5%;}
#p1{font-size:1em;}
#p2{font-size:1.5em;}
#p3{font-size:2em;}
</style>
</head>
<body>
<p id="p1">当前字体大小为1em，也就是10px</p>
<p id="p2">当前字体大小为1.5em，也就是15px</p>
<p id="p3">当前字体大小为2em，也就是20px</p>
</body>
4 CSS继承性：子的继承父亲的，比如
<style type="text/css">
#father{color:Red;font-weight:bold}
</style>
</head>
<body>
<div id="father">
abc
<div id="son">abc</div>
</div>
但注意，比如A标签有默认样式，优先级比继承高，所以：
<style type="text/css">
#father{color:Red;font-weight:bold}
</style>
</head>
<body>
<div id="father">
abc
<a href="http://www.lvyestudy.com">abc</a>
</div>
这个时候链接的A样式不会继承
5 层叠性
同一个元素，如果定义多个样式，并且这些样式有相同权重，则最后的定义为准
<style type="text/css">
div{color:Red;}
div{color:Orange;}
div{color:Blue;}
</style>
<div>abc</div>
<div>abc</div>
<div>abc</div>
则最后肯定全部为blue
行内样式>(内部样式=外部样式）
如果内部样式和外部样式同时存在，则以最后引入的为准
如果继承方式冲突，则“最近的祖先获胜”:
<style type="text/css">
body{color:Red;}
#grandfather{color:Green;}
#father{color: Blue;}
</style>
</head>
<body>
<div id="grandfather">
<div id="father">
<div id="son">abc</div>
</div>
</div>
</body>
则颜色为BLUE,因为SON的最近祖先为father
6 指定样式冲突
权值高的获胜。行内样式>id选择>class选择》元素选择
<style type="text/css">
#lvye{color:Red;}
.lvye{color:Green;}
div{color:Blue;}
</style>
</head>
<body>
<div id="lvye" class="lvye">aabc</div>,因为ID元素选择权重高，所以为RED
7 当继承样式和指定样式发生冲突时，指定样式样式胜：
<style type="text/css">
body{color:Red;}
#outer{color:Green;}
#outer #inner{color:Blue;}
span{color:Purple;}
strong{color:Black;}
</style>
</head>
<body>
<div id="outer">
<p class="inner">
<span><strong>ABC</strong></span>
</p>
</div>
这个时候，STONG因为是指定样式，所以依然为BLACK。
8 !important
来改变优先规则，如果使用这个声明，则会覆盖CSS中任何声明
strong
{
color:Black !important;
}
</style>
</head>
<body>
<div id="outer">
<p class="inner">
<span><strong>ABC</strong></span>
9 CSS的层次选择器
1） 后代选择器
M N {} 选择所有后代选择器中 M元素内部的后代N 元素，（所有N元素）
<style type="text/css">
#first p{color:Red;}
</style>
</head>
<body>
<div id="first">
<p>lvye的子元素</p>
选择first后的所有P元素包括所有子元素；
2） 子元素选择器
M>N 只选择M元素内部的N元素，比如
<style type="text/css">
#first > p{color:Red;}
</style>
</head>
<body>
<div id="first">
<p>lvye的子元素</p>
<p>lvye的子元素</p>
<div id="second">
<p>lvye子元素的子元素</p>
<p>lvye子元素的子元素</p>
</div>
<p>lvye的子元素</p>
<p>lvye的子元素</p>
则SECOND部分保持黑色，其他为红色；
3） 兄弟选择器
M~N {}
选择M后面某一类兄弟元素：
<style type="text/css">
#second~p{color:Red;}
</style>
</head>
<body>
<div id="first">
<p>lvye的子元素</p>
<p>lvye的子元素</p>
<div id="second">
<p>lvye子元素的子元素</p>
<p>lvye子元素的子元素</p>
</div>
<p>lvye的子元素1</p>
<p>lvye的子元素2</p>
则 <p>lvye的子元素1</p>
<p>lvye的子元素2</p>
两行会变色
4） 相领选择器
M+N {} 选择M元素后面的某一个相邻的兄弟元素N；
<style type="text/css">
#second+p{color:Red;}
</style>
</head>
<body>
<div id="first">
<p>lvye的子元素</p>
<p>lvye的子元素</p>
<div id="second">
<p>lvye子元素的子元素</p>
<p>lvye子元素的子元素</p>
</div>
<p>lvye的子元素1</p>
<p>lvye的子元素</p>
</div>
所以， <p>lvye的子元素1</p>变红色；
1 lable for标签：
<label for="name"><input id="name" type="text"/>
则LABEL FOR为关联的表单元素的ID，
主要是点LABEL的时候，关联的元素也会获得焦点
2 em:相对于“当前元素的”的字体大小而言，比如当前元素的font-size为10PX,则1em=10pX,
如果当前元素无定义，则继承父元素的font-size，如果都无定义，则继承浏览器默认的，则为16PX；
比如首行缩进使用text-indent:2em:
<style type="text/css">
p
{
font-size:14px;
text-indent:2em;
width:360px;
}
</style>
3 1em=16px*1=16pX
默认字体16PX*62.5%=10px，
则1em=10PX
0.75em=7.5PX
比如：
<style type="text/css">
body{font-size:62.5%;}
#p1{font-size:1em;}
#p2{font-size:1.5em;}
#p3{font-size:2em;}
</style>
</head>
<body>
<p id="p1">当前字体大小为1em，也就是10px</p>
<p id="p2">当前字体大小为1.5em，也就是15px</p>
<p id="p3">当前字体大小为2em，也就是20px</p>
</body>
4 CSS继承性：子的继承父亲的，比如
<style type="text/css">
#father{color:Red;font-weight:bold}
</style>
</head>
<body>
<div id="father">
abc
<div id="son">abc</div>
</div>
但注意，比如A标签有默认样式，优先级比继承高，所以：
<style type="text/css">
#father{color:Red;font-weight:bold}
</style>
</head>
<body>
<div id="father">
abc
<a href="http://www.lvyestudy.com">abc</a>
</div>
这个时候链接的A样式不会继承
5 层叠性
同一个元素，如果定义多个样式，并且这些样式有相同权重，则最后的定义为准
<style type="text/css">
div{color:Red;}
div{color:Orange;}
div{color:Blue;}
</style>
<div>abc</div>
<div>abc</div>
<div>abc</div>
则最后肯定全部为blue
行内样式>(内部样式=外部样式）
如果内部样式和外部样式同时存在，则以最后引入的为准
如果继承方式冲突，则“最近的祖先获胜”:
<style type="text/css">
body{color:Red;}
#grandfather{color:Green;}
#father{color: Blue;}
</style>
</head>
<body>
<div id="grandfather">
<div id="father">
<div id="son">abc</div>
</div>
</div>
</body>
则颜色为BLUE,因为SON的最近祖先为father
6 指定样式冲突
权值高的获胜。行内样式>id选择>class选择》元素选择
<style type="text/css">
#lvye{color:Red;}
.lvye{color:Green;}
div{color:Blue;}
</style>
</head>
<body>
<div id="lvye" class="lvye">aabc</div>,因为ID元素选择权重高，所以为RED
7 当继承样式和指定样式发生冲突时，指定样式样式胜：
<style type="text/css">
body{color:Red;}
#outer{color:Green;}
#outer #inner{color:Blue;}
span{color:Purple;}
strong{color:Black;}
</style>
</head>
<body>
<div id="outer">
<p class="inner">
<span><strong>ABC</strong></span>
</p>
</div>
这个时候，STONG因为是指定样式，所以依然为BLACK。
8 !important
来改变优先规则，如果使用这个声明，则会覆盖CSS中任何声明
strong
{
color:Black !important;
}
</style>
</head>
<body>
<div id="outer">
<p class="inner">
<span><strong>ABC</strong></span>
9 CSS的层次选择器
1） 后代选择器
M N {} 选择所有后代选择器中 M元素内部的后代N 元素，（所有N元素）
<style type="text/css">
#first p{color:Red;}
</style>
</head>
<body>
<div id="first">
<p>lvye的子元素</p>
选择first后的所有P元素包括所有子元素；
2） 子元素选择器
M>N 只选择M元素内部的N元素，比如
<style type="text/css">
#first > p{color:Red;}
</style>
</head>
<body>
<div id="first">
<p>lvye的子元素</p>
<p>lvye的子元素</p>
<div id="second">
<p>lvye子元素的子元素</p>
<p>lvye子元素的子元素</p>
</div>
<p>lvye的子元素</p>
<p>lvye的子元素</p>
则SECOND部分保持黑色，其他为红色；
3） 兄弟选择器
M~N {}
选择M后面某一类兄弟元素：
<style type="text/css">
#second~p{color:Red;}
</style>
</head>
<body>
<div id="first">
<p>lvye的子元素</p>
<p>lvye的子元素</p>
<div id="second">
<p>lvye子元素的子元素</p>
<p>lvye子元素的子元素</p>
</div>
<p>lvye的子元素1</p>
<p>lvye的子元素2</p>
则 <p>lvye的子元素1</p>
<p>lvye的子元素2</p>
两行会变色
4） 相领选择器
M+N {} 选择M元素后面的某一个相邻的兄弟元素N；
<style type="text/css">
#second+p{color:Red;}
</style>
</head>
<body>
<div id="first">
<p>lvye的子元素</p>
<p>lvye的子元素</p>
<div id="second">
<p>lvye子元素的子元素</p>
<p>lvye子元素的子元素</p>
</div>
<p>lvye的子元素1</p>
<p>lvye的子元素</p>
</div>
所以， <p>lvye的子元素1</p>变红色；
分享到：
发表评论
-
微信开发工具中时间问题的小坑
2018-02-07 19:07 827刚开始用微信小程序开发工具，每次运行任何应用，都报这个错误： ... -
三篇不错的介绍CSS GRID的文章
2017-12-06 09:08 555三篇不错的介绍CSS GRID的文章： http://www. ... -
双因素认证（2FA）教程
2017-11-03 09:16 1572http://www.ruanyifeng.com/blog/ ... -
es6 中的export
2017-08-20 08:00 824https://juejin.im/post/5998625f ... -
markdown中的空格
2017-08-20 07:53 1704即使手动输入空格， 也是很不推荐的方法。我推荐全角空格，切换 ... -
(转）讲真，别再使用JWT了
2017-08-17 23:21 1013不错的好文： http://insights.thoughtw ... -
(转）手把手教你WebStorm+chrome实现时时调试刷新
2017-08-15 10:50 3030参考： http://jingyan.baidu.com/ar ... -
IntelliJ Idea 2017 免费激活方法
2017-08-15 09:38 93351. 到网站 http://idea.lanyus.com/ ... -
前端框架这么多，该何去何从？
2017-08-04 07:17 650http://insights.thoughtworkers. ... -
记录一个HTML 5画拓扑图的商业公司
2017-07-18 19:56 850http://qunee.com/ DEMO:http:// ... -
vue 2例子学习收集
2017-07-16 11:46 10091 vue2.0手撸闲鱼App https://githu ... -
（收藏）虚拟DOM内部是如何工作的
2017-07-13 22:08 596虚拟DOM内部是如何工作的 https://segmentfa ... -
最近看到的几篇精彩JAVASCRIPT博客文章推荐
2017-07-11 07:10 572【深度长文】JavaScript数组所有API全解密 http ... -
jsonp 跨域原理：深入浅出 jsonp
2017-07-10 19:55 1432https://lzw.me/a/jsonp.html jso ... -
(转）深度长文-JavaScript数组所有API全解密
2017-07-08 19:59 824深度长文-JavaScript数组所有API全解密 http: ... -
(收藏）网页导出PDF的方案
2017-07-06 07:13 988(收藏）网页导出PDF的方案 https://yiqiwuli ... -
Chromium 新的弹窗机制以及 HTML 的 <dialog> 元素
2017-06-28 12:37 1151https://juejin.im/post/59525195 ... -
国内一个不错的大屏UI设计厂家
2017-06-03 19:43 3160http://www.lanlanwork.com/dp.ph ... -
canvas仿芝麻信用分仪表盘
2017-05-28 20:21 1594canvas仿芝麻信用分仪表盘 https://segment ... -
(转）CSS 变量教程
2017-05-10 21:12 580http://www.ruanyifeng.com/blog/ ...
相关推荐
在“css总结1”中，我们探讨了几种引入CSS样式的方法以及一些基本的CSS属性。 首先，让我们来看一下CSS样式的组成。一个CSS规则通常由两部分构成：选择器和声明。选择器指向你想要应用样式的HTML元素，如`h3`或`p`...
"HTML+CSS总结" HTML（HyperText Mark-up Language）是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML 文本是由 HTML 命令组成的描述性文本，HTML 命令可以说明文字、图形、动画、声音、表格、...
css学习总结思维导图
这篇博客"CSS常用样式总结积累"是博主对CSS的一些核心概念和技术进行的归纳，旨在帮助读者理解和掌握CSS的基本用法。以下是对这些知识点的详细解释： 1. **选择器**: CSS选择器是匹配HTML元素的方式，如类选择器（`...
CSS制作网页总结经验,CSS制作网页总结经验,CSS制作网页总结经验
在本“上课用CSS实验总结”中，我们将深入探讨CSS（层叠样式表）的核心概念以及在实际项目中的应用。CSS是网页设计的关键技术之一，它负责定义网页内容的外观和布局，使得网页更具视觉吸引力并提高用户体验。在这个...
### CSS实战学习总结 在《CSS实战学习总结》这一篇深度文档中，作者辛磊针对CSS的实际应用进行了全面而深入的解析，旨在帮助读者掌握CSS的核心技能，提升网页设计与开发的能力。以下是对该文档中关键知识点的提炼与...
### 总结 HTML和CSS的学习是成为一名前端开发者的基石。理解基本元素和样式规则，掌握布局技巧，以及了解响应式设计和预处理器的使用，将有助于创建出专业且用户友好的网页。通过不断实践和探索，可以逐步深化对这两...
本文将基于“关于图片显示问题的CSS总结”这一主题，深入探讨CSS在处理图片显示时的关键知识点，以帮助开发者更好地理解和解决图片相关的问题。 首先，我们来看CSS中的`background-image`属性，它用于设置元素的...
一、CSS语法规范 二、CSS选择器 （1）基础选择器 （i）标签选择器 （ii）类选择器 （iii）id选择器 （iv）通配符选择器 （2）复合选择器 （i）后代选择器 （ii）子代选择器 （iii）并集选择器 （iv）伪类选择器 三、...
总结来说，Postcss-css-variables插件是前端开发者处理CSS Variables的有效工具，它增强了CSS Variables的浏览器兼容性，简化了样式管理，提高了代码的可维护性和效率。结合PostCSS的其他插件，可以构建出强大的CSS...
这是一篇关于前端页面的介绍，开放学习，望大家多多看看、 哈哈
整理了常用的css属性，适用于新手查阅，熟悉css基本属性使用等等
dw cs6的css总结
html+css知识点总结
总结起来，Blueprint CSS 是一个强大且实用的CSS框架，能够帮助开发者快速构建响应式的、视觉统一的网页。其网格系统、预定义样式和打印优化等功能，大大提高了开发效率，同时也降低了维护成本。对于任何希望提升...
下面小编给大家分享一下。 首先点击左上角的file菜单，选择Setting 接着选择Editor下面的Inspections选项，如下图所示 然后在右侧找到CSS，选择typo，如下图所示 接着点击apply和ok按钮，如下图所示 然后新建一...
### CSS学习总结 #### 一、CSS选择器与样式应用 **1. 行内样式** 行内样式是在HTML元素内部直接使用`style`属性来指定样式规则的方式。这种方式适用于临时性的样式修改，但不利于代码的维护和复用。 **示例**： ...
本篇文章将深入探讨如何利用CSS实现无图片的圆角效果，以及在各种场景下创建圆角区块容器和圆形边框的方法。 一、CSS圆角基础 CSS3引入了`border-radius`属性，它允许我们为元素的四个角设定不同的圆角半径，从而...