常用css样式

什么是CSS？

中文名称：层叠样式表 。       英文全称：Cascading Style Sheets ，简称CSS。

作用：在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

CSS选择器

1、标签选择器：html中的所有标签都可以作为选择器。 

2、类（class）选择器：body内的所有元素都有class属性。 

定义：body标签中的所有标签都有class属性。 注：class名称可以重复使用。  

使用：类（class）选择器使用标志符（句点）开头 后面写上类的名称。

3、id选择器：body内的所有元素都有 id 属性。

定义：body标签中的所有标签都有id属性。 注：一个页面中只能使用一个id名，id名必须是唯一。

使用：id选择器使用散列符号（#）开头，后面写上id的名称。

CSS选择器优先级

id选择器      >     类（class）选择器     >    标签选择器

网页中引入CSS样式的方式

1、内部样式表

将html代码和css样式做简单分离，在网页头部创建style标签，在其中写入css样式。

2、内联（行内）样式

html中的所有标签都有style属性，在style属性中直接写入css样式。

3、外部样式表

将css样式单独写入到一个 xxx.css外部文件中。 （1）使用link标签引入外部css文件。 （2）使用@import导入外部css文件

link标签引入外部样式文件

声明外部样式表：rel=“stylesheet”

引入的文件类型：type=“text/css”

引入的文件地址：href=”style.css“

CSS样式优先级

内联（行内）样式    >    内部样式表    >    外部样式表               就近原则

字体样式 

字体类型：font-family

字体大小：font-size

字体风格：font-style

字体粗细：font-weight

字体属性：font

单font的话必须按顺序：风格  粗细   大小   类型

文本样式

color   设置文本颜色       red        #362596      rgb(32,250,50)

line-height    设置文本的行高

text-align   设置元素水平对齐方式       left   center   right

text-indent 设置首行文本的缩进

text-decoration 设置文本的装饰      none:默认，标准文本       underline：定义文本下划线     overline：定义文本上划线              line-through：定义穿过文本的一条线

 鼠标样式（cursor）

defalut：默认光标

help：指示可用的帮助

pointer：超链接指针

text：指示文档

wait：等待状态

crosshair：鼠标呈现十字状    （在一些其他方面使用）

背景样式 

背景颜色：background-color    red    #536256    rgb(30,250,13)

背景图片地址：background-image:url(图片路径) 图片绝对路径 图片相对路径

背景重复方式：background-repeat          no-repeat   不重复            repeat-x    水平重复                    repeat-y    垂直重复             repeat    默认重复

 背景定位：background-position        像素：px                                                                              水平方向：left、center、right                              垂直方向：top、center、bottom

 背景样式简写 ：background：图片地址，图片重复方式，背景颜色，背景定位（网页开发中比较常用 属性值之间没有先后顺序）

  列表样式

 list-style-type                                                                                                                              （1）无序列表  disc 实体圆心（默认）   circle 空心圆     square 实体方心       none   无列表标记 （2）有序列表      1 / a / A / i  /  I

list-style-image        自定义列表标记为图片 属性值：url(图片路径)

list-style-position        列表标记定位    outside    inside

 列表样式简写  list-style    列表标记属性    自定义列表标记图片      列表标记定位

 CSS伪类

 CSS 伪类用于向某些选择器添加特殊的效果。

 伪类，顾名思义就是假的，不存在的类，不是由class=""定义的，但元素可以具有同样的一些属性，比如鼠标悬停， 那么此时就可以使用伪类，由浏览器指定它一个类，比如a:hover，效果近似于class="hover"，因为可以多次使用，   所以叫伪类而不是伪ID，还有就是伪类通常是动态产生的，临时的，并非常驻属性。

单击访问前 ：link         单击访问后：visited          鼠标悬浮其上：hover          单击未释放：active

CSS高级选择器  

并集选择器：多个选择器通过逗号连接而成

交集选择器：由两个选择器连接构成，选中二者范围的交集，两个选择器之间不能有空格 第一个必须是标签选择器，第二个必须是类选择器或者ID选择器

后代选择器：外层的选择器写在前面 ，内层的选择器写在后面 ，之间用空格分隔；标签嵌套时，内层的标签成为外层标签的后代；使用标签选择器、id选择器、类选择没有先后顺序

子元素选择器：通过  >  连接在一起而成 ，仅作用于子元素       

属性选择器：选取带有指定属性和值的元素

盒子模型

盒子模型之边框(border)

边框样式

 边框颜色

 边框粗细

上边框：border-top-width          下边框：border-bottom-width

右边框：border-right-width         左边框：border-left-width

 简写：border-width

边框简写：border 同时设置四个边框的粗细、颜色、样式

盒子模型之内边距(padding)

顶部内边距：  padding-top             底部内边距：padding-bottom

左侧内边距：padding-left               右侧内边距：padding-right

box-sizing属性

content-box：盒子的实际宽度和高度仅应用于元素内容，不包括内边距和边框

border-box：盒子的实际高度和宽度包括元素内容、边框和内边距

盒子模型之外边距(margin)

顶部外边距：margin-top              底部外边距：margin-bottom

左侧外边距：margin-left              右侧外边距：margin-right

网页文本流

1、标准文档流         2、浮动流          3、定位流

标准文档流

块级元素：<h1> - <h6>、<p>、<div>、列表等

效果：总是在新行上开始，占据一整行 高度，行高以及外边距和内边距都可控制 宽度始终是与浏览器宽度一样，与内容无关 它可以容纳内联元素和其他块元素

内联（行内） 元素：<span>、<a>、<img>、<em>、<strong>等

效果：和其他元素都在一行上 高，行高及外边距和内边距部分可改变 宽度只与内容有关 行内元素只能容纳文本或者其他行内元素 不可以设置宽高，其宽度随着内容增加，高度随字体大小而改变，内联元素可以设置外边距，但是外边距不对上下起作用，只能对左右起作用

display 属性：控制元素的显示和隐藏      块级元素和内联（行内）元素的转变                          none  设置元素不会被显示                      inline 元素显示为内联（行内）元素                              block 元素会被显示为块级元素               inline-block 行内块元素

浮动流

float 属性：left  元素向左浮动          right  元素向右浮动           none  默认值 元素不浮动

clear 属性：none  默认值，允许浮动元素出现在两侧      left  在左侧不允许浮动元素                                          right  在右侧不允许浮动元素                         both  在左、右两侧不允许浮动元素

 overflow 属性：auto  自适应，如果内容被修剪，则浏览器会显示滚动条来查看超出内容                                          scroll   内容会被修剪，但是浏览器会显示滚动条以便查看超出内容                                                  hidden  内容会被修剪，并且超出的内容是不可见的                                                                          visible   默认值。内容不会被修剪，会呈现在盒子之外

定位流

position 属性：position 属性规定元素的定位类型，定义建立元素布局所用的定位机制。 任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素是什么类型。 相对定位元素会相对于它在正常流中的默认位置偏移。                                                                                        static 默认值，没有定位          relative 相对定位​​​​​​​            absolute 绝对定位​​​​​​​          fixed 固定定位

z-index 属性：调整元素定位时重叠层的上下位置        z-index属性值：整数，默认为 0       设置了positon属性时，z-index属性可以设置各元素之间的重叠高低关系        z-index值大的层位于其值小的层上方