css中文名称：层叠样式表。

英文全称： Cascading Style Sheets,简称css。

css的作用：

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

目录


1.css选择器

（1）标签选择器

（2）类（class）选择器

（3）id选择器

（4）三种选择器的优先级：

2.网页中引入css样式

（1）：内联（行内）样式

（2）：内部样式表

（3）：外部样式表

(4)三种css样式优先级

3.基础样式

(1):字体样式

（2）.文本样式

(3).鼠标样式（cursor）

(4).背景样式 

（5）.列表样式

4.css伪类

5.css高级选择器

6.边框样式

（1）

（2）边框颜色：

 （3）边框粗细：

（4）边框简写：

7.盒子模型

（1）内边距（padding）

（2)外边距（margin）

8.display属性

9.overflow属性

10.动画

11.css浮动

12.css定位

补充

1.css选择器

（1）标签选择器

html中的所有标签都可以作为选择器

例如：

h1{}
h2{}

（2）类（class）选择器

body内的所有标签都有class属性。

注：class名称可以重复使用

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

例如：

<style>
    .nav{
    }
</style>
<h1 class = "nav"><h1>

bod

（3）id选择器

body内所有元素都有id属性。

注：一个页面中只能使用一个id名，id名必须是唯一。

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

<style>
    #nav{
    }
</style>
<h1 id= "nav"><h1>

（4）三种选择器的优先级：

id选择器>类选择器>标签选择器

2.网页中引入css样式

（1）：内联（行内）样式

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

例如：

<div style=“color:red;font-size:20px;”>
         这是内联样式
</div

（2）：内部样式表

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

（3）：外部样式表

将css样式单独写入到一个 xxx.css外部文件中。

（1）使用link标签引入外部css文件。

<link rel="stylesheet"  type="text/css" href="style.css"/>

（2）使用@import导入外部css文件

(4)三种css样式优先级

内联样式>内部样式表>外部样式表

注：同一个标签中使用三种方式引入CSS样式，浏览器会优先执行内联样式。

3.基础样式

(1):字体样式

font-family

字体类型；例如："宋体"

font-size

字体大小；例如："20px"

font-style

字体风格；例如："italic"（倾斜）

font-weight

字体粗细；例如："300"(100-900)

（2）.文本样式

属性

属性值

举例

color

设置文本颜色

*red

*#362596

*rgb(32,250,50)

text-aligin

设置元素水平对齐方式

*left

*center

*right

text-indent

设置首行文本缩进

*20px

line-height

设置文本的行高

*30px

text-decoration

设置文本装饰

none,标准文本

underline：定义文本下划线

overline：定义文本上划线

line-through:定义穿过文本的一条线

(3).鼠标样式（cursor）

defalut

默认光标

IOS CSS样式fixed失效 css样式效果_选择器

pointer

超链接指针

IOS CSS样式fixed失效 css样式效果_内边距_02

wait

等待状态IOS CSS样式fixed失效 css样式效果_前端_03

help

指示可用的帮助

IOS CSS样式fixed失效 css样式效果_内边距_04

text

指示文档IOS CSS样式fixed失效 css样式效果_内边距_05

crosshair

鼠标呈十字状

IOS CSS样式fixed失效 css样式效果_内边距_06

例如：cursor：pointer;

(4).背景样式 

background-color

背景颜色

*red

*#362596

*rgb(32,250,50)

background-image:url(图片路径)

背景图片地址

*绝对路径

*相对路径

background-repeat

背景重复样式

*no-repeat  不重复

*repeat-x   水平重复

*repeat-y   垂直重复

*repeat      默认重复

background-position                   

背景定位

*像素：px

*水平方向：left、center、bottom

 背景样式简写：

  background:背景地址，图片重复方式，背景颜色，背景定位

*  网页开发中比较常用

*  属性值之间没有先后顺序

（5）.列表样式

list-style-type(无序列表)

*disc实体圆心（默认）

*circle空心圆

*square实体圆心

*none无列表标记

list-style-image

自定义列表标记为图片

url(图片路径)

list-style-position

列表标记定位

outside

inside

list-style-type(有序列表)

1/a/A/i/I

列表样式简写：

                list-style: 1.列表标记属性 2.自定义列表标记图片 3.列表标记定位

4.css伪类

link

单机访问前

visited

单机访问后

hover

鼠标悬浮其上

active

单击未释放

div.op a:hover{
        color: #be1111;
    }

5.css高级选择器

并集选择器

多个选择器通过逗号连接

div,span,.one,#hello{}

交集选择器

由两个选择器连接构成，选中二者范围的交集，两个选择器之间不能有空格





第一个必须是标签选择器，第二个必须是类选择器或者 ID 选择器

div.codeup{

          color:red;

          font-size:20px;

    }



•


    div#codeup{

          color:red;

          font-size:20px;

    }

后代选择器

外层写在前面，内层写在后面

div  .codeup{

         color:red;

         font-size:20px;

     }

子集选择器

通过>连接在一起

仅仅作用于子元素


     div>.codeup{

color:red;

         font-size:20px;

     }

属性选择器

选取带有指定属性和值得元素

input[name]{

border:1px soild red;

    }


    input[type=”text”]{

border:1px soild red;

    }


    div[ class=“codeup”]{

color:red;

    }

6.边框样式

（1）

属性

说明

样式值

border-top-style

上边框样式

*none:无边框

*solid：实线边框

*dashed：虚线边框

*dotted:双线边框

*hidden:与none相同，应用于解决边框冲突

border-right-style

右边框样式

border-bottom-style

下边框样式

border-left-style

左边框样式

border-style

设置四个边框样式

（2）边框颜色：

        border-left-color,border-top-color,border-right-color,border-bottom-color。

        border-color：同时设置四个边框颜色

 （3）边框粗细：

        

border-top-width

上边框

border-right-width

右边框

border-bottom-width

下边框

border-left-width

左边框

border-width

简写

（4）边框简写：

     border-top,border-right,border-bottom,border-left.同时设置各个边框的粗细，颜色，样式

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

7.盒子模型

（1）内边距（padding）

padding-top

顶部内边距

padding-right

右侧内边距

padding-bottom

底部内边距

padding-left

左侧内边距

        box-sizing属性：

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

        *默认，撑大容器以改变内边距

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

        *大小不变，改变元素位置以改变内边距

（2)外边距（margin）

        

margin-top

顶部外边距

margin-left

左侧外边距

margin-right

右侧外边距

margin-bottom

底部外边距

8.display属性

*控制元素显示和隐藏

*块级元素和内联元素的转变

none

元素不被显示

inline

元素显示为内联元素

block

元素显示为块级元素

inline-block

元素显示为行内块元素

9.overflow属性

*超出容器的内容

overflow:auto;  自适应，如果内容超出容器，会以滚动条的形式

overflow：hidden;超出内容被隐藏

注：word-break:break-all;   容器中英文与数字不会自动换行，该属性能使之换行

10.动画

transition ：过度动画； 例如：transition: linear  0.5s all;  linear(匀速)

transform：将元素转为2d或3d；transform：scale(1.2); 缩放1.2倍

11.css浮动

float:left;左浮动

float:right;右浮动

clear属性：

*clear属性规定了在元素那一侧不允许有浮动元素

both

左右两侧不允许浮动元素

left

左侧不允许浮动元素

right

右侧不允许浮动元素

12.css定位

position属性：

        

static

默认值，没有定位

relative

相对定位

*不会脱离标准文本流

*基于自身原来的位置进行偏移

*元素基于top,left,right,bottom四个方位进行偏移

absolute

绝对定位

*会脱离标准文本流

*以最近的一个已经定位的祖先元素为基准进行偏移

*元素基于top,left,right,bottom四个方位进行偏移

fixed

固定定位

*相对于浏览器窗口进行定位，不会根据滚动条移动

*会脱离标准文本流

*元素基于top,left,right,bottom四个方位进行偏移

z-index属性：

*调整元素定位时重叠层的上下位置

*默认为0，值大的在值小的之上

css伪元素：

例：.one::after{content:""}        在类名为one的内容之后加内容

补充：

1.-wekit-appearance:none;  去掉浏览器提供的默认样式

2. outline:none;   去掉标签默认边框

3. box-shadow: 水平阴影距离，垂直阴影距离，阴影模糊距离，阴影颜色;

4.rgba(0,0,0,0.3)  调整透明度