CSS入门

关于WEB标准
WEB标准不是某一个标准，而是一系列标准的集合。
网页主要由四部分组成：内容（Content）、结构（Structure）、表现（Presentation）和行为（Behavior）。
1） 内容：就是制作者放在页面内真正想要让访问者浏览的东西，如：图片、文本、多媒体等（内容为王）
2） 结构：使内容更加更加具有逻辑性与易用性，更清晰易懂 HTML
3） 表现：用于修饰内容的外观的样式，称为表现，使网页更加美观 CSS
4） 行为：网页中的交互及操作效果，主要通过脚本语言完成事件+动作 javaScript

css简称行为层叠样式表

CSS的主要作用
1.遵循W3C标准，符合WEB2.0标准。
2.减少重复格式化，减少网页体积，加快下载和访问速度。
3.符合内容与表现形式分离的原则，方便于搜索引擎抓取到有用的内容。
4.便于更新和维护，成千上万的网页只需要修改CSS便可以更改显示外观。
5.浏览器干扰相对较小，实现一些HTML格式化不能实现的高级功能。

CSS的语法结构
CSS的定义是由三个部分构成：选择器（selector），属性（properties）和属性的取值（value）
选择器名称
{
属性名称1：属性的值1；
属性名称1：属性的值1；
……
}
CSS的三种引用方式
使用CSS有三种方式： 内联式CSS、 内部式CSS 、外链式CSS、import导入样式
通过@import导入样式，放入css（不要忘记分号）。在html或者css文件中都可以导入@import

@import 'style2.css';
@import "style2.css";
@import url("style2.css");
@import url('style2.css');
@import url(style2.css);

id 选择器和 class 选择器的使用场景分别是什么？
（1）id选择器，用于匹配特定id的元素，具有独一无二不可代替性
（2）class选择器，用于匹配class包含（不是等于）特定类的元素，描述一组元素的样式，你可以多次使用class赋值，来命名元素名
CSS选择器常见的有几种？
答：基础选择器、组合选择器、属性选择器、伪类选择器、伪元素选择器
伪类选择器有哪些？伪元素有哪些？
（1）伪类选择器：E: first-child 匹配元素E的第一个子元素
E：link 匹配所有未被点击的链接
E: visited 匹配所有已被点击的链接
E：active 匹配鼠标已经其上按下，还没被释放的E元素
E：hover 匹配鼠标悬停器上的E元素
E：focus 匹配获得当前焦点的E元素
E：lang(c) 匹配lang属性等于c的E元素
E：enabled 匹配表单中可用的元素
E：disabled 匹配表单中禁用的元素
E： checked 匹配表单中被选中的radio或checkbox元素
E： selection 匹配用户当前选中的元素
E：root 匹配文档的根元素，对于html文档，实际上就是html元素
E：nth-child（n） 匹配其父元素的第n个子元素，第一个编号为1E:nth-of-type(n) 与：nth-child（）作用类似，但仅匹配使用同种标签的元素
（2）伪元素：E::first-line 匹配E元素内容的第一行E::first-letter 匹配E元素内容的第一个字母E::before 在E元素之前插入生成的内容E::after 在E元素之后插入生成的内容

7、以下选择器分别是什么意思?

#header{}
答：id选择器，匹配id为header的元素
.header{}
答：类选择器，匹配class为header元素
.header  .logo{}
答：后代选择器，匹配class为header的元素
logo.header.mobile{}
答：即又关系的并列元素，同时匹配这两个类选择器特性的一个元素
.header p, .header h3{}
答：多元选择器，同时匹配.header p 和 .header h3两个元素
#header a:hover{}
答：在id为header元素下匹配a元素鼠标悬停属性
#header .logo~p{}
答：在id为header元素下匹配logo元素之后的同级所有元素p （无论直接相邻与否）
#header .logo+p{}
答：在id为header元素下匹配logo元素之后的相邻同级元素
p#header .logo p{}
答：在id为header元素下匹配class为logo元素的后代元素
p#header .logo>p{}
答：在id为header元素下匹配class为logo元素的所有直接子元素，即第一子元素p
#header p.logo{}
答：在id为header元素下同时匹配p元素和class为logo元素这类既又关系（并列）的元素的特性
#header .logo.p{}
答：在id为header元素下同时匹配class为logo和p的元素
#header input[checked]{}
答：在id为header元素下匹配checked值的input的元素

从输入url到页面展现浏览器输入url——浏览器向服务器发请求——服务器将相关数据处理返至浏览器——浏览器拿到数据并加载页面——解析html的字符串、词法分析解析成树状结构=>create Dom tree解析html时，加载css，文件被下载——解析css文件对其分析——attach style to Dom nodes => create Dom tree两树状结构对应起来——新的dom树（节点相关的元素、参数）——渲染、绘制页面
2、CSS优先级
（1）从高到低分别是： A、！important 即会覆盖页面内任何位置定义的元素样式 B、作为style属性写在元素标签上的内联样式 C、id选择器 D、类选择器 E、伪类选择器 F、属性选择器，，E[attr=value]，如input[type=password] G、标签选择器 H、通配符选择器 I、 浏览器自定义
（2）复杂场景(按顺序） a、行内样式

b、ID选择器 c、类选择器 d、属性选择器 e、伪类选择器 f、标签选择器 g、伪元素

注：选择器的优先级是如何计算的？
A、按顺序来计算的：假设：a等级：行内样式

b等级：ID选择器 c等级：类、属性选择器、伪类选择器 d等级：标签选择器、伪元素即a-d等级权值依次为5、4、3、2，按照a-d等级的属性顺序依次得分，若取到相应等级的权值，最高的则为最优先级别。
B、参考：当不同类别的多个选择器混合使用个怎么计算优先级？有一个简单的算法，设a. 内联样式表的权值为1000 b. ID选择器的权值为100 c. class类选择器的权值为10 d. HTML标签选择器的权值为1（3）样式覆盖 后面的样式会覆盖到前面的样式 （4）选择器使用经验 遵守css书写规范 使用合适的命名空间 合理地复用class

盒模型
IE盒模型
IE 盒模型的width=content尺寸+padding+border

盒模型1.jpg

2、W3C标准下的盒模型
W3C标准下的盒模型padding、border所占的空间不在width、height范围内，content宽度即是width

盒子模型2.jpg

（CSS3）box-sizing是什么？
设置CSS盒模型为标准模型或IE模型。标准模型的宽度只包括content，二IE模型包括border和padding box-sizing属性可以为三个值之一：content-box，默认值，只计算内容的宽度，border和padding不计算入width之内padding-box，padding计算入宽度内border-box，border和padding计算入宽度之内

。