您的位置：首页 > Web前端 > CSS

CSS 相关知识总结

2016-05-01 17:27 621 查看
1什么是CSS?
CSS全称(CascadingStyleSheets)是一门指定文档该如何呈现给用户的语言。

2为何使用CSS?

CSS文档信息的内容和如何展现它的细节想分离，文档细节即为样式（style）。你可以将样式与内容进行分离出来，以便我们能够

　　避免重复

　　更容易维护

　　为不同的目的，使用不同的样式而内容相同

3CSS如何工作的?

浏览器在展示一个文档内容的时候，必须要把文档和样式信息结合起来展示。这个处理过程一般分为两个阶段：

1浏览器先将标记语言和CSS转换成DOM（文档对象模型）结构。这时DOM就代表了电脑内存中的相应文档，因为它已经融合文档结构和样式表

2最后浏览器把DOM的内容展示出来。

4层叠和继承？

一个元素的样式，可以通过多种方式来定义，而多种定义方式之间通过复杂的影响关系决定了元素的最终样式。这种复杂既造就了CSS的强大，也导致CSS显得如此“混乱”而且难以调试

对于层叠来说，共哟三种主要的样式来源

　　浏览器对HTML定义的默认样式

　　用户定义的样式

　　开发者定义的样式，可以有三种形式

　　　　定义在外部的样式（外链样式）：可以达到共用

　　　　定义在页面头部的样式（内联样式）：通过这种形式定义的样式，只能当前页面使用

　　　　定义在特定元素身上的（行内样式）：这种形式多用于测试，可维护性差

5选择器（Selectors）

　　标签选择器

　　关系选择器

常见的基于关系的选择器

选择器选择的元素
AE
任何是元素A的后代元素E(后代节点指A的子节点，子节点的子节点，以此类推)
A>E
任何元素A的子元素
E:first-child
任何元素的第一个子元素E
B+E
任何元素B的下一个兄弟元素E
B~E
B元素后面的拥有共同父元素的兄弟元素E

　　类选择器

　　ID选择器

　　伪类选择器

:link:visited:active:hover:focus:first-child:nth-child:nth-last-childnth-of-type:first-of-type:last-of-type:empty:target:checked:enabled:disabled

提示：请使用

　　　　:link选择器对指向未被访问页面的链接设置样式,

　　　　:visited选择器用于选取已被访问的链接。

　　　　:hover选择器用于设置鼠标指针浮动到链接上时的样式

　　　　:active选择器用于设置点击链接时的样式

其四种分别表示：链接访问过的链接悬浮在连接上访问时（点击链接时）

:focus表示元素获取焦点的

兼容性：

ChromeFirefoxInternetOperSafari
1.01.08.07.01.0
修饰表单元素状态：

　　:checked，:enabled，:disabled

:checked　被选中时

:enabled　可用状态

:disabled无效状态

enabled
表示任何启用的（enabled）元素。如果一个元素能够被激活（如选择、点击或接受文本输入）或获取焦点，则该元素是启用的。元素还有一个禁用的状态（disabledstate），在被禁用时，元素不能被激活或获取焦点。

:target

　　目标元素一般配合a链接使用，利用其锚点功能，表示当前锚点指向的目标对象

:empty

　　表示没有内容的元素，例如<hr/><br/>

:first-child

　　第一个子元素

:nth-child()

　　从开始位置选择指定位置的子元素

　　

　　:nth-child(2){
　　color:red;
　　}

<div>
<p>111111</p>
<p>111111</p>//变红
<p>111111</p>
<p>111111</p>
</div>


:nth-last-child()

　　从结束为止开始选择制定子元素

　　

　　:nth-last-child(2){
color:red;
}

<div>
<p>111111</p>
<p>111111</p>
<p>111111</p>//变红
<p>111111</p>
</div>


:nth-of-type()

　　根据类型当没有指定具体类型时，则全文查找相同类型的指定位置的元素给其添加样式
　　

<style>
:nth-of-type(4){
color:red;
}
</style>

<ahref="#d">aaaa</a>
<ahref="#d">aaaa</a>
<ahref="#d">aaaa</a>
<ahref="#d">aaaa</a>//变红
<div>
<div>
111111111111
</div>
<div>
111111111111
</div>
<div>
111111111111
</div>
<div>
111111111111
</div>//变红
</div>


　　也可以指定类型

div:nth-of-type(4){
color:red;
}

<ahref="#d">aaaa</a>
<ahref="#d">aaaa</a>
<ahref="#d">aaaa</a>
<ahref="#d">aaaa</a>
<div>

<div>
111111111111
</div>
<div>
111111111111
</div>
<div>
111111111111
</div>
<div>
111111111111//变红
</div>
</div>


　　也可以指定范围（也就是父元素），例如下

　　.parentdiv:nth-of-type(4){
color:red;
}

<div>
111111111111
</div>
<div>
111111111111
</div>
<div>
111111111111
</div>
</div>
<div>
111111111111
</div>
<divclass="parent">
<div>
111111111111
</div>
<div>
111111111111
</div>
<div>
111111111111
</div>
<div>
111111111111
</div>
</div>


:first-of-type

　　选择第一个子元素，这与frist-child区别在于可以进行类型

　　

:first-child{
color:red;
}

<p>111111</p>
<p>
<span>111</span>
</p>
<div>
<p>111111</p>
</div>

或

:first-of-type{
color:red;
}

<p>111111</p>
<p>
<span>111</span>
</p>
<div>
<p>111111</p>
</div>


:last-of-type先筛选例如先找出所有的兄弟节点p元素，再选择最后一个p元素

　　

p:last-of-type{
color:red;
}
<p>111111</p>
<p>
<span>111</span>
</p>
<div>
<p>111111</p>//变红
</div>
<p>
<span>111</span>//变红
</p>

　　//再看看这样的也行
　　
　　　p:last-of-type{color:red;

　　}
<p>111111</p>
<p>
<span>111</span>
</p>
　　<p>

<span>111</span>//变红
</p>

<div><p>111111</p>//变红</div>



而last-child不进行筛选，只有满足是父元素中并且是最后一个

p:last-child{
color:red;
}
<p>111111</p>
<p>
<span>111</span>
</p>
<div>
<p>111111</p>//变红
</div>
<p>
<span>111</span>//变红
</p>
或者

p:last-child{
color:red;
}
<p>111111</p>
<p>
<span>111</span>
</p>
<p>
<span>111</span>//不变红
</p>
<div>
<p>111111</p>//变红
</div>


　　
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航