CSS
一、概述
CSS（Cascading Style Sheets）层叠样式表，用来装饰HTML或者XML页面。
作用：
- 用来修饰美化页面
- 配合脚本语言动态对页面元素格式化
- 内容和表现分离，页面的外观更容易维护
二、基本语法
由选择器和一条或多条声明构成。
例如：下面的示例中
h1就是选择器，表示所有的1级标题，大括号中的就是两条声明，前面的表示文字颜色为红色，后面的表示字体大小为20px。语法：选择器{样式名1:样式值;样式名2:样式值2}；
<head>
<meta charset="utf-8">
<title></title>
<style>
h1{
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<h1>java是世界上最好的语言</h1>
</body>
三、导入方式
页面上如何应用样式
3.1 内联（行内）
在HTML标签中直接使用样式，使用标签的style属性。
3.2 内部
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
/* 内部样式 */
h1{
color:red;
font-size: 50px;
}
</style>
<body>
<!-- 行内（内联）样式 -->
<h1 style="color: blue;font-size: 20px;">java是世界上最好的语言</h1>
<h1>java是世界上最好的语言</h1>
<h1>java是世界上最好的语言</h1>
</body>
</html>
3.3 外部
在项目中创建一个后缀名为.css的文件，在页面上引用该文件。
3.3.1 使用link标签引入
link标签：
- rel：stylesheet
- type：text/css
- href：样式路径
h1{
color: coral;
font-size: 50px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<!-- 外部样式使用link导入，href选择样式路径 -->
<link rel="stylesheet" type="text/css" href="css/common.css">
<body>
<!-- 行内（内联）样式 -->
<h1 style="color: blue;font-size: 20px;">java是世界上最好的语言</h1>
<h1>java是世界上最好的语言</h1>
<h1>java是世界上最好的语言</h1>
</body>
</html>
3.3.2 使用import引入
使用style标签，在标签中使用@import方式
h1{
color: coral;
font-size: 50px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
/* 使用import导入css样式，import需要放到style里面 */
@import url("css/common.css"););
</style>
<body>
<!-- 行内（内联）样式 -->
<h1 style="color: blue;font-size: 20px;">java是世界上最好的语言</h1>
<h1>java是世界上最好的语言</h1>
<h1>java是世界上最好的语言</h1>
</body>
</html>
注意：@import需要放到style标签中的样式的上方
经典面试题：
link和import的区别：
- link兼容性好，所有浏览器都支持，import低版本的ie不支持
- import是html加载后加载
- import不支持js动态修改
3.4 优先级
当行内、内部、外部同时对某个属性设置了样式，如果不冲突则全部应用。如果冲突，优先级为：近->远。行内>内部>外部。
/* common1.css */
h1{
color: red;
}
/* common.css */
h1{
color: coral;
font-size: 50px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<!-- style 和 css样式冲突时，离内容文本近的生效 -->
<style>
/* 使用import导入css样式，import需要放到style里面 */
@import url("css/common.css"););
</style>
<!-- 此处生效，因为离文本内容近 -->
<link rel="stylesheet" href="css/common1.css">
<body>
<!-- 行内（内联）样式 -->
<h1 style="color: blue;font-size: 20px;">java是世界上最好的语言</h1>
<h1>java是世界上最好的语言</h1>
<h1>java是世界上最好的语言</h1>
</body>
</html>
四、选择器
选择器是用来选择页面的元素
4.1 基本选择器
常用的选择器称为基本选择器，一般有三种：元素（标签）选择器、ID选择器、类选择器。
4.1.1 元素(标签)选择器
通过标签的名称来选择相应的元素。
语法：标签名{样式}
4.1.2 ID选择器
页面上id是标签都具备的唯一标识，可以通过id选择器对某个元素来设置样式。
语法：#id{样式}
4.1.3 类(class)选择器
自定义一个选择器，元素需要使用该选择器时，使用class属性来引用。
语法：.class{样式}
基本选择器的优先级：ID>class>标签
4.2 属性选择器
根据标签中属性的值来选择。
语法：标签名[属性名=属性值]{样式}
4.3 伪类选择器
针对某种选择器添加特殊的效果。（例如悬停，点击后的效果）
语法：标签:伪类{属性：属性值;}
4.4 层级选择器
- 后代选择器，语法：父级 子级{属性：属性值}
- 子代选择器，语法：父级>子级{属性：属性值}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 元素选择器 */
h1{
color: red;
font-size: 20px;
}
/* id选择器 */
#a{
color: blue;
font-size: 50px;
}
/* class类选择器 */
.c{
color: chartreuse;
}
/* 伪类选择器，设置鼠标移上去，图片宽度变成500px */
img:hover{
width: 500px;
}
</style>
</head>
<body>
<h1>我是h1标签的第一行文字</h1>
<h1>我是h1标签的第二行文字</h1>
<h1 class="c">我是h1标签的第三行文字，但是我有class类属性</h1>
<p id="a">我是p标签</p>
<img src="img/1.jpg" width="100px">
</body>
</html>
五、文字属性
font-size：大小
font-family：字体
font-style：正常或者斜体
font-weight：粗细
六、文本属性
color：文本颜色
text-indent：2em，文本缩进，段落首行缩进，空两格。
text-decoration：文本装饰线。删除线，下划线等
text-align：文本对齐方式，在容器内对齐
line-height：行高
text-shadow：文本阴影
小技巧：将行高与容器的高度设置一致，可以让文本在容器内垂直居中。
| 属性 | 取值 | 描述 |
|---|---|---|
| color | 十六进制或表示颜色的英文单词 | 设置文本颜色 |
| text-indent | 2em | 缩进元素中文本的首行 |
| text-decoration | underline；overline | 文本的装饰线 |
| text-align | left、right、center | 文本水平对齐方式 |
| line-height | normal、固定值 | 设置文本的行高 |
| text-shadow | 水平偏移、垂直偏移、模糊值、阴影颜色 | 设置阴影及模糊效果 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
h1{
color: red;
font-size: 20px;
}
#a{
/* 缩进两格 */
text-indent: 2em;
/* 下划线 */
text-decoration: underline;
/* 对齐方式 */
text-align: center;
/* 文字所在行的行高 */
line-height: 100px;
/* 设置文字阴影，还可以设置颜色 rgba(前三个为颜色，最后一个为透明度（0-1）) */
text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
/* 斜体 */
font-style: italic;
/* 字体 */
font-family: "微软雅黑";
/* 加粗 */
font-weight: bold;
}
</style>
</head>
<body>
<h1 id="a">我是h1标签的第一行文字</h1>
<h1>我是h1标签的第二行文字</h1>
</body>
</html>
七、背景属性
background-color：背景颜色
background-image：背景图片，当颜色和图片都有时，一般显示图片
background-repeat：背景重复方式，当背景图片比容器小时，默认会平铺多次。
background-position：背景位置，当背景图片比容器大时，可以设置背景的位置以显示背景图片中不同的位置，有center等常量值，也可以用px为单位
background-size：背景图片缩放
| 属性 | 取值 | 描述 |
|---|---|---|
| background-color | 16进制、用于表示颜色的英语单词 | 设置背景色 |
| background-image | url（‘图片路径’） | 设置背景图片 |
| background-repeat | repeat-y；repeat-x；repeat；no-repeat； | 背景图的平铺方向 |
| background-position | top；bottom；left；right；center | 文本水平对齐方式 |
八、列表属性
list-style-type：默认是disc，可以设置为circle等，如果不需要可以设置为none。
list-style-image：设置为图片，如果在有图片的同时还有disc，会优先显示图片。
list-style-position：默认值为outside，图案不在li中，可以改为inside，图案在li中
| 属性 | 取值 | 描述 |
|---|---|---|
| list-style-type | disc等 | 改变列表的编号类型 |
| list-style-image | url（‘图片路径’） | 用图像表示标识 |
| list-style-position | inside；outside | 标识出现在列表项内容之外还是内部 |
九、尺寸、显示、轮廓
width：宽度
height：高度
display：none不显示，block按块显示，inline按行显示
outline-color：轮廓颜色
outline-width：轮廓宽度
outline-style：轮廓样式，solid实线、dotted点线、dashed虚线
轮廓也可以直接简写为：outside：solid goldenrod 10px 后面的值顺序可以互换
| 属性 | 取值 | 描述 |
|---|---|---|
| width | 数值或百分比 | 设置宽度 |
| height | 数值或百分比 | 设置高度 |
| display | none：不显示 block：块级显示 inline：行级显示 | 设置显示方式 |
| outline-style | solid：实线 dotted：点虚线 dashed：虚线 | 设置轮廓样式 |
| outline-color | 16进制，用于表示颜色的英文 | 设置轮廓的颜色 |
| outline-width | 数值 | 设置轮廓宽度 |
注意：轮廓与边框的区别就是轮廓不会占据宽度，而边框需要占用宽度。
十、浮动属性[不推荐使用]
- float:left、right（表示在容器内浮动在左边还是右边）
- 浮动框可以向左或者向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
- 浮动框不在文档的普通流中，所以文档普通流中的块框表现的就像浮动框不存在一样
- clear：left、right、both、none,表示是否允许左右出现浮动元素。
- 如果不允许出现，并非让浮动消失，而是元素本身让开位置，向下占据空间
十一、定位属性
position：设置容器的定位属性
- static：默认值，普通自上而下的文档流
- absolute：绝对定位
- relative：相对定位
- fixed：相对于浏览器定位
注意：如果把元素设置为absolute，会以body为基准，如果把父类容器设置为relative，那么该元素会以父容器为基准。
| 取值 | 描述 |
|---|---|
| static | 默认值，即没有定位，遵循正常的文档流 |
| relative | 相对定位元素的定位是相对其正常位置 |
| absolute | 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于html |
| fixed | 元素的位置相对于浏览器窗口是固定位置 |
十二、盒子模型
- CSS盒子模型是把标签看作一个盒子，封装内容的HTML元素，他包括：边距、边框、填充、和实际内容。
注意：如果想要设置的宽高包含内外边距以及边框的长度时，可以设置属性
box-sizing:border-box；，设置后盒子宽高固定，如果使用了边距那么只会压缩内容的空间，盒子长度并不会改变。
12.1 边框
- border:盒子的边框
| 属性值 | 取值 | 描述 |
|---|---|---|
| border-style | solid、double、dashed、dotted等 | 设置边框的样式 |
| border-color | 16进制、用于表示颜色的英文 | 设置边框的颜色 |
| border-width | 数值 | 设置边框的宽度 |
简写：
- border：1px solid blue ；/* 设置四个边框为蓝色 1px 实线 */
- border-top：1px solid red； /* 设置顶部边框为红色 1px 实线 */
12.2 外边距
- margin：边框和边框外层的元素的距离。
| 属性值 | 取值 | 描述 |
|---|---|---|
| margin-top | 数值 | 上间距 |
| margin-right | 数值 | 右间距 |
| margin-bottom | 数值 | 下边距 |
| margin-left | 数值 | 左边距 |
简写：
- margin：10px /* 同时设置四个边距为10px */
- margin：5px 10px /* 5px上下，10px左右 */
- margin：5px 10px 20px /* 5px上，10px左右，20px下 */
12.3 内边距
- padding：边框和内容之间的距离
| 属性值 | 取值 | 描述 |
|---|---|---|
| padding-top | 数值 | 上内边距 |
| padding-right | 数值 | 右内边距 |
| padding-bottom | 数值 | 下内边距 |
| padding-left | 数值 | 左内边距 |
简写：
- padding：5px /* 四个方向内边距5px */
- padding：5px 10px /* 上下内边距5px 左右内边距10px */
- padding：5px 10px 20px； /* 5px上，10px左右，20px下 * /
12.4 CSS3扩展属性
- border-radius
- 实现圆角
- 语法：boder-radius：10px; /* 数值越大越圆，达到高度一半就会变成圆形 */
- 语法：boder-radius：5px 5px 10px 10px；
- box-shadow
- 用于向方框添加阴影
- 语法：box-shadow：10px 10px 5px raba（0,0,0,0.5）; / 水平 垂直 模糊率 颜色及透明度 /
- text-shadow
- 可向文本应用阴影。
- 语法：text-shadow：5px 5px 5px raba（0,0,0,0.5）;
547
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
