CSS:一个简单的文档改变所有页面的布局和外观
1.css简介
- 主要规则：以选择器和一个或多个声明组成
- 每条声明由一个属性和一个值组成（每个属性有值。属性和值被冒号分开）
- CSS声明总是以分号(;)结束，声明总以大括号({})括起来
- CSS注释以 /* 开始, 以 */ 结束
2.css选择器`
（1）id选择器：
- 以"#"来定义
#para1 { text-align:center; color:red; } <p id="para1">Hello World!</p>`在这里插入代码片
- 不要以数字开头
(2)class选择器：
- 以一个"."点号来显示
- 可在多个元素中使用
3.文本（text）
- text-decoration 属性用来设置或删除文本的装饰。(主要用来删除链接的下划线)
{text-decoration:none;}
text-transform文本转换（指定一个文本中大写或小写字母）
text-indent 指定文本第一行缩进
text-align 文本对齐
line-height 设置行高
4.css链接（可以用css任何属性如：颜色，字体等）
a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
a:link {color:#000000;} /* 未访问链接*/ a:visited {color:#00FF00;} /* 已访问链接 */ a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */ a:active {color:#0000FF;} /* 鼠标点击时 */
（当设置为若干链路状态的样式，也有一些顺序规则：
a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面）
5.css列表
无序列表 ul - 列表项标记用特殊图形（如小黑点、小方框等）
有序列表 ol - 列表项的标记有数字或字母
list-style-type-用于移除小标记
ul.demo { list-style-type: none; margin: 0; padding: 0; }
6.表格
（1）border属性设置边框 （双边框）
table,th,td { border:1px solid black; }
（2）border-collapse属性（单边框）
table { border-collapse: collapse; } table, td, th { border: 1px solid black; }
（3）padding 表格填充（单元格与内容之间空白）
7.盒子模型
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像
（1）当您指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加内边距，边框和外边距。
（2）
8.border边框
（1）border-style属性用来定义边框的样式
border-style的部分值如下：
dotted: 定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框
double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
none：默认无边框
（2）边框可以单独设置单边：top right bottom left
9.轮廓（outline）：位于边框周围的外围
（可规定样式，颜色，宽度）
（3）注意： border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。
10.css分组和嵌套
（1）分组选择器：相同样式的元素设置样式时可用逗号隔开 （下面h1,h2,p 中的元素均为green）
h1,h2,p { color:green; }
（2）嵌套选择器：可能适用于选择器内部的选择器的样式
p{ }: 为所有 p 元素指定一个样式
.marked{ }: 为所有 class=“marked” 的元素指定一个样式
.marked p{ }: 为所有 class=“marked” 元素内的 p 元素指定一个样式
p.marked{ }: 为所有 class=“marked” 的 p 元素指定一个样式
11.display(显示)：块和内联元素
display:none 隐藏元素，不占用空间
visibility:hidden 隐藏元素，占用空间
inline 和相邻的内联元素在同一行
inline-block 等高对齐
display-block：两个元素之间的换行符
span { display:block; } <span>display 属性值为 "block" 的结果</span> <span>这两个元素之间的换行符。</span>
即：display 属性值为 “block” 的结果
这两个元素之间的换行符。
12.Position(定位)
static: 无特殊定位，遵循正常的文档流对象
fixed: 相对浏览器的位置是固定的，即使窗口移动它也不滚动
relative: 定位是相对其正常位置定位的
absolute: 相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于:
sticky(粘性定位):，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
z-index（堆叠 那个元素在前，那个元素在后）：
若：z-index:-1; 则在后
img { position:absolute; left:0px; top:0px; z-index:-1; } <img src="w3css.gif" width="100" height="140" /> <p>因为图像元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后。</p>
13.css Overflow:用于控制内容溢出元素框时显示的方式。
overflow:添加滚动条
overflow: visible：内容溢出元素框
div { background-color: #eee; width: 200px; height: 50px; border: 1px dotted black; overflow: visible; }
即：
14.Floathe（浮动）:元素只能左右移动
- float属性：几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻 (float:left)
- clear属性：元素浮动之后，周围的元素会重新排列，而clear 属性则指定元素两侧不能出现浮动元素。
（1）段落第一个字母大写：
span { float:left; width:1.2em; font-size:400%; font-family:algerian,courier; line-height:80%; } <span>这</span>是一些文本
如下：
（2）标题和图片向右浮动：
div { float:right; width:120px; margin:0 0 15px 20px; padding:15px; border:1px solid black; text-align:center; } <div> <img src="logocss.gif" width="95" height="84" /><br> CSS is fun! </div>
如下：
15.css布局 水平&垂直对齐：
- 仅仅为了文本在元素内居中对齐：text-align:center
- 水平居中块级元素 (如 div):margin-auto
- 左右对齐，使用position定位：
.right { position: absolute; right: 0px; width: 300px; border: 3px solid #73AD21; padding: 10px; } <div class="right"> <p>菜鸟教程 -- 学的不仅是技术，更是梦想！！</p> </div>
如下：
- 图片居中对齐可用:margin-auto
img { display: block; margin: 0 auto; }
右对齐用 float方式：float:left(若子元素高度大于父元素，且子元素设置了浮动，那么子元素将溢出，可通过使用"clearfix"清除浮动来解决或者父元素上添加overflow:auto)
垂直居中对齐用:padding.center { padding: 70px 0; border: 3px solid green; }
水平垂直都对齐：padding和text-align:center
.center { padding: 70px 0; border: 3px solid green; text-align: center; }
垂直居中：line-height
垂直居中还可以：padding和transform
16.组合选择符
后代选择器(以空格 分隔)
子元素选择器(以大于 > 号分隔）
相邻兄弟选择器（以加号 + 分隔）
普通兄弟选择器（以波浪号 ～ 分隔）
17.伪类
p:first-child:匹配第一个p元素
p>i:first-child:所有p元素中的第一个i元素
p:first-child i:匹配所有作为第一个子元素中的所有的i元素
伪元素
p:first-line{}:对p元素的第一行文本进行格式化
first-letter:向文本首字母设置样式
:before:可以在元素的内容前面插入内容
:after:可以在元素的内容后面插入新内容
:focus选择器:一个输入字段获得焦点时选择的样式
18.导航栏
激活/当前导航条
ul { list-style-type: none; margin: 0; padding: 0; width: 200px; background-color: #f1f1f1; } li a { display: block; color: #000; padding: 8px 16px; text-decoration: none; } li a.active { background-color: #4CAF50; color: white; } li a:hover:not(.active) { background-color: #555; color: white; } <h2>垂直导航条</h2> <p>在点击了选项后，我们可以添加 "active" 类来标准哪个选项被选中。</p> <ul> <li><a class="active" href="#home">主页</a></li>
如下
- 添加分割线
ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li:last-child { border-right: none; }
如下
19.下拉菜单:dropdown
dropdown 类使用 position:relative, 这将设置下拉菜单的内容放置在下拉按钮 (使用 position:absolute) 的右下角位置。
.dropdown-content 类中是实际的下拉菜单。默认是隐藏的，在鼠标移动到指定元素后会显示。
