HTML CSS部分代码及简介

cursor属性

cursor 属性规定所显示的指针（光标）的类型，主要取值如下：

1. default 默认光标（通常是一个箭头） auto 默认。浏览器设置的光标。
2. crosshair 光标呈现为十字线。
3. pointer 光标呈现为指示链接的指针（一只手）
4. move 此光标指示某对象可被移动。
5. e-resize 此光标指示矩形框的边缘可被向右（东）移动。
6. ne-resize 此光标指示矩形框的边缘可被向上及向右移动（北/东）。
7. nw-resize 此光标指示矩形框的边缘可被向上及向左移动（北/西）。
8. n-resize 此光标指示矩形框的边缘可被向上（北）移动。
9. se-resize 此光标指示矩形框的边缘可被向下及向右移动（南/东）。
10. sw-resize 此光标指示矩形框的边缘可被向下及向左移动（南/西）。
11. s-resize 此光标指示矩形框的边缘可被向下移动（北/西）。
12. w-resize 此光标指示矩形框的边缘可被向左移动（西）。
13. text 此光标指示文本。
14. wait 此光标指示程序正忙（通常是一只表或沙漏）。
15. help 此光标指示可用的帮助（通常是一个问号或一个气球）。

::before , ::after 属性

::before：在选择的某个标签之前添加内容
::after：在选择的某个标签之后添加内容
举例如下：

1. #a::before{
   content:“¥”;
   font-size:15px;
   color:black;
   } 选择id为a的标签，在这个标签里内容的最前方加上content里面的内容并可以设置属性
2. #b::after{
   content:".00";
   font-size:15px;
   color:rgb(222, 102, 200);
   } 选择id为b的标签，在这个标签里内容的最后方加上content里面的内容并可以设置属性

text-indent属性

text-indent 属性规定文本块中首行文本的缩进。用法如下：
text-indent:10px; 例如input框中距离最左侧10px;

:link，:active，:hover，:visited，:focus属性

1. :link 未被访问过
2. :active 激活状态下(鼠标按下时)
3. :hover 悬浮状态下
4. :visited 已访问过的
5. :focus 获得焦点的时候(鼠标键入时，例如用在input框点击输入后边框变色)

user-select属性

user-select:用来控制内容的可选择性，属性值如下：

1. auto——默认值，用户可以选中元素中的内容
2. none——用户不能选择元素中的任何内容
3. text——用户可以选择元素中的文本
4. element——文本可选，但仅限元素的边界内
5. all——在编辑器内，如果双击/上下文点击发生在子元素上，该元素的最高级祖先元素将被选中。
6. -moz-none——firefox私有，元素和子元素的文本将不可选，但是input输入框中的文字除外

text-shadow，box-shadow属性

text-shadow是给文本添加阴影效果，box-shadow是给元素块添加周边阴影效果。
基本语法是
{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor}
对象选择器
{box-shadow:[投影方式] X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色}

display属性

display 属性规定元素应该生成的框的类型。常用属性值如下：

1. none 此元素不会被显示。
2. block 此元素将显示为块级元素，此元素前后会带有换行符。
3. inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
4. inline-block 行内块元素。既可以设置宽高，又可以独占一行
5. list-item 此元素会作为列表显示。
6. inherit 规定应该从父元素继承 display 属性的值。

flex-grow 属性

flex-grow 属性用于设置或检索弹性盒子的扩展比率。属性值如下：

1. number 一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。
2. initial 设置该属性为它的默认值。
3. inherit 从父元素继承该属性。

:before，:after

.a::before{
content:“¥”;
font-size:15px;
color:black;
}
选择class为a的标签，在这个标签里内容的最前方加上content里面的内容并可以设置属性
.b::after{
content:".00";
font-size:15px;
color:rgb(222, 102, 200);
}
选择class为b的标签，在这个标签里内容的最后方加上content里面的内容并可以设置属性

:link,:active,:hover,:visited,:focus,:blur,onfocus,onblur

:link 未被访问过
:active 激活状态下(鼠标按下时)
:hover 悬浮状态下
:visited 已访问过的
:focus 获得焦点的时候
:blur 失去焦点的时候

text-indent

text-indent:10px; 首行文本缩进，例如input框中距离最左侧10px;

text-shadow,box-shadow

text-shadow是给文本添加阴影效果，box-shadow是给元素块添加周边阴影效果。随着HTML5和CSS3的普及，这一特殊效果使用越来越普遍。
基本语法是
{box-shadow:
[inset]
x-offset
y-offset
blur-radius
spread-radius
color}
对象选择器 {box-shadow:
[投影方式]
X轴偏移量
Y轴偏移量
阴影模糊半径
阴影扩展半径
阴影颜色}

文本阴影：为字体添加阴影，减少一些图片的使用
text-shadow:x y blur color;
属性值说明
x和y表示阴影出现的位置，此时遵循以屏幕左上方为焦点

blur 阴影模糊值，值越大越模糊，默认为1

color 阴影的颜色，颜色不设置默认以color的颜色一样

box-shadow 区域阴影和文本阴影基本一样

user-select: none;

user-select: none;使用户不可以复制文本内容，通常可以用在label上/* CSS3属性 */

display:inline-block;

display:inline-block;行块标签，既可以设置宽高，又可以独占一行

flex-grow

flex-grow 属性用于设置或检索弹性盒子的扩展比率。属性值如下：

1. number 一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。
2. initial 设置该属性为它的默认值。
3. inherit 从父元素继承该属性。

min-width

min-width: 1190px;设置最小宽度为1190px;通常在有背景颜色的区域可以使用，在放大后保留一个最小宽度使得在该宽度内背景色仍然保留。

#search::-webkit-input-placeholder

#search::-webkit-input-placeholder 设置placeholder中提示文本的样式

background-position:x y;

background-position:第一个值是水平位置，第二个值是垂直位置。第一个值是水平位置，第二个值是垂直位置。

flex-wrap:wrap;

flex-wrap:wrap;允许弹性布局换行，默认是no-wrap,不允许换行

transform 变形，通俗说就是改变元素的形态

1. 旋转 rotate()
   注意：如果设置正数则为顺时针旋转，负数则为逆时针旋转

2. 扭曲 skew(xdeg,ydeg)
   以边框线为轨道拉伸扭曲区域
   如果只写一个值(x,0)

3. 缩放 scalr(x,y)
   以基点为中心，缩放基数1，大于1为放大，小于1为缩小
   如果只写一个值(x,x)

4. 移动 translate(x,y)
   移动式类似于相对定位
   如果只写一个值，表示(x,0)

基点
transform-origin:x y z; 单独设置
z轴的正方向朝着屏幕内，值越大，离用户越远

边框圆角 border-radius:a b c d/e f g h;

边框圆角 border-radius:a b c d/e f g h;
其实是一个简单的属性

赋值的三种写法
1 border-radius: a;
只设置一个值，表示八个方向都是一个半径
2 border-radius: a b c d;
设置四个方向值
a等价于左上的两个值
b等价于右上的两个值
c等价于右下的两个值
d等价于左下的两个值
3 完整写法，八个属性 border-radius:a b c d/e f g h;不常用
a与e等价于左上的两个值
b与f等价于右上的两个值
c与g等价于右下的两个值
d与h等价于左下的两个值