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

  标签名{}    例如：p{}

3.类选择器          10

 .类值{}       例如：.content{}

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

4.id选择器          100

 #id值{}      例如：#con{}

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

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

.box div{}   类box里的所有div元素

(1).扩展：选择器直接子元素

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

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

7.分组选择器

选择器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）数值+单位

                数值       字体的倍数

缩写：

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        文本对齐方式

               left      默认   左对齐

               center      居中对齐

                right       右对齐

                justify      两端对齐

3.text-indent      文本缩进

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

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

         uppercase    全大写

        lowercase    全小写

        capitalize    首字母大写

5..text-overflow      文本溢出处理

      ellipsis      文本溢出以省略号显示

文本溢出以省略号显示

overflow:hidden;

text-overflow:ellipsis;

white-space:nowrap;  强制不换行

1. letter-spacing     字母与字母之间的距离   汉字与汉字之间的距离
2. word-spacing     单词与单词之间的距离
3. overflow         内容溢出处理   overflow-x  overflow-y

6.overfllow 溢出 

visible      默认 溢出部分可见

hidden       溢出部分隐藏

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

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    内边距  内补丁 内填充

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;   块级元素居中显示

1. background   背景

1. background-color    背景颜色
2. background-image   背景图片

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

1. background-repeat   背景图片是否平铺

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

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

c）repeat-x        水平平铺

d）repeat-y        垂直平铺

1. background-position    背景图片的位置

语法： x轴坐标  y轴坐标

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

b）百分比

c）数字+单位

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

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

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

b）数字+单位

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

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

1. background-origin     背景图片开始渲染的位置

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

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

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

1. background-attachment    背景图片是否固定

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

2）fixed     图片固定不动

缩写：

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

浮动

float   浮动

值：

1. none      默认  不浮动
2. left        左浮动
3. right       右浮动

其他：

伪类

:link   未访问的状态

:visited   访问后的状态

:hover    鼠标悬停时的状态

:active    鼠标激活时的状态

                                       LoVe HAte 爱恨原则

元素的相互转换

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

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

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

任何元素隐藏  display:none