css基础

关键字简介示例代码

color

文字颜色
属性名color
颜色的值可以采用3种方式

1. 预定义的颜色名字
   比如red,gray,white,black,pink
2. rgb格式
   分别代表红绿蓝的比例 rgb(250,0,255) 即表示红色是满的，没有绿色，蓝色是满的，即红色和蓝色混合在一起：紫色
3. 16进制的表示
   #00ff00 等同于 rgb(0,255,0)
   示例代码

text-align

对齐

属性:text-align
值：left,right,center
div是块级元素，其默认宽度是100%，所以文本有对齐的空间前提。

但是，span却看不出右对齐效果，为什么呢？
因为span是内联元素其默认宽度就是其文本内容的宽度
简单说就是文本已经粑在其边框上了，对齐是看不出效果来的

示例代码

text-decoration

文本修饰

属性：text-decoration
值： overline

示例代码

line-height

行间距

属性：line-height
值：数字或者百分比

示例代码

letter-spacing

字符间距
属性：letter-spacing
值： 数字
示例代码

word-spacing

单词间距
属性：word-spacing
值： 数字
示例代码

text-indent

首行缩进
属性：text-indent
值： 数字
示例代码

text-transform

大小写
属性：text-transform
值：
uppercase 全部大写
capitalize 首字母大写
lowercase 全部小写
示例代码

white-space

空白格
属性：white-space
值：
normal 默认。多个空白格或者换行符会被合并成一个空白格
pre 有多少空白格，显示多少空白格，相当于pre标签,如果长度超出父容器也不会换行。
pre-wrap 有多少空白格，显示多少空白格，相当于pre标签,如果长度超出父容器，会换行。
nowrap 一直不换行，直到使用br
示例代码

属性：font-size
值：数字或者百分比

font-style:
normal 标准字体
italic 斜体

属性 font-weight
normal 标准粗细
bold 粗一点

属性font-family

把大小，风格，粗细，字库都写在一行里面

鼠标样式

效果 样式
鼠标移动上来看效果 cursor:default
鼠标移动上来看效果 cursor:auto
鼠标移动上来看效果 cursor:crosshair
鼠标移动上来看效果 cursor:pointer
鼠标移动上来看效果 cursor:e-resize
鼠标移动上来看效果 cursor:ne-resize
鼠标移动上来看效果 cursor:nw-resize
鼠标移动上来看效果 cursor:n-resize
鼠标移动上来看效果 cursor:se-resize
鼠标移动上来看效果 cursor:sw-resize
鼠标移动上来看效果 cursor:w-resize
鼠标移动上来看效果 cursor:text
鼠标移动上来看效果 cursor:wait
鼠标移动上来看效果 cursor:help
鼠标移动上来看效果 cursor:not-allowed

table-layout:automatic|fixed

表格布局

border-collapse:separate|collapse

表格边框
属性：border-collapse
值：
separate:边框分隔
collapse:边框合并

边框风格

边框颜色

属性：border-color
值：red,#ff0000,rgb(255,0,0)

属性：border
值：颜色 风格 宽度

通过制定位置，可以只给一个方向设置边框风格，颜色和宽度

border-top-style:solid;
border-top-color:red;
border-top-width: 50px;

有交界的边都有边框

当有交界的边同时出现边框的时候，就会以倾斜的形式表现交界线。

块级元素和内联元素的边框区别

可以看到，块级元素div默认是占用100%的宽度
常见的块级元素有div h1 p 等
而内联元素span的宽度由其内容的宽度决定
常见的内联元素有 a b strong i input 等

元素内边距
指的是元素里的内容与边框之间的距离
属性：
padding-left: 左内边距
padding-right: 右内边距
padding-top: 上内边距
padding-bottom: 下内边距
padding: 上 右 下 左

属性：padding
值：如果只写一个，即四个方向的值
值：如果写四个，即四个方向的值
上 右 下 左,依顺时针的方向依次赋值

如果缺少左内边距的值，则使用右内边距的值。
如果缺少下内边距的值，则使用上内边距的值。
如果缺少右内边距的值，则使用上内边距的值。
举例说明
这是完整4个的
padding: 10 20 40 80
如果只有3个
padding: 10 20 40
那么left取right
padding: 10 20 40 = padding: 10 20 40 20
如果只有两个
padding: 10 20
那么bottom取top，left取right
padding: 10 20 = padding:10 20 10 20
如果只有一个
padding:10
那么right取top，bottom取top，left取top
padding:10 = padding:10 10 10 10