目录
简介
CSS：Cascading Style Sheet 层叠样式表
是一组样式设置的规则，用于控制页面的的外观样式；将文档以更优雅的形式展现给用户；
作用：
-
页面外观美化
-
布局和定位
优势：
-
实现内容与样式的分离，便于团队开发
-
样式复用，便于网站的后期维护
-
页面的精确控制，让页面更精美
基本用法
1，CSS语法
<head>
<style>
选择器{
属性名：属性值;
属性名：属性值;
}
</style>
</head>
-
选择器：要修饰的对象（目标）
-
属性名：修饰对象的一个特征，样式（比如字体，颜色等）
-
属性值：样式的取值
2，CSS应用方式
-
内部样式：也称为内嵌样式，在html中的head标签加入style标签 然后再style标签内部写css代码，对当前页面所有符合样式选择器的标签都起作用；
-
行内样式：也称为嵌入样式，使用HTML标签的style属性定义，只对设置style属性的标签起作用；
-
外部样式：将样式代码写到css文件中再将css文件统一引入，在<head>标签内；
外部引入的格式1：
<link rel="stylesheet" type="text/css" href="CSS样式文件的路径">
外部引入的格式2：
<style> @import "CSS样式文件路径"; 或@import url(CSS样式文件路径); </style>
3，选择器
基础选择器
-
标签选择器：也称为元素选择器，使用HTML标签作为选择器的名称，以标签名作为样式应用的依据。
-
类选择器：使用自定义的名称，以
.号作为前缀，然后再通过HTML标签的class属性调用类选择器，以标签的class属性作为样式应用的依据。注意事项：
-
调用时不能添加
.号 -
同时调用多个类选择器时，以
空格分隔 -
类选择器名称不能以
数字开头
-
-
ID选择器：使用自定义名称，以
#作为前缀，然后通过HTML标签的id属性进行名称匹配，以标签的id属性作为样式应用的依据，一对一的关系。
复杂选择器
-
复合选择器：标签选择器和类选择器、标签选择器和ID选择器，一起使用，必须同时满足两个条件才能应用样式；
-
组合选择器：也称为集体声明，将多个具有相同样式的选择器放在一起声明，使用逗号隔开；
-
嵌套选择器：在某个选择器内部再设置选择器，通过空格隔开，只有满足层次关系最里层的选择器所对应的标签才会应用样式；注意：使用
空格时不区分父子还是后代，使用CSS3中新增的>时必须是父子关系才行 -
伪类选择器：根据不同的状态显示不同的样式，一般多用于 标签
四种状态：
-
:link 未访问的链接
-
:visited 已访问的链接
-
:hover 鼠标悬浮到连接上，即移动在连接上
-
:active 选定的链接，被激活
-
-
伪元素选择器：
-
:first-letter 为第一个字符的样式
-
:first-line 为第一行添加样式
-
:before 在元素内容的最前面添加的内容，需要配合content属性使用
-
:after 在元素内容的最后面添加的内容，需要配合content属性使用
-
选择器优先级
-
优先级
-
行内样式>ID选择器>类选择器>标签选择器
-
原因：首先加载标签选择器,再加载类选择器，然后加载ID选择器，最后加载行内样式
-
后加载会覆盖先加载的同名样式
-
-
内外部样式加载顺序
-
就近原则
-
原因：按照书写顺序依次加载，在同优先级的前提下，后加载的会覆盖先加载的同名样式，所以离的越近越优先；
-
-
！import
使用!important使某个样式有最高的优先级
常用CSS属性
字体属性
设置字体相关的样式
| 属性 | 含义 | 说明，取值 |
|---|---|---|
| font-size | 大小、尺寸 | 可以使用多种单位：px像素，%百分比，em倍数 |
| font-weight | 粗细 | normal普通；bold粗体；自定义：normal400，bold700 |
| font-family | 字体 | 要求系统中要安装指定的字体，一般建议写3种字体：首选、其次、备用。以逗号隔开 |
| font-style | 样式 | normal 普通；italic斜体 |
| font | 简写 | font:font-style|font-weight|font-size|font-family；(必须按照此顺序书写) |
文本属性
| 属性 | 含义 | 说明 |
|---|---|---|
| color | 颜色 | |
| line-height | 行高 | 行之间的高度 |
| text-align | 水平对齐方式 | 取值：left、center、right |
| vertical-align | 垂直对齐方式 | 取值：top、middle、bottom可以用于图片和文字的对齐方式 |
| text-indent | 首行缩进 | |
| text-decoration | 文本修饰 | 取值：underline、overline、line-through |
| text-transform | 字母大小写转换 | 取值：lowercase、uppercase、capitalize首字母大写 |
| letter-spacing | 字符间距 | |
| word-spacing | 单词间距 | 只对英文有效 |
| white-space | 空白的处理方式 | 文本超出后是否换行，取值：nowrap |
color的四种取值写法
-
颜色名称：使用英文单词
-
16进制的RGB值：#RRGGBB
特定情况下可以缩写：
#FFFFFF--->#FFF 白色 #000000--->#000 黑色 #FF0000--->#F00 红色 #00FF00--->#0F0 绿色 #0000FF--->#00F 蓝色 #CCCCCC--->#CCC 灰色 #FF7300--->无法简写
不区分大小写
-
rgb函数：rgb(red,green,blue)
每种颜色的取值范围[0,255]
rgb(255,0,0)----->红 rgb(0,255,0)----->绿 rgb(0,0,255)----->蓝
-
rgba函数：rgba(red,green,blue,alpha)
alpha:设置透明度，取值范围：[0,1],0表示完全透明，1表示完全不透明
背景属性
| 属性 | 含义 | 说明 |
|---|---|---|
| background-color | 背景颜色 | 取值：transparent 透明 |
| background-image | 背景图片 | 必须使用url()方式指定图片的路径 |
| background-repeat | 背景图片的重复方式 | 取值：repeat(默认)，repeat-x，repeat-y,no-repeat |
| background-position | 背景图片的显示位置 | 默认背景图显示在左上角，取值：(1),关键字：top、bottom、left、right、center；(2)坐标：左上角为(0,0)坐标，向右为x正方向,向下为y正方向 |
| background-attachment | 背景图片是否跟随滚动 | 取值：scroll(默认)、fixed固定不动 |
| background | 简写 | background:background-color|background-image|background-repeat|background-position；ps：以空格隔开，书写顺序无要求 |
列表属性
| 属性 | 含义 | 说明 |
| list-style-type | 设置列表前的标记 | 取值：none,disc,dircle,square,decimal；此时不在区分有序还是无序列表； |
| list-style-image | 将图像作为列表前的标记 | |
| list-style-position | 设置标记的位置 | 取值：outside(默认)、inside |
| list-style | 简写 | 简写属性：list-style:list-style-type|list-style-image|list-style-position |
表格属性
border-collapse:表格中相邻的边框是否合并（折叠）为单一边框
取值：separated（默认） collapse
表格属性
border-collapse:表格中相邻的边框是否合并（折叠）为单一边框
取值：separated（默认） collapse
盒子模型
盒子模型是网页布局的基础，将页面中所有元素都看作是一个盒子，盒子都包含以下几个属性：
-
width 宽度
-
height 高度
-
border 边框
-
padding 内边距
-
margin 外边距
定位方式
通过position属性实现对元素的定位，有四种定位方式
常用取值：
| 取值 | 含义 | 说明 |
|---|---|---|
| static | 默认值 | 按照常规文档流进行显示 |
| relative | 相对定位 | 相对于标签原来的位置进行的定位 |
| absolute | 绝对定位 | 相对于第一个非static定位的父标签的定位 |
| fixed | 固定定位 | 相对于浏览器窗品进行定位 |
设置定位方式后，还要设置定位属性（偏移量）：top、bottom、left、right；
1，相对定位：先设置元素的position属性为relative,然后再设置偏移量
2，绝对定位：先设置父标签为非static定位，然后设置元素的position属性为absolute，最后再设置偏移量
-
一般来说都会将父标签设置为非static定位
-
如果父标签不是非static定位，则会相对于浏览器窗口进行定位
-
设置元素为绝对定位后，元素会浮到页面上方
3，固定定位：先设置元素的position属性为fixed，然后再设置偏移量，设置元素为固定定位后，元素会浮动在面面上方；
4，z-index：设置元素定位方式后，元素会浮在页面上方，此时可以通过z-index属性设置优先级，控制元素的堆叠顺序，取值为数字，值越大优先级越高，默认为auto(大多数浏览器默认为0)，并且只能给非static定位的元素设置z-index属性；
页面布局
常见的页面布局：表格布局与div布局
表格布局
简介：不适用于复杂布局，仅用于简单 、有规则的结构，定位相对准确，与浏览器基本无关，适用于简单分隔；
用法：
table常用样式的属性
-
border在表格外围设置边框
-
border-spacing设置单元格之间的距离（相当于table标签中的cellspacing属性，即间距）
-
border-collapse表格中相邻边框是否合并，取值：seprate、collapse
th/td常用样式属性：
-
border为单元格设置边框
-
padding设置单元格的内边距（相当于table标签中的cellpadding属性，边距）
div布局
简介：定位绝对精确，使用灵活，适合于复杂的布局方式
几种常见的布局：
1，1-1-1布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="container">
<header class="header">
header
</header>
<article class="main">
main
</article>
<footer class="footer">
footer
</footer>
</div>
</body>
</html>
2，1-2/3-1布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="container">
<header class="header">
herder
</header>
<article class="wrapper">
<section>
main
</section>
<aside>
right aside
</aside>
</article>
<footer class="footer">
footer
</footer>
</div>
</body>
</html>
3，圣杯布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="container">
<header class="header">
header
</header>
<article class="wrapper">
<section class="main">
main
</section>
<aside class="left">
left
</aside>
<aside class="right">
right
</aside>
</article>
<footer class="footer">
footer
</footer>
</div>
</body>
</html>
4，双飞翼布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="container">
<header class="header">
header
</header>
<article class="wrapper">
<section class="main">
<div class="main-wrapper">
main
</div>
</section>
<aside class="left">
left aside
</aside>
<aside class="right">
right aside
</aside>
</article>
<footer class="footer">
footer
</footer>
</div>
</body>
</html>
双飞翼布局和圣杯布局要实现的效果是相同的，只是思路不同
圣杯布局和双飞翼布局的区别：
-
双飞翼布局比圣杯布局多创建一个div
-
双飞翼布局不用设置内边距和相对定位，也不用设置偏移量
-
双飞翼布局使用的margin,圣杯布局使用的是padding
97
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
