CSS基础总结
一、CSS 层叠样式表
1.CSS的使用方式
-
写在标签内的style属性中 行内式 内联式
<html标签 style="样式属性：取值;..."> -
写在
<style>标签内<style type="text/css"> 选择符{ 样式属性：取值;... } <style> -
写到外部css文件中，用
<link>关联到HTML中<link rel="stylesheet" type="text/css" href="样式表文件地址（.css）"> -
@import可以引入css文件，用于css文件中引入另一个css文件
@import url("样式表地址");
2. CSS的格式
选择器{
属性1:值;
属性2:值;
}
3.CSS的长度单位
- px ： 像素
- em ： 相对于默认大小 倍数
- % ：百分比
- pt(磅) cm(厘米) mm(毫米) 绝对单位
4.颜色表示
-
颜色的英文单词
red orange yellow green cyan blue purple black white pink gray
-
rgb方式
rgb(123,45,178) rgb(0~255,0~255,0~255) rgb(百分比，百分比，百分比)- rbg(255,0,0) 红色
- rbg(255,255,255) 白色
- rgb(0,0,0) 黑色
- rgb(100,100,100) 灰色。 只要三个都一样，就是灰色
-
十六进制
#34afa1 #ff0000 红色 简写 #f00 #00ff00 绿色 简写 #0f0 #0000ff 蓝色 简写 #00f #ffffff 白色 简写 #fff #000000 黑色 简写 #000 #cccccc 灰色 简写 #ccc #336699 简写 #369
5. CSS注释
/* 注释 */
6.CSS选择器
-
HTML元素（标签）选择器
-
ID选择器
#id名 -
CLASS选择器
.类名 -
全局选择器
* -
关联选择器-后代元素选择器
选择器 选择器例如： .nav li{...} #box div{...} div .list{...} .container li{...} -
关联选择器-子元素选择器
选择器>选择器例如：(子元素选择器，孙元素不选择) ul>li{....} -
关联选择器-相邻选择器
选择器+选择器例如：（选择紧贴在E元素之后的F元素） E+F{...} -
关联选择器-兄弟选择器
选择器~选择器例如：(选择E元素所有兄弟元素F) E~F{...} -
组合选择器 两种基本选择器的组合
-
伪类选择器 love-hate(a标签为例)
a:link：向未被访问的链接添加样式a:visited：向已被访问的链接添加样式a:hover：当鼠标悬浮在元素上时，向元素添加样式a:active：向被激活的元素添加样式（点击的时候）
7. 选择器的优先级
-
内嵌样式>嵌入外部样式表/内部样式表
- 嵌入外部样式表与内部样式表根据定义的先后顺序来定义，最后定义的优先（就近原则）
-
行内 > ID > Class > Tag(html标签选择符)
-
!important
例如： .box{ color:gray !important; } -
组合选择器
- ID权重100
- class权重10
- Tag权重1
二、CSS的属性
1. 字体属性
-
font-family： 衬线字体（serif） 非衬线字体(sans-serif)
-
font-style ： 字体风格 normal(默认)/
italic(斜体)/oblique(强制变斜) -
font-weight ： 字体粗度 normal(默认)/
bold(加粗)/bodler(更粗)/lighter(细)/数字(>=600粗) -
font-variant： 字变形 noraml(默认)/small-caps(小型大写字母) -
font-size ： 字体大小
-
font ： 统一设置
font:[style/weight/variant] size family 注意： 前面三个可写可不写，后面两个必须写且顺序不可交换（必须放在其他属性后面）
2.颜色属性
- color 值：字母/rgb/16进制
3.文本属性
-
letter-spacing：字母/符间距- normal(默认0px)
- 像素：-0.3px(
允许使用负值)
-
word-spacing：字/ 单词间距- normal(默认0px)
- 像素：1.5px(
允许使用负值)
-
text-decoration：文本能修饰- none（默认）
- underline 下划线
- overline 上划线
- line-through 中划线 删除线
- blink 定义闪烁的文本
-
text-align:横向排列- left(默认)
- right
- center
- justify(两端对齐)
-
vertical-align：垂直对齐方式(（图片和文字在一行时多使用 ）)- baseline:将支持valign特性的对象的内容与基线对齐
- sub：垂直对齐文本的下标
- super：垂直对齐文本的上标
- top：将支持valign特性的对象的
内容与对象顶端对齐 - text-top：将支持valign特性的对象的
文本与对象顶端对齐 - middle：将支持valign特性的对象的内容与对象中部对齐
- bottom：将支持valign特性的对象的文本与对象底端对齐
- text-bottom：将支持valign特性的对象的文本与对象顶端对齐
<percentage>：百分比指定由基线算起的偏移量。可以为负值，基线对于百分数来说就是0%<length>：用长度值指定由基线算起的偏移量。可以为负值。基线对于数值来说为0（CSS2）
-
text-indent：文本的首行缩进- 常用单位
- 像素（50px）
- 百分比
- em(2em代表两个字)
- 常用单位
-
line-height：设置行间距离，不允许使用负值- 常用单位
-
normal(默认)
-
数字
-
百分比
-
px
-
em
注意： line-height:200px; font:30px "Mcrosoft"; 此时line-height的设置失效 因为font把它给覆盖了 可使用以下方式同时设置： font:30px/200px "Microfost";
-
- 常用单位
-
text-transform：设置对象中的文本的大小写- none(默认)
- capitalize(每个单词以大写字母开头)
- uppercase(转换为大写字母)
- lowercase(转换为小写字母)
-
text-shadow：向文本添加阴影例如：(可以同时设置多个阴影，中间用“,”分开) h2{ text-shadow：5px 5px 5px green,...; 水平方向 竖直方向 模糊度 模糊颜色 }
4.背景属性
-
background-color
- 设置背景色，或设置为transparent（透明）
-
background-image
- 背景图片(支持多重背景图)
- url("图像地址1"),url("图像地址2")
- 背景图片(支持多重背景图)
-
background-repeat
- 背景重复
- repeat:背景图像在纵向和横向上重复平铺
- no-repeat:背景图像不重复平铺
- repeat-x:横向重复平铺
- repeat-y:纵向重复平铺
- 背景重复
-
background-attachment
- 背景附件
- scroll:背景图像是随对象内容一起滚动，是默认选项
- fixed:背景图像固定在页面上静止不动，只有其他的内容随滚动条滚动
- 背景附件
-
background-position(背景不能平铺)
-
背景位置（如果只给一个值，另一个默认为center）
例如： background-position: left top; （left/center/right）水平位置 垂直位置(top/center/bottom) background-position: 20px 50%; （单位可以是px/百分比%） x坐标 y坐标
-
-
background
- 综合属性
-
background：背景颜色|背景图像|背景重复|背景附件|背景位置（各属性没有先后顺序，以空格分开）
例如： background:red url('./123.png') no-repeat 100px 10px;
-
- 综合属性
5.边框属性
-
border-style
- 边框样式
-
border-top-style
-
border-right-style
-
border-bottom-style
-
border-left-style
样式有如下： dotted(点线) dashed(虚线) solid(实线) double(双实线) groove(3D凹线) ridge(3D凸线) inset(内嵌效果) outset(外凸效果，3D浮出线)
-
- 边框样式
-
border-color
- 颜色值
- transparent(透明色)
-
border-width
- 宽度（px）
-
border- 边框综合（顺序随便）
- border：边框颜色 边框样式 边框宽度
- 边框综合（顺序随便）
-
border-radius- 圆角边框
- border-radius:25px 10px 15px 30px (四个角为原形)
- border-radius:50px 10px(对称圆角边框)
- 圆角边框
-
border-image（CSS3）
- 花样边框
- url('图片地址')
- 图片使用的边框线宽度（数字）
- 图片宽度（数字）可省略
- 图片填充方式 （可省略）
-
stretch：把图片拉伸到整个边框区域
-
repeat:重复填充
-
round：重复并自动调整图片大小
例如： border-image:url('aa.png') 35 25 25 15; border-image:url('bb.png') 36 round;
-
- 花样边框
6.鼠标光标属性
cursor(该属性写在dody中就可以了)-
cursor：auto(默认值)/形状取值/url('图像地址');
形状取值： text：文字选择器 crosshair：十字架 wait:等待 help：帮助 pointer：小手 move progress
-
7.列表属性
-
list-style-type
- disc：实心圆
- circle：空心圆
- square：小方框
- decimal：阿拉伯数字1,2,3...
- lower-rowan：小写罗马数字i ,ii, iii...
- upper-roman：大写罗马数字I,II,III...
- lower-alpha：小写英文字母a，b,c..
- upper-alpha：大写英文字母A,B,C..
-
list-style-image
- none/url('图片地址')
-
list-style-position
- inside：标示在li里面
- outside:标示在li外面
-
list-style
-
复合属性(经常用none表示不设置)
例如 ol{ list-style:square inside url('cat.jpg'); }
-
8.表格属性（设置给table）
-
table-layout
- 表格布局方式
auto(默认)布局将基于各单元格的内容，可能定义单元格宽度为100px，但结果不是100px。表格在每一单元格读取计算之后才会显示出来，速度很慢。fixed平布局是仅仅基于表格的宽度，表格边框的宽度，单元格间距，列的宽度，而和表格内容无关。
- 表格布局方式
-
border-collapse
- 行和单元格的边是合并还是独立
- separate：独立（默认）
- collapse：合并
- 行和单元格的边是合并还是独立
-
border-spacing(不设置border-collapse时才有用)
- 当表格边框独立时，行和单元格的边框在横向和纵向上的间距
- 该属性作用等同于标签属性cellspacing(单元格边框)。
border-spacing:0;等同于cellspacing="0" - 只有当表格边框独立（即
<'border-collapse'>属性等于separate时）此属性才起作用 - 如果提供全部两个length值时，第一个作用于横向间距，第二个作用于纵向间距
- 如果只提供一个值时，作用于横向和纵向上的间距
-
caption-side
- 表格标题在table上面还是下面
- top
- bottom
- 表格标题在table上面还是下面
-
empty-cells
- 没有内容的单元格隐藏还是显示
- show(默认)
- hide
- 没有内容的单元格隐藏还是显示
三、CSS-精灵图
-
通过使用background的坐标来设置截取图片的哪部分作为背景图（坐标为负）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>精灵图</title> <style> p{ width:25px; height:25px; border:1px solid #ccc; } .p1{ background:url('../../dist/images/iconlist.png') no-repeat 0px -125px; } .p2{ background:url("../../dist/images/iconlist.png") no-repeat -25px -225px; } .p3{ width:55px; height:55px; background:url("../../dist/images/fenju.jpg") no-repeat -27px -95px; } </style> </head> <body> <h1>精灵图</h1> <hr> <p class="p1"></p> <p class="p2"></p> <p class="p3"></p> </body> </html>
