CSS01基础

阅读量：5335 次

发布时间：2019-06-15

本文共 5444 字，大约阅读时间需要 18 分钟。

回顾

结构标签

html

body

head

头部标签

meta

title

link

格式标签

center

列表标签

文本标签

strong

blockquote

cite

code

address

abbr

.......

超链接

图像

area

表格标签

table

caption

thead

tbody

tfoot

colgroup

表单标签

form

input

select

option

textarea

button

fieldset

legend

框架分帧

iframe

HTML全局属性

title

class

style

一、CSS 层叠样式表

1.CSS的使用方式

写在标签内的style属性中行内式内联式
```
      
```

写在 <style> 标签内

写到外部css文件中，用<link>关联到HTML中
```
      
```

@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 ：统一设置

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(默认)

数字

百分比

注意：  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值时，第一个作用于横向间距，第二个作用于纵向间距
- 如果只提供一个值时，作用于横向和纵向上的间距