圆滚滚1991
圆滚滚1991

css基础

CSS

  • 子选择器 (>)
    .first>span{border:1px solid red;}

  • 通用选择器 *
    * {color:red;}

  • 伪类选择符
    它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：a:hover{color:red}

  • CSS的某些样式是具有继承性的，
    p{color:red;}

    三年级时，我还是一个胆小如鼠的小女孩。


    可见右侧结果窗口中p中的文本与span中的文本都设置为了红色。但注意有一些css样式是不具有继承性的。如border:1px solid red;

  • 特殊性
    标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码：

p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值100+10+1=111*/

注意：还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。

  • 层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。

  • 最高权值 !important

  • p a{font-style:italic;} 文字斜体

  • p a{text-decoration:underline;} 下划线

  • .oldPrice{text-decoration:line-through;} 删除线

  • p{text-indent:2em;} 段落排版缩进

  • p{line-height:2em;} 段落排版--行间距（行高）

  • h1{ letter-spacing:50px; } 文字间隔或者字母间隔
    h1{ word-spacing:50px; }单词之间间隔

  • 块级元素 文本图片样式text-align:center/left/right;

  • 常用的块状元素有：

、
、
...
、
    、