css知识点（二）
目录
一、css的引入方式（css的书写位置）
1.1 内嵌式css
1.2 外链式css
1.3 行内css（禁止使用）
1.4 测试点：
二、后代选择器
三、并列选择器（并集选择器）
四、引入方式（书写位置）的权重对比
4.1 外链 & 内嵌
4.2 外链 内嵌 行内
4.3 怎么自定义权重最大
五、高级权重对比
例子1：标签选择器 （后代选择器）
例子2：类选择器（后代选择器）
例子3：id选择器（后代选择器）
例子4： 父辈的后代选择器
总结：
六、了解边框属性
6.1 边框
6.2 边框类型
七、认识css盒子模型
一、css的引入方式（css的书写位置）
1.1 内嵌式css
内嵌式css：代码写在style标签中，放在head标签的里面，title标签的下面：
1.2 外链式css
外链式css： css代码单独写在css文件中，通过link标签，里面的href设置的路径来选中；此种写法实现了css代码和html代码的分离，
好处：修改代码更容易查找；
html与css独立出来。
out.css:css的代码
css:
div{color: red;}html代码： 链入外部的css
html：
如图可以看出字体颜色变红。
1.3 行内css（禁止使用）
行内css：css代码写在html标签的身上，此种语法强烈不推荐使用，因为修改不方便，还会造成代码量的增多，从而降低页面的打开速度，影响用户体验
如图可以看出字体颜色变蓝。
禁止原因：
- 书写繁琐，代码量增多，造成用户打开网速变慢。
- 修改不方便，
如：
如果用户要修改div的颜色样式，就会造成繁琐操作
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
1.4 测试点：
电商网站的首页，必须使用内嵌式（外链式打开速度比内嵌慢）
其他界面要求使用外链式（实现代码分离，修改方便）
内嵌式 vs 外链式
- 若内嵌式中的css代码量变多，对应html标签查找不方便，外链式改起来比较方便
- 内嵌式应用场景：电商网站的首页，必须要用内嵌式，不能将css与html文件分开。需要网页打开速度快。电商网站关注点不是代码好不好改，而是加载速度。除了电商网站以外，外链式。
二、后代选择器
语法：
div span{}解释：在css选择器中如果出现空格，代表寻找后代（儿子、孙子、重孙子。。。）
例子1：
span22222
css样子设置的是：div +span，此处的span包括div所有后代，所以2个span字体均为红色
例子2：
span22222
此处的css样式指的是p的后代，而span1代表的是div的后代，span2是第二个后代，所以第一个span是默认值，第二个span字体颜色为红色。
三、并列选择器（并集选择器）
语法：
div, span, h1, #span2{}解释：使用英文状态下的逗号来连接想要一起设置的元素。
例子1：
标题1
标题2
divspann
例子2：
标题1
标题2
divdivspann11111spann22222
四、引入方式（书写位置）的权重对比
4.1 外链 & 内嵌
外链 -- 字体颜色：红色
内嵌 -- 字体颜色：蓝色
得到颜色：红色（外链颜色）
为了防止是代码自上而下的影响，将内嵌与外链的位置对调
得到颜色：蓝色（内嵌颜色）
得出结论：外链与内嵌权重一样大
4.2 外链 内嵌 行内
在外链、内嵌的基础上添加行内
外链 -- 字体颜色：红色
内嵌 -- 字体颜色：蓝色
行内 -- 字体颜色：绿色
得到颜色：绿色（行内颜色）
为了防止是代码自上而下的影响，将内嵌与外链的位置对调到行内后面
得到颜色：绿色（行内颜色）
得出结论：行内的权重大于外链与内嵌
（内嵌 = 外链）< 行内
4.3 怎么自定义权重最大
程序员可以添加 !important来设置提高权重
语法：
css样式的分号前加 !important;
div{color: blue!important;}程序员，可能存在这样子的代码：
div哈哈div哈哈 div哈哈 修改就会比较繁琐，就需要 !important
五、高级权重对比
例子1：标签选择器 （后代选择器）
哈哈哈
解释：
例子2：类选择器（后代选择器）
哈哈哈
例子3：id选择器（后代选择器）
哈哈哈
例子4： 父辈的后代选择器
哈哈哈
解释：
只有存在同一标签，才存在相加之后，谁大听谁的，继承性最低的
总结：
id选择器 100 斤 类选择器 10斤 id选择器 1 斤
只要是给同一个标签设置样式，就会根据最后数值的相加结果来定义优先级，数值越大，优先级越高。
六、了解边框属性
6.1 边框
边框：就是给页面中的元素添加的外围边框线属性;
程序员称其为“边框”，ui设计师称为“描边”
6.2 边框类型
- 全实线
- 全虚线
- 点状线
- 双线
- 自定义边框的线类型
注意：只有实现和虚线没有兼容性问题，嵌套都不能出现
例子1：
例子2：
例子3：
例子4：
注意：
- 四条线的边框可以独立设置的，
- 实线和虚线在浏览器的兼容性是没有问题的，即在谷歌，IE等主流浏览器显示效果一样除了实线和虚线以外的线兼容性都很差，如点状线支持的兼容性很差，比如ie，低版本ie，以前浏览器都不支持点状线的
七、认识css盒子模型
盒子模型：边框 + 内容 + 内边距（内填充、padding） + 外边距 （外填充、 margin·）组合起来叫盒子模型。
必须掌握下图中的内边距（内容和边框之间的距离）、外边距（盒子与其他盒子之间的距离）在哪里：
盒子模型重要组成部分
例子：
若登录字体位置不对：内边距位置不可
登录、注册、开店的距离不相等，外边距距离不等
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！