css笔记

css的作⽤ 指层叠样式表 (Cascading Style Sheets)

样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。

基本的css功能

设置宽度

.divcss5{width:300px} 

我宽度设置为300px 

文字

font-style：italic；斜体

        font-weight：bold；加粗

        font-size：30px；大小

        line-height：30px；行高

        font-family：“SimHei”；字体

#test1{

color:red;

font-style:italic;

font-weight:bold;

font-size:30px;

line-height:30px;

font-family:"SimHei";

}

人生

css选择器

#main

选择id="main"的标签，且必须是div标签

对我生效

对我无效

#+id名，这是日常常用的css选择器，用于匹配id为XXX的元素，id选择器的优势是精准，高优先级（优先级基数为100，远高于class的10），作为javascript脚本钩子的不二选择，同样缺点也很明显：优先级过高，重用性差，所以在使用id选择器前，我们最好问下自己，真的到了非用id选择器的地步？

#container { width: 960px; margin: auto;}

.error

.X（类）

.+class名，标准的样式选择器，与id选择器的区别是样式选择器可以选择多个元素。样式选择器是提倡使用的选择器，也是日常前端人员用到最多的选择器了。

.error {color: red;}

css选择器#main > .images与#main .images与#main,

.images的区别

#main > .images

带有 “ > ”符号，表明这是一个子元素选择器，则表明选择了main的子类images，即只会选择儿子，而不会选择孙子之类的。

#main .images

该选择器是后代选择器，则说明只要是main的后代images则都可以选择，即不光是儿子可以选择，孙子也可以选择。

#main, .images

这就是选择器分组，“ ，”号表明是和的关系，即会选择所有id为main，class为images的元素。

css的伪元素

向某些选择器设置特殊效果。

selector:pseudo-element {property:value;}

selector.class:pseudo-element {property:value;}

为什么不再推荐使用table来布局

table必须在页面完全加载后才显示，没有加载完毕前，table为一片空白，也就是说，需要页面完毕才显示，而div是逐行显示，不需要页面完全加载完毕，就可以一边加载一边显示。