CSS知识点总结

一．什么是css？

CSS（Cascading Style Sheets）层叠样式表，专注于页面的表现层。

二．CSS引入方式

1.行内样式

在开始标签上加style=”样式属性名1:样式属性值1;样式属性名2:样式属性值2;...”

2.内嵌式

把所有的css样式都写在<style></style>标签内，<style></style>放在head标签内

3.外链式

把所有的css样式均放在一个css单独的文件里（后缀名xx.css）,在html里通过<link  rel="stylesheet"   href="css的文件路径" />来引入外部的css

优先级：

行内最大，其次 谁离标签近，谁的优先级高（最晚优先级最高）

三．选择器

1.统配符选择器 选择所有的元素          权重: 0.5

*{}

2.标签选择器          权重: 1

 标签名{}

3.类选择器          权重:10

 .类值{}

拓展： 选择器.类值{} div.box{} 类叫box的div元素

4.id选择器       权重:100

#id值{}

5.包含选择器（后代选择器）   权重相加

选择器a   选择器b{}   选择器a里的所有选择器b   选择器b只要被选择器a包着

 例：.box div{}    表示类box里的所有div元素

扩展：选择器直接子元素

 选择器a>选择器b{}    选择器a里的所有直接选择器b   父子关系

例： .box>span{}     表示类box里的所有直接子元素span

6.分组选择器

选择器1,选择器2,....{}

选择器权重：

行内样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器

四．字体样式

1. font-family                 字体系列

例如：font-famiy:”宋体”,”微软雅黑”,...

2.font-size                    字体大小

3.font-style                   字体风格

值：1）normal             默认 不倾斜

       2）italic                 斜体

      3）oblique             倾斜

4.font-weight             字体粗细

值：1）bold               粗体

       2）bolder           更粗体

      3）lighter            细体

      4）100-900        数值越大，字体越粗

5.line-height           行高

值：1）数值+单位

       2）数值          字体的倍数

缩写：

 font : font-style值   font-weight值   font-size值/line-height值   font-family值

五．文本样式

1. text-decoration           文本修饰

值：1）none                  无修饰

       2）underline           下划线

      3）line-through       中划线

      4）overline             上划线

2. text-align        文本对齐方式

值：1）left         默认    左对齐

       2）center    居中对齐

       3）right        右对齐

       4）justify      两端对齐

3.text-indent 文本缩进

值：数值+单位（px或em）      为正数时，缩进；为负数时，悬挂

4.text-transform            文本大小写转换

值：1）uppercase         全大写

       2）lowercase           全小写

       3）capitalize             首字母大写

5.text-overflow               文本溢出处理

值：1）ellipsis              文本溢出以省略号显示

       2）.....

文本溢出以省略号显示

overflow:hidden;

text-overflow:ellipsis;

white-space:nowrap;    强制不换行

6.letter-spacing            字母与字母之间的距离 汉字与汉字之间的距离

7.word-spacing            单词与单词之间的距离

8.overflow               内容溢出处理

值：1）visible            溢出部分可见

2）hidden                  溢出部分隐藏

3）scroll                    溢出部分以滚动条形式显示

4）auto                      溢出部分浏览器自动处理

六．盒子模型

1.border    边框

border-width    边框的宽度

border-color     边框的颜色

border-style      边框的样式

值：1）solid 实线

       2）double 双实线

       3）dotted 点状线

       4）dashed 虚线

         ....

缩写:

border : border-width值   border-style值   border-color值;

border-top    上边框

 border-bottom    下边框

 border-left       左边框

 border-right      右边框

2.padding   内边距   内补丁   内填充

padding-top    上内边距

 padding-bottom     下内边距

padding-left         左内边距

padding-right        右内边距

缩写：

 padding:值;            上下左右的内边距一样

 padding:值1 值2;           值1代表上下内边距，值2代表左右内边距

 padding:值1 值2 值3;             值1代表上内边距，值2代表左右内边距，值3代表下内边距

padding:值1 值2 值3 值4;              值1代表上内边距，值2代表右内边距，值3代表下内边距，值4 代表左内边距，按照顺时针方向。

3.margin     外边距

 margin-top     上外边距

margin-bottom      下外边距

margin-left       左外边距

 margin-right            右外边距

缩写：

 margin:                   同padding

 margin:0 auto;               块级元素居中显示

 4.background        背景

 1）background-color      背景颜色

 2）background-image        背景图片

          值：url(“图片的路径”)

3）background-repeat 背景图片是否平铺

           值：a）repeat 默认 水平、垂直都平铺

                  b）no-repeat 水平、垂直都不平铺

                  c）repeat-x 水平平铺

                  d）repeat-y 垂直平铺

4）background-position          背景图片的位置

 语法： x轴坐标    y轴坐标

 值：a）表示位置的英文单词             例如：left center right top bottom

        b）百分比

        c）数字+单位

5）background-size             背景图片的大小

 语法：背景图片的宽度    背景图片的高度

 值：a）百分比       （盒子的百分比）

 b）数字+单位

 c）cover          背景图片等比例的扩展至足够大，以使它铺满整个区域，可能会引起图片裁剪。

 d）contain          背景图片等比例地扩展至足够大，以使它的宽度或高度适应内容区域，可能会使区域留白。

 6）background-origin            背景图片开始渲染的位置

值：a）padding-box           默认         从左上角内边距的位置开始渲染

b）content-box               从内容区域左上角开始渲染

c）border-box                 从左上角边框区域开始渲染

 7）background-attachment                背景图片是否固定

 值：1）scroll          默认         图片随页面其余部分滚动而滚动

 2）fixed             图片固定不动

缩写：

 background : 背景颜色   背景图片   背景是否平铺   背景位置/背景大小   背景渲染位置   背景是否固定;

七．浮动

 float 浮动

值： 1)none    默认    不浮动

 2)left           左浮动

 3)right          右浮动

 清除浮动：

 1）给有浮动的子元素的父元素加height

 2）给有浮动的子元素的父元素加overflow:hidden

3）给所有有浮动的元素最后增加一个空元素，给该空元素加样式clear:left / right / both

 clear:left              清除左浮动

clear :right               清除右浮动

 clear:both                 清除左右浮动

clear:none           不清除浮动

4）给有浮动的子元素的父元素增加伪元素，在伪元素里增加样式：

::after{

        display:block;

        content:"";

        clear:both;

        }

八．定位

 position      定位

 值： 1）static            默认          不定位

2）relative              相对定位           相对于自己原来正常文档流的位置定位

3）absolute           绝对定位

       a）有绝对定位元素的包含框无定位，该元素相对于浏览器定位

       b）有绝对定位元素的包含框有定位，该元素相对于离自己最近的有定位的包含框定位

4）fixed                固定定位         始终相对于浏览器定位

借助left、right、top、bottom这四个值改变元素位置

 z-index           值：数字            z轴的排列顺序               z-index值越大越在最上层

其他：

 伪类

 :link           未访问的状态

 :visited           访问后的状态

 :hover         鼠标悬停时的状态

 :active         鼠标激活时的状态

 LoVe HAte   爱恨原则

元素的相互转换

其他元素转换为块级元素          display:block

其他元素转换为行内元素          display:inline （内边距都能设置 外边距只能设置左右的外边距）

 其他元素转换为行内块级元素            display:inline-block

任何元素隐藏           display:none

 CSS书写顺序

 1.位置属性(position, top, right, z-index, display, float等)

2.大小(width, height, padding, margin)

3.文字系列(font, line-height, letter-spacing, color- text-align等)

 4.背景(background, border等)

 5.其他(animation, transition等)