关于CSS的一些总结_html/css_WEB-ITnose



　　通过对CSS基础一天的学习以及练习，觉得自己以前还是蛮无知的，一直以为CSS样式是别人写好的，自己只需要像导包一样拿过来用就可以。直到自己认真学了之后才直到是什么样的。自己如果不去敲代码感觉永远都学不到新知识，即使有时候书本上告诉了我一段代码结果是什么样的，但是从书本上得知结果的心情跟自己敲出来的完全不一样，简单点说就是不去实践永远都不知道真理是什么样的，以前也经常觉得有些知识太难，自己反正是学不会的，就不去尝试了。现在做过一些尝试之后才知道原来自己以为的多难多难并不是那么难，只要自己钻进去了，什么问题最后都会迎刃而解了，加油吧。就分享下今天学的关于CSS部分知识。

　　

CSS: 层叠样式表 (Cascading Style Sheets)，用于定义如何显示HTML 元素，实现了将内容与表现分离，从而可以极大提高工作效率。
1.CSS样式表特征:
　　①.继承性:许多CSS的样式规则不但影响选择器所定义的元素，而且会被这些元素的后代继承
　　②.层叠性:当一个Web页面使用多个样式表，多个样式表中的样式可层叠为一个(若无冲突则显示所有样式)
2 CSS选择器
①.元素选择器
　　　　eg: html {color:black;}
　　　　　　h1 {color:blue;}
　　　　　　h2 {color:silver;}
②.类选择器:类选择器用于将样式规则与附带class属性的元素匹配，其中该class属性的值为类选择器中指定的值
　　　　　　.className{}
③.元素选择器和类选择器结合,实现对某种元素中不同样式的细分控制
　　　　　　元素选择器.className{ }
④.id选择器:仅作用于id属性的值,id值唯一,故仅应用于一个元素的内容。
　　　　　　eg; #intro {font-weight:bold;}
　　　　　　　　

This is a paragraph of introduction.

⑤.选择器分组:选择器可声明为以逗号隔开的元素列表，以便于将一些相同的规则作用于多个元素
　　　　　　eg: h2, h1,p,.className {color:gray;}
⑥.派生选择器
　　　　　　eg:h1 span {color:red;} 只对h1的中间部分其作用
　　　　　　

This is a important heading

　　　　　　

This is a important paragraph.

⑦.伪类选择器
　　　　Ⅰ.定义:用于向某些选择器添加特殊的效果.(如:在浏览器中查看链接时，链接的不同状态都可以不同的方式
　　　　　　显示，比如,没有访问过的链接会显示为蓝色，而访问过的链接会显示为紫色)
　　　　　　　　selector:pseudo-class{property: value} /* 左边selector为元素选择器,右边是伪类 */
　　　　Ⅱ常用于链接元素的伪类有:
　　　　　　(1) :link：用于向未访问的链接添加特殊的样式。即链接所指的 URI 尚未出现在用户浏览器的访问历史中。
　　　　　　(2) :visited：用于向已访问的链接添加特殊的样式。这种状态与 :link状态是互斥的。
　　　　　　(3) :hover：用于在鼠标移到元素上时向此元素添加特殊的样式。这个伪类应用处于“悬停状态”的元素。
　　　　　　(4) :active：用于为处于激活状态（在鼠标点击与释放之间发生的事件）的元素添加特殊的样式。
　　　　　　(5) :focus 伪类:应用于有焦点的元素。例如文档中一个有文本输入焦点的输入框，其中出现了文本输入光标；

　　　　　　也就是说，在用户开始键入时，文本会输入到这个输入框。