《JavaEE》第四周day3学习笔记-CSS

一、CSS

（一）概念

---

CSS：Cascading Style Sheets（层叠样式表）
特点：功能强大，可将内容展示和样式控制进行分离，提高开发效率。

（二）CSS调用（四种）

---

方法1：内联方式
在标签内部使用style="属性:属性值"使用
方法2：嵌入方式
在head标签内，使用<style></style>标签使用
方法3：链接方式
<link rel="stylesheet" href="URL">使用
方法4：导入方式
在style标签内，使用@import"URL";语句

（三）CSS选择器

---

1.基础选择器

（1）ID选择器：#ID{}
（2）标签选择器：标签名{}
（3）类选择器：.类名{}
优先级：（1）》（2）》（3）

2.扩展选择器

（1）选择器：{}
（2）交集选择器：选择器1.选择器2{}
（3）并集选择器：选择器1,选择器2{}
（4）属性选择器：标签名[属性名=“属性值”]{}
（5）后代选择器：选择器1 选择器2{}

• 标签:first-child获取第一个子代元素
• 标签:last-child获取最后一个子代元素

（6）一代子元素选择器：选择器1>选择器2{}
（7）伪类选择器：标签:状态（link初始化/visited访问过/active访问中/hover悬浮中）{}

（四）CSS常用属性

---

1.文本类属性

font-size：字体大小
font-family：字体样式类型
font-style：字体类型(normal 默认值；italic 斜体；oblique 倾斜)
font-weight：字体加粗
color：文本颜色
letter-spacing：字母间隔 （letter-spacing 属性增加或减少字符间的空白（字符间距））
text-decoration：划线修饰（underline 下划线）
text-indent：文本缩进
text-align：对其方式
line-height：行高 （line-height 属性设置行间的距离（行高））

2.背景类属性

background：（自由组合属性）
background-color：背景颜色
background-image：背景图片
background-repeat：平铺状态
background-position：属性设置背景图像的起始位置。(第一个值是水平位置，第二个值是垂直位置。如果仅规定了一个关键词，那么第二个值将是"center"。)

3.边框类属性

border：设置边框width宽度 | style样式（solid(实线)，dashed(虚线)， double(双实线)） | color颜色
border-radius：设置边框的圆角半径;

4.尺寸类属性

width：宽度
height：高度

（五）盒子模型（Box Model）

---

通常由<div></div>标签及<span></span>标签构成，主要用于网页布局
包含外边距（margin）、边框（border）和内边距（padding）。

1.相对定位
说明：保留原有空间位置，相对于原有空间进行位移
CSS：position: relative;top:位移量;left:位移量。
2.绝对定位
说明：不保留原有空间位置，相对于存在position属性的父级元素进行位移
CSS：position: absolute;top:位移量;left:位移量。
3.浮动
说明：不保留原有空间位置，类似于新建图层
CSS：float: 浮动方向
注意，可以通过空块设置clear:both样式，清除语句上方的浮动样式，支撑父级元素。

---

【遇到的“坑”】

1：<a><a/>标签默认存在color设定，如果需要变更颜色，必须通过本级标签，如果需要通过父级标签修改颜色，需要设置"color: inherit"属性。
2：first-child及last-child处理的子标签不能出现兄弟标签，否则干扰选择。
3：当出现多级列表时，应注意标签是否应用于最末端标签导致父标签CSS样式失效。

【思考】CSS的优先级？
通常情况下，子标签优先级高于父标签优先级。