JavaWeb基础—CSS学习小结

Posted 2020-09-09 ---江北

重点记忆：四种结合方式 三种基本选择器
　　1.CSS:层叠样式表
　　相当于皮肤
　　提高了可维护性、样式与内容分离（注释格式/* */）

　　2.CSS与html结合的四种方式：内联式、嵌入式、外部式
　　 1.每个标签上都有一个style【属性】来控制 sytle="key:value;key:value" <div style="">
　　2.使用style标签：<style type="text/css">div{key:value}</style>写在头部
　　3.在style标签里面使用语句，与2类似对比 【兼容性差】
　　@import url{css文件路径};
　　4.使用link头标签引入外部文件<link rel="stylesheet" type="text/css" href="" />分离了【推荐】
　　

　　CSS的优先级：由上到下、由外到内优先级增高（就近原则）

　　3. CSS的选择器：要对哪个标签里的样式进行操作
　　三种基本选择器
　　　　1.标签选择器：使用标签名称作为选择器名称（上2处）
　　　　2.类选择器【最常用】：每个HTML标签都有一个class属性，使用这个值作为选择器。
　　　　使用方法：div.haha{} .haha{}(所有class值为haha的）
　　　　3.id选择器【给js留的】：每个HTML标签都有一个id属性，使用这个值作为选择器。
　　　　使用方法：div#haha{} #haha{}（所有id值为haha的）
　　　　基本选择器的优先级：（内联的就近的style最高）>id>class>标签

　　不同点：

　　　　1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，
　　　　ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
　　　　2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式
　　　　但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。
　　　　<span class="stress bigsize">可以给两个同时设置。

　　三种扩展选择器
　　1.关联选择器：可以设置嵌套标签里的样式
　　如：<div><p></p></div> 设置p标签的样式 div p{}
　　.food>li .first span
　　总结：>作用于元素的第一代后代，空格作用于元素的所有后代。
　　2.组合选择器：把不同的标签设置成相同的样式
　　如：<div></div> <p></p> 设置相同的样式 div,p{}
　　3.伪元素选择器：提供了一些定义好的样式【作了解】
　　更有趣的是伪类选择符，为什么叫做伪类选择符，它允许给html不存在的标签设置样式
　　比如超链接（lv ha)：
　　状态：原始状态 悬停状态 点击状态 点击之后
　　:link :hover ：active :visited
　　a:hover{color:red;}
　　样式操作 在头部style中 a:link{} a:hover{}

　　4.CSS盒子模型 （现在主流为div+css组成）
　　在讲解CSS布局之前，我们需要提前知道一些知识，
　　在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素和内联块状元素。
　　重要概念 边框：border （设置上下左右 border-top border-bottom border-left border-right）
　　属性：width（即粗细） style（样式） color
　　内边距：padding（div中文本内容距离边框的值）（四个方向同上）
　　属性：length
　　外边距：margin（div距外部的距离）其它亦同上
　　还记得在讲盒模型时外边距(margin)、内边距(padding)和边框(border)
　　设置上下左右四个方向的边距是按照顺时针方向设置的（不单独设置的时候的默认顺序）
　　5.CSS的布局的漂浮【作了解，用的少】
　　float
　　两个属性值：left 文本流流向对象【右边】（自己居左，后边div居右） right 流向【左边】
　　6.CSS的布局的定位
　　position
　　两个属性值：absolute :将对象从文档流中拖出（在上面飘着，后面补上），再使用上下左右定位
　　relative ：对象不可重叠（不会拖出），依旧使用上下左右定位
　　7.案例：图文混排 图片签名