2015第10周四-CSS小结
这两天做前台页面发现个人在CSS前端方法很多基础知识都忘了,晚上又搜索学习了下,把相关内容摘录总结。
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。
selector {declaration1; declaration2; ... declarationN }
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。
selector {property: value}
下面这行代码的作用是将 h1 元素内的文字颜色定义为红色,同时将字体大小设置为 14 像素。
在这个例子中,h1 是选择器,color 和 font-size 是属性,red 和 14px 是值。
h1 {color:red; font-size:14px;}
下面的示意图为您展示了上面这段代码的结构:
提示:请使用花括号来包围声明。
CSS 元素选择器 http://www.w3school.com.cn/css/css_selector_type.asp
h1 {color:blue;}
选择器分组 http://www.w3school.com.cn/css/css_selector_grouping.asp
h1,h2,h3,h4,h5,h6
{
color: green;
}
所有的标题元素都是绿色的
通配符选择器
CSS2 引入了一种新的简单选择器 - 通配选择器(universal selector),显示为一个星号(*)。该选择器可以与任何元素匹配,就像是一个通配符。
例如,下面的规则可以使文档中的每个元素都为红色:
* {color:red;}
类选择器:http://www.w3school.com.cn/css/css_selector_class.asp
.center
{text-align: center}所有拥有 center 类的 HTML 元素均为居中。
元素也可以基于它们的类而被选择:
td.fancy
{
color: #f60;
background: #666;
}
在上面的例子中,类名为 fancy 的表格单元将是带有灰色背景的橙色。
<td class="fancy"
>
CSS 多类选择器
.important.warning {background:silver;}
CSS ID 选择器详解 http://www.w3school.com.cn/css/css_selector_id.asp
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 "#" 来定义。
下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二个定义元素的颜色为绿色:
#red
{color:red;}#green
{color:green;}
属性选择器 http://www.w3school.com.cn/css/css_selector_attribute.asp
下面的例子为带有 title 属性的所有元素设置样式:
[title]
{
color:red;
}
属性和值选择器
下面的例子为 title="W3School" 的所有元素设置样式:
[title=W3School]
{
border:5px solid blue;
}
[title~=hello]
{ color:red; }由空格分隔的属性值
[lang|=en] { color:red; }连字符分隔的属性值
CSS 后代选择器http://www.w3school.com.cn/css/css_selector_descendant.asp
后代选择器(descendant selector)又称为包含选择器。
后代选择器可以选择作为某元素后代的元素。
如果写作 ul em {color:red;},这个语法就会选择从 ul 元素继承的所有 em 元素,而不论 em 的嵌套层次多深
CSS 子元素选择器 http://www.w3school.com.cn/css/css_selector_child.asp
与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素子元素的元素。
例如,如果您希望选择只作为 h1 元素子元素的 strong 元素,可以这样写:
h1 > strong {color:red;}
CSS 相邻兄弟选择器 http://www.w3school.com.cn/css/css_selector_adjacent_sibling.asp
相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。
例如,如果要增加紧接在 h1 元素后出现的段落的上边距,可以这样写:
h1 + p {margin-top:50px;}
CSS 伪类 (Pseudo-classes) http://www.w3school.com.cn/css/css_pseudo_classes.asp
CSS 伪类用于向某些选择器添加特殊的效果
语法
伪类的语法:
selector : pseudo-class {property: value}
CSS 类也可与伪类搭配使用。
selector.class : pseudo-class {property: value}
锚伪类
在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标悬停状态。
a:link
{color: #FF0000} /* 未访问的链接 */a:visited
{color: #00FF00} /* 已访问的链接 */a:hover
{color: #FF00FF} /* 鼠标移动到链接上 */a:active
{color: #0000FF} /* 选定的链接 */
CSS2 - :first-child 伪类
p:first-child {font-weight: bold;} 这个p是第一个子元素。修饰p li:first-child {text-transform:uppercase;}
选择器的优先级:
- 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
- 作为style属性写在元素内的样式
- id选择器
- 类选择器
- 标签选择器
- 通配符选择器
- 浏览器自定义或继承
同一级别中后写的会覆盖先写的样式
并不是所有的属性对行内元素都能够生效
- 行内元素不会应用width属性,其长度是由内容撑开的
- 行内元素不会应用height属性,其高度也是由内容撑开的,但是高度可以通过line-height调节
- 行内元素的padding属性只用padding-left和padding-right生效,padding-top和padding-bottom会改变元素范围,但不会对其它元素造成影响
- 行内元素的margin属性只有margin-left和margin-right有效,margin-top和margin-bottom无效
- 行内元素的overflow属性无效,这个不用多说了
- 行内元素的vertical-align属性无效(height属性无效)
一些互斥的元素
- 对于absolute和fixed定位的(固定大小,设置了width和height属性)元素,如果设置了top和left属性,那么设置bottom和right值就没有作用了,应该是top和left优先级高,否则同时写了浏览器怎么知道按照谁定位
- 对于absolute和fixed定位的元素,如果设置了top、left、bottom、right的值后margin属性也就不起作用了
- 对于absolute和fixed定位的元素,如果设置了top、left、bottom、right的值后float属性同样会失效
- 块元素如果设置了float属性或者是absolute、fixed定位,那么vertical-align属性不再起作用
利用继承
CSS的继承机制也可以帮我们再一定程度上缩减字节数,我们知道CSS有很多属性是可以继承的即在父容器设置了默写属性,子容器会默认也使用这些属性,因此如果我们希望全文字体尺寸是14px,大可不必为每个容器设置,只需要在body上设置就可以了。应用这个技巧,把CSS属性在可能的情况下提到父容器是可以帮我们节省CSS字节的,顺便说一下哪些属性可以继承
- 所有元素可继承:visibility和cursor
- 内联元素和块元素可继承:letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction
- 块状元素可继承:text-indent和text-align
- 列表元素可继承:list-style、list-style-type、list-style-position、list-style-image
- 表格元素可继承:border-collapse
- 不可继承的:display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi
块级元素与行内元素
首先谈谈人们经常提及的块级元素和行内(内联)元素
p, ul, form, div等元素被称为块级元素,这些元素显示为一块儿内容(会自动换行),span, input 等元素称为行内元素,这两者主要区别就是块级元素会从上到下一个个垂直排列,每个自占一行,而行内元素在一行中水平排列,行内元素的高度由其内容撑开,不可显示的设置其高度,这就是为什么我们一次次的在span上设置height属性不好使的原因。
简单了解了这些知识,让我们看看display常用的几个属性,
值 | 描述 |
none |
此元素不会被显示。 |
block |
此元素将显示为块级元素,此元素前后会带有换行符。 |
inline |
此元素会被显示为内联元素,元素前后没有换行符。 |
inline-block |
行内块元素。(CSS2.1 新增的值) |
我们在显示隐藏元素的时候经常会用到把display设为none或者’’,设为none效果很明显,就是让元素脱离文档流,不显示,不占文档空间,而设为’’其实就是设置为元素默认属性block或inline,inline-block属性是CSS2.1新加值,IE8以上及其他主流浏览器都已经支持,它可以使元素像行内元素那样水平一次排列,但是框的内容符合块级元素行为,能够显示设置宽,高,内外边距。很有意思。
还有一点儿很有意思,可以通过不同的赋值改变元素生成框的类型,也就是说,通过将display属性设置为block,可以使行内元素表现的想块级元素一样,反之亦然。
定位
要想了解CSS元素定位就需要了解position属性了,position属性有几个常用值如下
值 | 属性 |
inhert |
规定应该从父元素继承 position 属性的值。 |
static |
默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。 |
relative |
生成相对定位的元素,相对于元素本身正常位置进行定位。因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
absolute |
生成绝对定位的元素,相对于 static 定位以外的第一个祖先元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
fixed |
生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
CSS有三种基本的定位机制:普通流,浮动和绝对定位
普通流是默认定位方式,在普通流中元素框的位置由元素在html中的位置决定,元素position属性为static或继承来的static时就会按照普通流定位,这也是我们最常见的方式。
相对定位比较简单,对应position属性的relative值,如果对一个元素进行相对定位,它将出现在他所在的位置上,然后可以通过设置垂直或水平位置,让这个元素相对于它自己移动,在使用相对定位时,无论元素是否移动,元素在文档流中占据原来空间,只是表现会改变。
普通流:
<div style="border: solid 1px #0e0; width:200px;"> <div style="height: 100px; width: 100px; "> </div> <div style="height: 100px; width: 100px; "> </div> <div style="height: 100px; width: 100px; "> </div> </div>
相对定位:
<div style="border: solid 1px #0e0; width:200px;"> <div style="height: 100px; width: 100px; "> </div> <div style="height: 100px; width: 100px; position:relative; top:20px; left:20px;"> </div> <div style="height: 100px; width: 100px; "> </div> </div>
上面例子可以看出,对绿色div进行相对定位,分别右移,下移20px后第二个红色div位置并没有相应变化,而是在原位置,绿色div遮挡住了部分红色div。
相对定位可以看作特殊的普通流定位,元素位置是相对于他在普通流中位置发生变化,而绝对定位使元素的位置与文档流无关,也不占据文档流空间,普通流中的元素布局就像绝对定位元素不存在一样。
绝对定位的元素的位置是相对于距离他最近的非static祖先元素位置决定的。如果元素没有已定位的祖先元素,那么他的位置就相对于初始包含块儿(body或html神马的)元素。
因为绝对定位与文档流无关,所以绝对定位的元素可以覆盖页面上的其他元素,可以通过z-index属性控制叠放顺序,z-index越高,元素位置越靠上。
还是刚才的例子,稍微改动一下,让绿色div绝对定位,为了清晰显示,第二个红色div改为黄色。
<div style="border: solid 1px #0e0; width:200px; position:relative;"> <div style="height: 100px; width: 100px; "> </div> <div style="height: 100px; width: 100px; position:absolute; top:20px; left:20px;"> </div> <div style="height: 100px; width: 100px; "> </div> </div>
这时可以看出,绿色div是相对于父元素,也就是绿框div进行的移位,而红色和黄色div进行布局时就像绿色div不存在一样。
最后要说的就是fixed属性了,应用fixed也叫固定定位,固定定位是绝对定位的中,固定定位的元素也不包含在普通文档流中,差异是苦丁元素的包含块儿是视口(viewport),经常见一些页面的如人人网看在线好友那个模块总在窗口右下角,估计用的是类似技术
固定定位:
<div style="border: solid 1px #0e0; width:200px;"> <div style="height: 100px; width: 100px; "> </div> <div style="height: 100px; width: 100px; position:fixed; bottom:20px; left:20px;"> </div> <div style="height: 100px; width: 100px; "> </div> </div>
可见hongse和黄色div布局没有受到绿色div影响,而无论是页面纵向滚动条在页面顶端还是底端,绿色div总是在视口左下角
合写CSS
除了压缩的方式,我们还可以通过少写CSS属性来达到减少CSS字节的目的,拿个最常见的例子
.test{ background-color: #000; background-image: url(image.jpg); background-position: left top; background-repeat: no-repeat; }
我们可以改写一下上面的CSS,达到同样的效果
.test{ background: #000 url(image.jpg) top left no-repeat; }
在CSS中还有很多类似的属性可以合写
font
{font-style: oblique; font-weight: bold; font-size: 16px; font-family: Helvetica, Arial, Sans-Serif;} {font: oblique bold 16px Helvetica, Arial, Sans-Serif;}
margin/padding
{margin-top: 5px; margin-right: 10px; margin-bottom: 20px; margin-left: 15px;} {margin: 5px 10px 20px 15px;}
{padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px;} {padding: 5px 10px} {padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px;} {padding:5px;}
background
{background-color: #000; background-image: url(image.jpg); background-position: left top; background-repeat: no-repeat;} {background: #000 url(image.jpg) top left no-repeat;}
border
{border-width: 2px; border-style: solid; border-color: #000;} {border: 2px solid #000;}
{border-top: 2px; border-right: 5px; border-left: 10px; border-bottom: 3px;} {border: 2px 5px 10px 3px;}
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。