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;}

选择器的优先级:

  1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
  2. 作为style属性写在元素内的样式
  3. id选择器
  4. 类选择器
  5. 标签选择器
  6. 通配符选择器
  7. 浏览器自定义或继承

同一级别中后写的会覆盖先写的样式

并不是所有的属性对行内元素都能够生效

  1. 行内元素不会应用width属性,其长度是由内容撑开的
  2. 行内元素不会应用height属性,其高度也是由内容撑开的,但是高度可以通过line-height调节
  3. 行内元素的padding属性只用padding-left和padding-right生效,padding-top和padding-bottom会改变元素范围,但不会对其它元素造成影响
  4. 行内元素的margin属性只有margin-left和margin-right有效,margin-top和margin-bottom无效
  5. 行内元素的overflow属性无效,这个不用多说了
  6. 行内元素的vertical-align属性无效(height属性无效)

一些互斥的元素

  1. 对于absolute和fixed定位的(固定大小,设置了width和height属性)元素,如果设置了top和left属性,那么设置bottom和right值就没有作用了,应该是top和left优先级高,否则同时写了浏览器怎么知道按照谁定位
  2. 对于absolute和fixed定位的元素,如果设置了top、left、bottom、right的值后margin属性也就不起作用了
  3. 对于absolute和fixed定位的元素,如果设置了top、left、bottom、right的值后float属性同样会失效
  4. 块元素如果设置了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;}

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。