css学习笔记

css总结：

link标记是rel=”stylesheet”   href=””

<link rel=”stylesheet” type=”text/css”href=”.css” media=”all” title=“ Default”/>

<style type=”text/css”></style>

注释：/**/

替换元素与非替换元素

替换元素由其他位置的内容，经过引用替换到当前文件下如：img

块级元素和行内元素

块级元素居中用padding和margin

行内元素用line-height=height，行内元素没有margin-top和margin-bottom

@import：引入外部文件，但是要放在所有css规则之前，否则不起作用。

与link 不同，link中的样式可以根据title选择，而import的都会使用。

选择器：

选择器分组：h2, p {}

通配符选择器：*{}

类选择器：.classname{} 同时包含两个类的元素才被选中 .class1 .class2{}

Id选择器：#idname

属性选择器：h1[class]{}选择有class属性的所有h1， h1[class][href]{}同时具有两个属性，h1[class=“a”]{}具体属性值选择；

        部分属性值选择：p[class~="classname"]{} 只要属性中出现类名，并且是以空格分割的，那么就选中。class^="classname"开头出现类名，class$="classname"结尾出现类名，class*="classname"包含类名的所有元素。

后代选择器：h1 strong{}  h1.siderbar a:link{}

子选择器：h1>strong{} 

区别：后代选择器可以选择所有后代，而子选择器仅能选择第一代子元素。

兄弟选择器：li+li{} 一个结合符仅能选择兄弟元素的第二个元素，所有第一个li不会被选中

    1.list

    2.list 

    3.list

伪类和伪元素：a:link a:visited a:hover a:active a:focus （l-v-f-h-a）

第一个子元素:first-child

p:first-child{ font-weight:bold;}  li:first-child{text-transform:uppercase;}

<div>

<p>These are the necessary steps:</p>

<ul>

<li>Insert key</li>

<li>Turn key<strong>clockwise</strong></li>

<li>Push accelerator</li>

</ul>

<p>Do<em>not</em>push the brake at the same time as the accelerator.</p></div>

效果：

将作为某元素第一个子元素的所有<p>元素设为粗体

将作为某元素第一个子元素的所有<li>元素变成大写

结合使用伪类：鼠标停留在未访问链接上时，链接变红；停留在已访问链接上时，链接变紫

a:link:hover:lang(de){color:gray;}

a:visited:hover:lang(de){color:siver;}

:first-letter   padding border text-decoration vertical-align(float=none) text-transform line-height float letter-spacing word-spacing text-shadow(css2)

:first-line  letter-spacing text-decoration vertical-align text-transform line-height text-shadow(css2)

:before 

:after

所有伪元素都必须放在选择器的最后面

选择器的特殊性：

Id：0,1,0,0

类属性，属性，伪类：0,0,1,0

元素，伪元素：0,0,0,1

通配符：0,0,0,0

结合符,继承：无

内联样式：1,0,0,0

元素实现哪个属性，按照加和。

0,0,1,0>0,0,1,7

div p{color:black;}  /0,0,0,2/

重要性：

div p{color:black !important;} 

继承：

应用到body元素的背景样式可以传递到html元素中

用了通配符之后就不能继承了

声明权重：1.读者的重要声明，2.创作人员的重要声明，3.创作人员的正常声明，4.读者的正常声明，5.用户代理声明

字体相对长度：1ex=0.5em （ex为不同字体x的高度）

inherit是所有属性共有的

字体：font-style：italic oblique normal inherit

font-variant：small-caps 

vertical-align:middle 应用于图像 还可以使用百分数（line-height的百分数）

文本转换：text-transform uppercase lowercase capitalize none inherit