--------------------------------------------------------------------------------------------------------
day01
--------------------------------------------------------------------------------------------------------
CSS简介：
1>css指层叠样式表(Cascading Style Sheets)；
2>样式定义如何显示HTML元素，css是给HTML化妆的；
3>样式通常存储在样式表中。
4>内联样式：
- 样式定义在单个的HTML元素中；
- 样式定义在HTML元素的属性style里；
- 只需要将分号隔开的一个或者多个属性/值对作为元素的style属性的值；
- 属性和属性值之间用":"连接；
- 多对属性之间用";"隔开；
- 内联样式的代码无法重用。
5>内部样式表：
- 样式定义在HTML页的头部的<style>元素内；
- 在文档的<head>元素内添加<style>元素；
- 在<style>元素中添加样式规则；
- 内部样式可以在当前页面范围内重用；
6>外部样式表：
- 将样式定义在一个外部的css文件中(.css文件)，由HTML页面引用样式表文件；
- 该文件中只能包含样式规则；
- 使用步骤：创建外部样式文件，引用该样式文件；
- 可以被多个页面重用；
- 引入.css文件语法：<link rel="stylesheet" type="text/css" href="../css/c1.css" />。
CSS语法：
1>css由多个样式规则组成，每个样式规则有两部分：选择器和样式声明。
2>CSS规则特性：
- 继承性：父元素的CSS的声明可以被子元素继承，如字体、颜色等；
- 层叠性：同一个元素若存在多个CSS规则，对不冲突的声明可以叠加；
- 优先级：同一个元素若存在多个CSS规则，对于冲突声明以优先级高者为准。
3>样式优先级：
- 内联样式最高；
- 外部样式表或者内部样式表，其次，就近优先；
- 浏览器缺省设置，最低；
- 相同的样式，如果重复定义，以最后一次的定义为准。
CSS选择器：
1>元素选择器：通过元素名来选择CSS作用的目标，如果页面中有多个相同的元素需要重用相同的效果，建议使用元素选择器。
2>类选择器：类选择器允许以一个独立于文档元素的方式来指定样式。
- 语法：.className{color: red;}；
- 所有能够附带class属性的元素都可使用此样式声明，将元素的class属性的值设置为样式类名；
- 如果页面中有多个不同的元素需要重用同样的效果，建议使用类选择器；
- 可以将类选择器和元素选择器结合起来使用，以实现对某种元素中不同样式的细分控制；
- 语法：元素选择器.className{}；
3>Id选择器：Id选择器以一种独立于文档元素的方式来指定样式。
- 它仅作用于id属性的值；
- 语法：#idName{}；
4>选择器组：选择器声明为以逗号隔开的选择器列表，将一些相同的规则作用于多个元素。
5>派生选择器：派生选择器用来选择子元素，分为两种：
- 后代选择器：选择某元素的所有后代(子孙)元素；
- 子元素选择器：选择某元素的所有子元素(要用大于号)。
6>伪类选择器：伪类用于设置同一个元素在不同状态下的样式，常用伪类有(关键字前要用":")：
- link：向未被访问的超链接添加样式；
- visited：向已被访问的超链接添加样式；
- active：向被激活的元素添加样式；
- hover：当鼠标悬停至元素上方时，向该元素添加样式；
- focus：当元素获取焦点时，向该元素添加样式。
border与box：
1>border属性：用来设置元素的边框；
2>四边设置：
- border：width值 style值 color值；
3>单边设置：
- border-left：width值 style值 color值；
- border-right：width值 style值 color值；
- border-top：width值 style值 color值；
- border-bottom：width值 style值 color值；
4>border样式单位：
- %：百分比；
- in：英寸；
- cm：厘米；
- mm：毫米；
- pt：磅(1pt等于1/72英寸)；
- px：像素(计算机屏幕上的一个点)；
- em：1em等于当前的字体尺寸，2em等于当前字体尺寸的两倍。
5>border颜色单位：
- #rrggbb：十六进制，如#ff0000；
- #rgb：简写的十六进制数，如#f00；
- rgb(x,x,x)：RGB值，如rgb(255,0,0)；
- rgb(x%,x%,x%)：RGB百分比值，如rgb(100%,0%,0%)；
- 表示颜色的英文单词，如red。
7>overflow属性：当内容溢出元素框时如何处理：
- visible：显示；
- hidden：隐藏；
- scroll：滚动；
- auto：自动。
8>框模型box：
- 框模型(Box Model)定义了元素框处理元素内容、内边距、边框、外边距的方式；
- width和height指内容区域的宽度和高度；
- 增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
背景：
1>background-color属性用于为元素设置背景色，该属性接收任何合法的颜色值；
2>background-image属性用于设置背景图片，默认值为none，用url附带一个图片的url值；
3>默认情况下，背景图片在水平和垂直方向上重复出现，创建一种称为"壁纸"的效果；
4>background-repeat属性可以控制背景图片的平铺效果：
- repeat：在垂直方向和水平方向重复，为重复值；
- repeat-x：仅在水平方向重复；
- repeat-y：仅在垂直方向重复；
- no-repeat：仅显示一次。
5>background-position属性用于改变背景图片在元素中位置；
6>默认情况下，背景图像会随着页面的滚动而移动，可以通过background-attachment属性来改变此特性。默认值是scroll，背景会随文档滚动。可取值为fixed，背景图像固定，并不会随着页面的其余部分滚动，常用于实现称为水印的图像。
--------------------------------------------------------------------------------------------------------
day02
--------------------------------------------------------------------------------------------------------
文本格式化：
1>指定字体：font-family:value1,value2；
2>字体大小：font-size:value；
3>字体加粗：font-weight:normal/bold；
4>文本颜色：color:value；
5>文本排列：text-align:left/right/center；
6>文本修饰：text-decoration:none/underline；
7>行高：line-height:value(1.6em)；
8>首行文本缩进：text-indent:value(2em)；
表格样式：
1>表格同样可以使用box模型(边框、内边距、宽、高)以及文本格式化属性；
2>如果设置了单元格的边框，相邻单元格的边框会单独显示，类似于双线边框；
3>border-collapse属性：合并相邻的边框；
4>设置是否将表格边框合并为单一边框：border-collapse:separate/collapse；
定位：
1>定位：定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身位置：
- 流定位；
- 浮动定位；
- 相对定位；
- 绝对定位；
- 固定定位。
2>流定位(static)：
- 页面中的块级元素框从上到下一个接一个的排列；
- 每一个块级元素都会出现在一个新行中(比如<p>元素、<div>元素)；
- 元素框之间的垂直距离是由框的垂直外边距计算出来的；
- 行内元素将在一行中从左到右排列水平布置，不需要从新行开始；
- 可以使用水平内边距、边框、外边距调整它们的间距。
3>浮动定位(float)：
- 让元素脱离普通流定位；
- 将浮动元素放置在父元素的左边或者右边；
- 浮动元素依旧位于父元素之内；
- 浮动的框可以向左或向右移动，直到它的外边缘碰到父元素或另一个浮动框的边框为止；
- 经常使用浮动定位来实现特殊的定位效果；
- 在CSS中，任何元素都可以设置浮动；
- clear属性用于清除浮动所带来的影响；
- clear:none/left/right/both，定义了元素哪边上不允许出现浮动元素。
4>相对定位(relative)：
- 元素原本所占的空间不释放；
- 元素会相对于它原来的位置偏移某个距离；
- 设置垂直或水平位置，让元素相对于它的起点进行移动；
- 设置元素为相对定位，首先需要设置position属性的值为relative，然后使用left属性或者right属性设置水平方向的偏移量，也可以使用top属性或者bottom属性设置垂直方向的偏移量。
5>绝 对定位(absolute)：
- 将元素的内容从当前定位中移除，释放空间；
- 并使用偏移属性来固定该元素的位置，相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块，比如body元素；
- 设置元素为绝对定位：首先需要设置position属性的值为absolute，然后使用left属性或者right属性设置元素的水平位置，也可以使用top属性或者bottom属性设置元素的垂直位置。
6>固定定位(fixed)：
- 将元素的内容固定在页面的某个位置；
- 元素从普通流中完全移除，不占用页面空间；
- 当用户向下滚动页面时元素框并不随着移动；
- 设置固定定位：首先需要设置position属性的值为fixed，通过left、top、right、bottom这些偏移量、属性来定义元素的位置。
7>定位属性：
- position规定元素的定位类型，可取值：static/relative/absolute/fixed；
- 偏移属性：top/bottom/left/right属性，用于定义元素框的偏移位置；
- z-index设置元素的堆叠顺序；
- float/clear浮动定位属性；
- 使用position属性和偏移属性实现流定位、相对定位、绝对定位、固定定位，使用float属性实现浮动定位，其他属性为辅助属性。
8>堆叠顺序：
- 一旦修改了元素的定位方式，则元素可能会发生堆叠；
- 可以使用z-index属性来控制元素框出现的重叠顺序；
- z-index属性数值越大表示堆叠顺序更高，即离用户更近；
- z-index属性可以设置为负数表示离用户更远。
列表样式：
1>list-style-type属性用于控制列表中列表项标志的 样式；
2>无序列表：出现在各级列表项旁边的圆点；
3>有序列表：可能是字母、数字或另外某种计数体系中的一个字符；
4>无序列表：
- none：无标记；
- disc：实心圆，为默认值；
- circle：空心圆；
- square：实心方块。
5>有序列表：
- none：无标记；
- decimal：数字(如1、2、3)，为默认值；
- lower-roman：小写罗马数字(如i、ii、iii)；
- upper-roman：大写罗马数字(如I、II、III)。
6>list-style-image属性使用图像来替换列表项的标记；
7>取值为：url()，指定图像作为有序或无序列表项的标志；
显示方式(display)：
1>元素都有自己默认的显示方式，包括：
- 块元素：从上至下，可以设置宽高，如<h1><p><div>等；
- 行内元素：从左至右，不能设置宽高，如<span><a>等；
- 行内块：从左至右，可以设置宽高，如<input><img>等；
2>除了默认的显示效果外，可以使用display属性来修改元素框的显示方式，即改变生成的框的类型。
3>改变显示方式：
- 用于改变元素显示方式，其取值有none、block、inline、inline-block：
- none：不显示该元素，释放其占用位置；
- block：将元素显示方式设置为块，如可以将行内元素<a>转换为块元素；
- inline：将元素显示方式设置为行内，如可以将块元素<p>转换为行内元素；
- inline-block：将元素显示方式设置为行内块，如可以将行内元素<span>转换为行内块元素。
鼠标形状：
1>默认情况下，光标根据用户的操作发生变化：
- 当鼠标悬停在一个链接上时，光标将从指针形状变为手状；
- 当鼠标悬停在文本区域时，会显示I形状；
- 而当鼠标悬停在一个按钮上时，光标会显示为箭头；
2>可以使用cursor属性指定显示给用户的鼠标光标类型(形状)。
3>cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状，可取值：
- default；
- pointer；
- crosshairs；
- text；
- wait；
- help。
--------------------------------------------------------------------------------------------------------
转载请注明原文地址: https://ju.6miu.com/read-12437.html
