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