一、CSS概念：

什么是CSS,CSS说白了就是给页面添加样式,让整个页面变的好看起来的一种东西,用来定义网页外观，如字体、背景、颜色等

二、在页面中使用css的3种常用方式

1.行内样式

就是在一个标签内使用 style 属性,仅为某一个标签添加样式

例如

文字

2.内嵌式

就是将样式写在

ul{

list-style:none;

}

3.外链式

三种方式的优先级: 行内样式最高,其他方式则取决于放置的先后顺序,后面的会覆盖前面的

三、基本语法

1. CSS语法

选择器：   负责圈定范围，要修改的元素的集合

声明   ：  由属性和属性名组成，中间用冒号隔开(属性名:属性值)，用于设定具体的样式

格式   ：  选择器{属性1:值; 属性2:值; 属性3:值 ....}

2. CSS注释

样式里面注释就一种  /*注释 */

html中的注释

3. 单位

3.1 长度单位

em                 倍数  相对于默认字体大小16px

px            像素 pixel 屏幕上显示的最小单位(推荐)

%            百分比   设置font-size 相对于默认字体大小16px  设置宽度高度相对于父元素宽度

pt            标准长度单位    1pt=1/72英寸     用于印刷业， 非常简单易用

PPI(DPI) 每英寸像素点数 pixel(dot) per inch 表示清晰度、精度

cm/mm 厘米/毫米

附公式：px = pt * DPI /72

3.2 颜色单位

① 英文单词  red  green  yellow .....

② 十六进制 #rrggbb   00-ff

③ rgb  数字  百分比  rgb(0~255, 0~255, 0~255)

④ rgb(0%~100%,0%~100%,0%~100%)

四        选择器

1. HTML选择器

标签名{ }

2. ID选择器

#ID名{ }

一个页面一个ID名只能给一个元素

3. CLASS选择器

.class名{ }

4. 关联选择器

选择器 选择器{ }

5. 组合选择器

选择器,选择器,选择器....{ }

6. 伪元素选择器(IE6 仅支持a标签)

选择器:hover    鼠标悬停在上面(重用)

选择器:active    鼠标点击的时候

选择器:visited    鼠标点击过后

选择器:link        开始状态

选择器补充：

1. 元素选择符

通配符选择符*{

padding:0;}

类型选择符

ID选择符

类选择符

2. 关系选择符

包含选择符    E F

子选择符      E>F

相邻选择符    E+F

兄弟选择符    E~F

3. 属性选择符

E[attr]

E[attr=""]

E[attr^=""]

E[attr$=""]

E[attr*=""]

E[attr~=""]

E[attr|=""]

4. 伪类选择符

E:link        鼠标没有放上去时

E:visited     访问完后

E:hover       鼠标放上去时

E:active      点击时

E:focus       获取焦点时

E:lang(fr)

E:not(s)      除了

E:root

E:first-child

E:last-child

E:only-child

E:nth-child(n)

E:nth-last-child(n)

E:first-of-type

E:last-of-type

E:only-of-type

E:nth-of-type(n)

E:nth-last-of-type(n)

E:checked

E:disabled

E:enabled

E:target

5. 伪对象选择符

E::first-letter

E::first-line

E::after

E::before

E::input-placeholder  (加私有前缀)

E::selection

五     CSS常见属性和值

1. 字体属性

font                    设置字体所有的属性   font:[font-style] || [font-weight] || [font-variant] ?

font-family            设置字体库(黑体 宋体 微软雅黑.....)

font-size            设置大小(px em % pt in cm mm)

font-style           设置字体风格    值： normal(正常 默认)   italic(斜体)   oblique(斜体)

font-weight             设置字体粗细    值：     normal(默认)  bold(粗)  bolder(更粗)  lighter(细)   100-900(数值大于600是加粗)

font-variant         设置字体变形   normal  small-caps(小写变大写)

2. 颜色属性

color    设置字体颜色(四种表示颜色的方法)

3. 背景属性

background

综合写法

background: [color] [image] [repeat] [position] [attachment]

background-color                设置背景颜色    颜色单位

background-image                设置背景图片   url('地址')

background-repeat                设置背景图片平铺方式            repeat(默认值)        no-repeat   repeat-x   repeat-y

background-attachment        设置背景图片附加信息            值：     scroll(默认)        fixed

background-position            设置背景图片位置                    left/right/center/number px top/center/bottom/number px

4. 文本属性

letter-spacing  字母与字母之间的间距

word-spacing    单词与单词之间的间距

text-decoration 对文本划线的控制 overline  上划线  underline  下划线 line-through 中划线  none 没有线

text-align      文本的水平对齐方式  left  right    center justify

vertical-align  文本的垂直对齐方式,不太常用,一般文本的垂直对齐我们使用的是行高=框的高度     baseline | sub | super | top | text-top | middle | bottom | text-bottom | |

text-indent     首行缩进

line-height 重要 文本的垂直对齐方式

word-wrap       当一个单词到达边际时没显示完的处理方式

normal 溢出  break-word 换行显示

text-transform  大小写转换  none capitalize 首字母大写  uppercase 全部大写 lowercase 全部小写

5. 边框属性

综合写法

border :边框宽度 边框样式 边框颜色

border :10px solid red

[ border-width ]： 设置或检索对象边框宽度。

[ border-style ]： 设置或检索对象边框样式。

[ border-color ]： 设置或检索对象边框颜色。

border-left:

border-left-style:

border-left-color:

border-left-width:

border-right:

border-top:

border-bottom:

6. 鼠标光标属性

cursor    设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

属性值   auto   pointer  move  crosshair  wait  help   text  not-allowed

7. 列表属性

[ list-style-type ]： 设置或检索对象的列表项所使用的预设标记

[ list-style-image ]： 设置或检索作为对象的列表项标记的图像

[ list-style-position ]： 设置或检索作为对象的列表项标记如何根据文本排列

list-style   综合写法

list-style：[ list-style-image ] || [ list-style-position ] || [ list-style-type ]

一般给一个列表中的列表项添加图片使用的是背景图片的方式

8. 表格属性  width  height border.....

1)table-layout  固定每列的宽度

属性值

auto： 不固定

fixed： 固定

2)border-collapse 设置或检索单元格的边框是否合并

属性值

separate： 边框独立  默认值  不合并

collapse： 相邻边被合并  合并

3)border-spacing：单元格的边框与边框之间的距离

只有border-collapse的属性值是separate：的时候,border-spacing属性才能生效

4)caption-side：top | right | bottom | left

设置或检索表格的caption标题在哪个方向显示

5)empty-cells 当单元的内容为空是,是否显示边框

属性值有两个 show 默认值显示 hide 不显示