CSS

CSS样式表的使用：

1）使用内部：

<style type="text/css"></style>

 

2）引入外部：

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

 

3）导入外部：

<style>  

@import "name.css";

@import url("name.css");

</style>

 

CSS选择器的使用：

1）属性选择器：

   元素名[att*=val]{ }:该元素定义了att属性，且属性值是包含val的字符串；

   元素名[att^=val]{ }:该元素定义了att属性，且属性值是以val开头的字符串；

   元素名[att$=val]{ }:该元素定义了att属性，且属性值是以val结尾的字符串；

 

2）伪元素选择器：

   伪元素主要有4个：first-line为某元素的第一行文字设置样式，first-letter为某元素中文字的首字母或第一个字设置样式

                   before在某元素之前插入一些内容，after在某元素之后插入一些内容。

   用法：元素名：伪元素名{ }

 

3）结构化伪类选择器：

   常用的结构化伪类选择器有：root将样式绑定到页面的根元素中；first-child对父元素的第一个子元素指定样式；

        not对某个结构元素使用样式，但排除这个结构元素下的子结构元素；empty指定当元素内容为空时使用的样式；

        nth-child(n)/target用户在单击了页面中的链接，并且跳转到target元素后生效/nth-of-type(n)/only-child;

   用法：  ：结构化伪元素名{ }

 

4）UI元素状态伪类选择器

   主要的及其功能：hover当鼠标移动到元素上面时元素所使用的样式,active鼠标在元素上按下还没松开时使用的样式,

      focus,enabled元素处于可用状态时,disable,read-only只读状态时,read-write,checked当radio或CheckBox处于选取状态时,

      default默认状态时的复选框控件的样式,indeterminate任何一个都没选取时的状态,selection选中时的状态;

   用法：<元素名>：状态伪类选择器名{ }；例：input[type="text"]：hover{ }

    

   兄弟选择器：

   用法：<子元素>-<子元素之后的同级兄弟元素>{ }

 

CSS中的一般用法：

    class----对应： .classname{}；标签----对应：标签名{}；id----对应:#idname{}

 content属性的使用：

   1，使用选择器插入内容，配合before等。例：p:before{  content:'字符串';}

   2，指定个别元素不进行插入。例：p.classname:before{ content:none;}

   3, 插入图像文件。例：p:before{ content:url(图片地址);}

   4, 使用content属性插入项目编号。例：<元素>:before{content:counter(计数器名)；}<元素>{ counter-increment:计数器名}

 

背景样式：

    background-size:auto|[<length>|<percentage>]|cover|contian            ：指定背景图像的大小

    background-clip:border-box|padding-box|content-box边框，补白，内容   :修改背景的显示范围或者背景的裁剪区域

    background-origin:border-box|padding-box|content-box                  ：指定绘制背景图像时的起点

    background-break: bounding-box|each-box|continuous内联元素，每一行，接着上一行：指定平铺内联元素背景图像时的循环方式

 

边框样式：

    border-top-colors,border-right-colors,border-bottom-colors,border-left-colors  顶部，右侧，底部，左侧边框的颜色

    border-image:none|<image>[<number>|<percentage>]{1,4}[/<border-width>{1,4}]/[stretch|repeate|round]{0,2}

    border-radius:none|<length>{1,4}[/<length>{1,4}]     靠样式就能完成圆角边框的绘制

 

盒模型：

    box-sizing:content-box|border-box|inherit   默认，IE传统，继承父元素

    text/box-shadow：<length><length><length><color>阴影水平偏移值，垂直偏移值，阴影模糊值，阴影的颜色

    overflow-x：visible |auto|hidden|scroll     不剪切内容也不添加滚动条，剪切内容并添加滚动条，不显示滚动条，横向显示

    resize:none|both|horizontal|vertical|inherit  允许用户自由缩放浏览器中某个元素的大小

    text-overflow:clip|ellipsis                   决定当前内容超过宽度时的显示方式

    word-break：normal|keep-all|break-all         设置文本自动换行的处理方法

    word-wrap:normal|break-word                   确定当前内容达到容器边界时的显示方式

    @font-face{属性：值}

    font-size-adjust：aspect比例值                修改字体而保持文字带下不发生变化

    

多列布局：

     columns:column-width,column-count            设置内容的列数，每列间隔距离和每列宽度

     column-width:<length>|auto                   单列显示的宽度

     column-count:<integer>|auto                  对象显示的列数

     column-gap：normal|<length>                  两列之间的间距

     column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color>   列与列之间的边框宽度，样式，颜色

     column-span:1|all                            跨列显示

     column-fill:auto|balance                     多列的高度是否统一

 

过渡：动态改变颜色的值

     transition-duration:time                     指定过渡的时间

     transition-property:none |all|property       指定要进行过渡的CSS样式的属性名称

     transition-delay：time                       指定过渡延迟的时间

     transition-timing-function:liear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n)指定过渡过中时间的计算方式

     transition：transition-property transition-duration transition-timing-function  transition-delay

 

变形：实现文字或图像的旋转，缩放，倾斜和平移的变形处理

     transform-style:flat|preserve-3d             嵌套元素在三维空间中如何呈现

     transform-origin:x-axis y-axis z-axis        更改转换元素的位置

 

平移：

      transform：translate(x-value,y-value)       

缩放：

      transform：scale(a,b)

倾斜：

      transform：skew(x-angel,y-angel)

旋转：

      transform:rotate(angel)

动画：

      @keyframes animationname{ keyframes-selector{css-styles;}}     一个关键帧表示动画过程中的一个状态