CSS入门知识

###简介

• CSS：指层叠样式表 (Cascading Style Sheets)
• 样式层叠：样式层叠就是对一个元素多次设置同一个样式，将使用最后一次设置的属性值

###语法

• 样式层叠的优先级：内联样式**–>内部样式表–>外部样式表–>**浏览器缺省设置

• css规则由两个主要的部分构成：选择器，以及一条或多条声明：

选择器	声明一	声明二
h1	{color:blue;	font-size:12px;}

• css颜色

1. p{color:#ff0000;} #十六进制的演示
2. p{color:#f00;} #十六进制的缩写，即对于#rrggbb的颜色，可以用#rgb来表示
3. p{color:rgb(255,0,0);} #rgb方式
4. 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优先级最高

1. 通用选择器（*）
2. 元素（类型）选择器
3. 类选择器
4. 属性选择器
5. 伪类
6. id选择器
7. 内联样式

!important 规则例外：使用!important的样式，该样式会覆盖CSS中任何其他的样式声明。不建议使用

• 对于复杂的选择器，可使用“权重计算”方式来判别

权重规则：内联样式=1000，id选择器=100，class类选择器=10，html标签选择器=1
选择器选用优先级规则：

• 选择器都有一个权值，权值越大越优先
• 当权值相等时，后出现的样式表设置要优于先出现的样式表设置

• 背景（backgrouds）

background-color 不能继承，其默认值是 transparent
background的多个属性可以简写，顺序如下

1. background-color
2. background-image
3. background-repeat，背景图片重复，参数值有：no-repeat（不重复平铺），repeat-x（水平方向平铺），repeat-y（垂直方向平铺）
4. background-attachment，背景图片固定，参数值有：fixed（浏览器窗口滚动，图片固定不动），scroll（默认值，图片随浏览器窗口一起滚动）
5. 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"]{}