简介
- CSS：指层叠样式表 (Cascading Style Sheets)
- 样式层叠：样式层叠就是对一个元素多次设置同一个样式，将使用最后一次设置的属性值
语法
样式层叠的优先级：内联样式–>内部样式表–>外部样式表–>浏览器缺省设置
css规则由两个主要的部分构成：选择器，以及一条或多条声明：
选择器 声明一 声明二 h1 {color:blue; font-size:12px;} css颜色
- p{color:#ff0000;} #十六进制的演示
- p{color:#f00;} #十六进制的缩写，即对于#rrggbb的颜色，可以用#rgb来表示
- p{color:rgb(255,0,0);} #rgb方式
- p{color:rgb(100%,0%,0%);} #rgb的百分百方式，一定得写成0%
id选择器，clas选择器
id选择器：css 中 id 选择器以 “#” 来定义
class选择器：css 中，类选择器以一个点”.”号显示内联样式，内部样式表，外部样式表
外部样式表：在外部以css结尾的文件中定义，然后在head之间用
<link rel="stylesheet" type="text/css" href="mystyle.css">引入
内部样式表：在head之间，用<style>标签定义
内联样式：在标签内使用style属性定义选择器优先级列表，从低往高，数组7优先级最高
- 通用选择器（*）
- 元素（类型）选择器
- 类选择器
- 属性选择器
- 伪类
- id选择器
- 内联样式
!important 规则例外：使用
!important的样式，该样式会覆盖CSS中任何其他的样式声明。不建议使用对于复杂的选择器，可使用“权重计算”方式来判别
权重规则：内联样式=1000，id选择器=100，class类选择器=10，html标签选择器=1
选择器选用优先级规则：- 选择器都有一个权值，权值越大越优先
- 当权值相等时，后出现的样式表设置要优于先出现的样式表设置
背景（backgrouds）
background-color 不能继承，其默认值是 transparent
background的多个属性可以简写，顺序如下- background-color
- background-image
- background-repeat，背景图片重复，参数值有：no-repeat（不重复平铺），repeat-x（水平方向平铺），repeat-y（垂直方向平铺）
- background-attachment，背景图片固定，参数值有：fixed（浏览器窗口滚动，图片固定不动），scroll（默认值，图片随浏览器窗口一起滚动）
- background-position
文本（text）
color: 颜色
text-align: 对齐方式
text-decoration: 文字修饰，参数值有：uderline（下划线），overline（上划线），line-through（删除线），blink（使文字闪烁），none
text-transform: 字母大小写转换，参数值有：uppercase（全大写），lowercase（全小写），capitalize（单词首字母大写），none（默认），inherit（从父元素继承）
text-indent: 首行缩进
word-spacing: 文本间隔
letter-spacing: 字符间隔字体（fonts）
font-family: 字体系列
font-style: 字体样式，参数值有：normal（默认），italic（斜体），oblique（倾斜），inherit（从父元素继承）
font-size: 字体大小，有px,em之分，
详见：https://blog.csdn.net/jingru2017/article/details/79099464
font-weight: 字体粗细链接（link）
四种状态（a:hover 必须跟在 a:link 和 a:visited后面；a:active 必须跟在 a:hover后面）：
- a:link - 正常，未访问过的链接
- a:visited - 用户已访问过的链接
- a:hover - 当用户鼠标放在链接上时
- a:active - 链接被点击的那一刻
color: 颜色修饰
text-decoration: 文本修饰
background-color: 背景颜色修饰列表样式（ul）
ul: 无需列表
ol: 有序列表
list-style-type: 列表项标记（无序的为形状，有序的为字母）
list-style-image: 列表项标记的图标
属性缩写顺序：- list-style-type
- list-style-position
- list-style-image
表格（table）
border-collapse: 折叠边框（即把两行边框变成一行边框）
text-align: 表格文字水平对齐
vertical-align: 表格文字垂直对齐盒子模型
css 盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容
- Margin（外边距） - 清除边框区域。Margin没有背景颜色，它是完全透明
- Border（边框） - 边框周围的填充和内容。边框是受到盒子的背景颜色影响
- Padding（内边距） - 清除内容周围的区域。会受到框中填充的背景颜色影响
- Content（内容） - 盒子的内容，显示文本和图像
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
盒模型是区分方向的，顺序为上右下左边框（border）
border-style: 边框样式，也可以单独设置某一边，顺序为：上右下左，若书写缺省，自动以相对方向的边框样式为默认值
border-width: 边框宽度，1）长度设置，如2px，0.1em；2）关键词：thin，medium，thick
border-color: 边框颜色
属性简写顺序：border-width，border-style，border-color轮廓属性（outline）
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
outline-color: 外边框颜色
outline-style: 外边框样式
outline-width: 外边框宽度
属性简写顺序：outline-color，outline-style，outline-width外边距（margin）
填充（padding）
分组和嵌套
分组可以将具有相同样式的选择器进行分组，减少代码量
嵌套适用于选择器内部的选择器的样式显示（display）与可见性（visibility）
display（显示）：其隐藏某个元素，且隐藏的元素不会占用任何空间
visibility（可见性）：其隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间定位（positioning）
position: 定位类型
z-index: 元素的堆叠顺序，数值大的在前面
overflow: 当元素的内容溢出其区域时发生的事情，参数值有：auto, hidden, scroll, visible, inherit浮动（float）
clear: 清除浮动
float: 指定一个盒子（元素）是否可以浮动组合选择符
使用组合选择符可以让你直观的明白选择器与选择器之间的关系
- 后代选取器(以空格分隔)，即所有子类
- 子元素选择器(以大于号分隔），即直接子类
- 相邻兄弟选择器（以加号分隔），即紧接在另一元素后的元素，且二者有相同父元素
- 普通兄弟选择器（以波浪号分隔），即所有指定元素的相邻兄弟元素
伪类
语法：selector:pseudo-class {property:value;}，即 选择器:伪类名 {属性名:属性值}
伪元素
伪类与伪元素的区别：https://blog.csdn.net/q1056843325/article/details/53560588
导航栏
导航栏=链接列表，使用 ul ， li 表示
下拉菜单
样式：.dropdown, .dropdown-content, .dropdown:hover .dropdown-content
display属性的值：inline, block, inline-block的区别
https://blog.csdn.net/kalama/article/details/79057686
哪些是行内元素，哪些是块元素？？？图片廊
图像透明，不透明
opacity属性：不透明度，从0.0（完全透明）到1.0（完全不透明）
图像拼合技术
#home{background:url('/xxx/img_navsprites.gif') no-repeat -10px 0;}
no-repeat后面的两个数值，代表背景图片移动的方向。
参数一：为负，表示背景图像向左移动；为正，表示背景图像向右移动
参数二：为负，表示背景图像向上移动；为正，表示背景图像向下移动属性选择器
属性选择器：
[title]{}
属性和值选择器：[title=w3cschool]{}
属性和值的选择器 - 多值[title~=hello] { color:blue; }，~符号，表示属性值可以由多个单词组成，符合其中的一个即可[lang|=en] { color:blue; }，|符号，表示属性值是以“en”开头，且只有一个单词
表单样式：input[type="text"]{}