css那些事(一)

一、内边框padding和外边框margin属性缩写

内外边框有四个属性:padding-top,padding-right,padding-bottom,padding-left;margin-top,margin-right,margin-bottom,margin-left。将其简写,就是把四个属性合并成一个padding和margin即可。

内外边框根据上右下左的顺时针方向可以罗列以下4种简写方式

property:value1;表示所有边都是一个值value1.

property:value1 value2;表示top,bottom是value1;right,left是value2.

property:value1 value2 value3;表示top是value1;right,left是value2;botom是value3;

property:value1 value2 value3 value4;表示top是value1;right是value2;left是value3;botom是value4;

二、选择器

1、包含选择器

p  strong{

}/*将p标签里的所有strong标签定义样式*/

2、子选择器

body > strong{

}/*body标签下的子元素strong标签*/

3、相邻选择器

p + strong{

}/*与p标签相邻的strong的标签*/

时间: 2024-10-12 11:56:26

css那些事(一)的相关文章

CSS那些事!这个篇幅是我特意开的,不是因为帮助小菜之类的,而是在多人的团队配合中各种命名冲突的规范让人蛋疼

CSS那些事!这个篇幅是我特意开的,不是因为帮助小菜之类的,而是在多人的团队配合中各种命名冲突的规范让人蛋疼. css这个东西只要不是新的离谱都会写,但是每个人的命名风格,方法,都不同 有人喜欢驼峰,有人觉得-不错,有的人觉得_很方便,最后有的英文命名,有的干脆拼音....囧 http://www.cnblogs.com/LoveOrHate/category/682181.html 然后没有统一的格式,造成的结果...我爆炸了... 当然经常和团队合作的也就不用看了 这些文章我是专门找啊找,找

CSS那些事读书笔记:第一章

第一章: 1.学习CSS,最好的方法就是不断地做不断的想,不断的实践. 2.CSS语法结构主要由两部分组成:选择符和声明. 3.CSS中对于颜色的表现形式有四种 十六进制形式,如:p{color:#FF00FF}; RGB函数形式,如:p{color:RGB(135,0,224)}; 0%~100%之间的数字,数字一定是整数,如p{RGB(25%,0%,100%)}; 颜色名称,如p{color:red}; 用户系统色盘值,如,background windowtext,如:p{color:wi

学习CSS一些事(下)

2.浮动(float) 浮动(float)特点:1.元素会左移.右移,直到触碰到容器为止.    2.设置浮动元素,仍旧处于标准文档流. 3.当元素没有设置宽度值,而设置了浮动属性,元素的宽度随着内容的变化而变化. 4.当元素设置浮动属性后,会对相邻元素产生影响,相邻元素特指紧邻后面元素. 清除浮动的常用方法:1.1.clear属性:常用 claer:both; clear:left; 或者 clear:right; 1.2.同时设置width:100%(或固定宽度)+overflow:hidd

CSS那些事读书笔记1

提到选择符,只知道类选择符合ID选择符,对选择符的优先权不是很清楚.下面,摘抄书上的示例: 对属性设置!important关键字声明,提升属性的权重值.添加!important关键字声明的属性在优先级别是最高的. 标签选择符.伪类及伪对象:优先级别积分为1. 类选择符.属性选择符:优先级别积分为10. ID选择符:优先级别积分为100. style属性:优先级积分为1000. 实例: p{ color:blue; } p .myColor{color:black;} .myColor{color

10 分钟,带你快速入门前端三大技术(HTML、CSS、JavaScript)

听到前端技术,不少朋友一定会感到有些陌生.但其实,前端,你每天都在接触. 你正在使用的APP,你正在浏览的网页,这些你能看到的界面,都属于前端. 而前端最重要的三大技术,HTML,CSS,JavaScript,则是每一个前端开发者必须具备的技能. 掌握这些技能,你可以快速地做出一个酷炫的APP界面或者一个简单大方的网站页面.因此,就让我们一起来快速学习一下这三门技术吧. 以下内容节选自课程<Vue.js 和 Node.js 构建内容发布系统>. 大家也可以点击课程链接,在实验楼提供的虚拟机环境

字体不同,造成的显示异常

今天在做CSS那些事的时候,发现一个有意思的现象: 不同字体设置,会显示出不同的效果或者说异常 先看代码: 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>跟随标题时间的新闻列表——2</title> 5 <meta charset="utf-8"> 6 <style> 7 .news_list *{ margin:0; padding:0; list-styl

js的动态加载、缓存、更新以及复用(三)

总体思路 1.  建立一个js服务,该服务实现通用js文件的加载.依赖.缓存.更新以及复用. 2.  各个项目如果使用通用js,可(bi)以(xu)使用js服务实现加载. 3.  Js服务只提供通用的js,比如jQuery.my97.easyUI等(可根据实际情况设定具体的js文件). 4.  其他针对特点需求写的js文件,需要自己写代码加载.Js服务可以提供加载用函数.(正在考虑要不要使用sea.js) 5.  Js服务加载的js文件,不需要做任何修改.当然也不负责各个文件里的函数名称是否冲突

【JQuery NoviceToNinja系列】01 开篇 Html页面设计和布局

01 开篇 Html页面设计和布局 index.html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>StarTrackr !</title&

css水平居中那点事

昨晚深夜写了css垂直居中那点事,今晚该写他的兄弟篇:css水平居中那点事了..…^^ 其实本来这两个可以连在一起写,可是为了不要搞混,为了让思路更清晰,最后决定还是分开来些比较好...这样以后也有利于自己重温~~ 一,text-align 为什么要第一个写text-align呢? 其实也没有为什么.....(别打我) 但text-align是一个很神奇的东西,在ie6中使用text-align会有惊喜 text-align是文本居中的意思,是使一个块级元素的行内内容对齐,所以正常来说,text