zoukankan      html  css  js  c++  java

  • WEB前端--CSS

    一、认识CSS

    1、概念

    CSS（Cascading Style Sheet，层叠样式表），可以将网页制作的更加绚丽多彩。它可以有效的对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

    2、CSS优点：

    • 制作网页方便

    • 精确控制网页的内容形式

    • 样式丰富

    • 定义样式灵活多样

    二、使用CSS

    1、基本语法

    1
    2
    3
    4
    5
    选择符{
        样式属性：取值；
        样式属性：取值；
        ……
    }

    举例：

    1
    2
    3
    body {
        backgroud-color: red;
    }

    2、添加CSS方法

    共有四种方法：连接外部样式表、内部样式表、导入外部样式表和内嵌样式。

    2.1、连接外部样式表

    用<link>调用定义好的样式css文件

    1
    2
    3
    4
    5
    <head>
    ……
    <link rel=stylesheet type=text/css href=slstyle.css>
    ……
    </head>
    2.2、内部样式表

    调用在<head>内部定义好的样式，并且以<style></style>方式定义。

    1
    2
    3
    4
    5
    6
    7
    8
    <head>
    <style type="text/css">
    .style{
        color: red;
        font-size: 13px;
    }
    </style>
    </head>
    2.3、导入外部样式表

    将外部样式表文件导入内部样式表<style>里，用@import导入。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <head>
    <style type="text/css">
    .style{
        color: red;
        font-size: 13px;
    }
    @import slstyle.css
    </style>
    </head>
    2.4、内嵌样式

    直接混合在html标记里添加style参数，主要在body内实现。

    1
    2
    3
    4
    <body>
    <table style="color:red;margin-right:220px;">
    这是个表格
    </body>

    三、字体属性

    1、字体 font-family

    1
    font-family: "字体1","字体2",……

    浏览器会按自己支持的字体从左往右识别，如果都不识别，就用系统默认字体。

    2、字号 font-size

    1
    font-size: 大小的取值

    3、字体风格 font-style

    1
    font-style:样式的取值

    取值有三种：

    • normal--正常字体（默认）

    • italic--斜体显示文字

    • oblique--偏斜体（上两个的中间状态）

    4、加粗字体 font-weight

    相当于html里的<b>

    1
    font-weight:字体粗细值

    取值范围：(细-->粗)

    • normal-->bold-->bolder-->lighter-->number

    • 用数值：100~900

    5、小写字母转大写 font-variant

    1
    font-variant：取值

    6、字体复合属性

    多个属性写在一起

    1
    .h{font: bold italic "宋体"}

    四、颜色和背景

    1、颜色 color

    1
    .cl{color: #9900ff;}

    颜色取值参考RGB规范

    2、背景色 background-color

    1
    .bgc{background-color: #ff99ff;}

    3、背景图像 background-image

    1
    .bgi{background-image: url(image/ber.gif);}

    4、背景重复 background-repeat

    设置背景图像是否平铺，或如何平铺。

    1
    2
    3
    background-repeat：no-repeat;  #不平铺
    background-repeat: repeat-x    #横向重复
    background-repeat: repeat-y    #纵向重复

    5、背景附件 background-attachment

    设置背景图随对象滚动还是不动

    1
    2
    3
    4
    5
    6
    .g{
        background-image: url(der.png)
        background-attachment: scroll;  #默认跟随滚动
        or
        background-attachment: fixed    #固定不动
    }

    6、背景位置 background-position

    设置背景图像的位置

    1
    2
    3
    background-position: 位置取值（数字或关键字）
    例如：
    background-position: left top;

    7、背景复合属性 background

    1
    2
    background：取值
    background: url(img/ber.jpg) no-repeat left top;

    五、段落属性

    1、单词间隔 word-spacing

    1
    word-spacing: 3px;

    2、字符间隔 letter-spacing

    1
    letter-spacing: 3px;

    3、文字修饰 text-decoration

    共5种修饰方式

    1
    2
    3
    4
    5
    text-decoration: none;    #默认值，不修饰。
    text-decoration: underline;    #下划线
    text-decoration: overline;    #上划线
    text-decoration: line-through;    #删除线
    text-decoration: blink;    #文字闪烁

    4、垂直对齐方式 vertical-align

    共7中对齐方式：

    1
    2
    3
    4
    5
    6
    7
    vertical-align: baseline;    #浏览器的默认对齐方式
    vertical-align: sub;    #按文字的下标对齐
    vertical-align: super;    #按文字的上标对齐
    vertical-align: top;    #垂直靠上对齐
    vertical-align: text-top;    #使元素和上级元素的字体向上对齐
    vertical-align: middle;    #垂直居中对齐
    vertical-align: text-bottom;    #使元素和上级元素的字体向下对齐

    5、文本转换 text-tranform

    转换英文字母的大小写

    1
    2
    3
    4
    text-transform: none;    #使用原始值
    text-transform: capitalize;    #每单词第一个字母大写
    text-transform: uppercase;    #所有字母大写
    text-transform: lowercase;    #所有字母小写

    6、水平对齐 text-align

    1
    2
    3
    4
    text-align: left;    #左对齐
    text-align: right;    #右对齐
    text-align: cengter;    #居中对齐
    text-align: justify;    #两端对齐

    7、文本缩进 text-indent

    html中只能控制整体缩进，css能控制首行缩进及缩进的距离。

    1
    text-indent: 25px;    #数值或百分比

    8、文本行高 text-height

    行间距，行高值可以为长度、 倍数或百分比。

    1
    text-height: 25px;

    9、处理空白 white-space

    页面空白的处理方式

    1
    2
    3
    white-space: normal;    #默认值，将连续的多个空格合并。
    white-space: pre;    #源代码中的空格和换行符被保留，ie6有效。
    white-space: nowrap;    #强制在同一行内显示所有文本，直至结束或<br>

    10、文字反排 unicode-bidi、direction

    两个属性一起使用，设置对象的阅读顺序。

    1
    2
    3
    unicode-bidi: bidi-override;    #安装direction属性的值进行重排序
    unicode-bidi: normal;    #默认值
    unicode-bidi: embed;    #对象打开附加的嵌入层，direction属性的值指定嵌入层，在对象内部进行隐式重排序
    1
    2
    3
    direction: ltr;    #文字从左到右的顺序阅读
    direction: rtl;    #文字从右到左的顺序阅读
    direction: inherit;    #文本流的值不可继承
    1
    2
    3
    4
    5
    .k{
        font-size: 10pt;
        direction: rtl;
        unicode-bidi: bidi-override;
    }

    六、外边距与内边距属性

    盒子模型由Content（内容）、padding（内边距）、border（边框）和margin（外边框）4部分组成：



    1、上边距 margin-top

    1
    2
    margin-top: auto;    #默认值
    margin-top: 30pt;    #数值或百分比

    2、其它边距 margin-bottom、margin-left、margin-right

    1
    2
    3
    4
    5
    6
    7
    8
    <style type="text/css">
    img {
        margin-top:20pt;
        margin-right:50px;
        margin-bottom:10px;
        margin-left:50px;
    }
    </style>

    3、外边距复合 margin

    1
    2
    3
    4
    5
    <style type="text/css">
    img {
        margin: 20pt 50px 10px 50px;    #上、右、下、左
    }
    </style>

    4、顶端内边距 padding-top

    1
    padding-top: 间隔值;    #长度值或百分比

    5、其它内边距 padding-bottom、padding-right、padding-left

    1
    2
    3
    padding-bottom: 数值或百分比；
    padding-right: 数值或百分比；
    padding-left: 数值或百分比；

    6、内边距复合 padding

    1
    2
    3
    4
    5
    6
    <style type="text/css">
        body{
            padding: 50px 20% 30px 20%;
                     /*上、右、下、左*/
        }
    </style>

    七、边框属性

    边框有3个属性：边框的样式、边框的宽度和边框的颜色。

    1、边框样式 border-style

    1
    2
    3
    4
    5
    border-style: 样式值;
    border-top-style: 样式值;
    border-right-style: 样式值;
    border-bottom-style: 样式值;
    border-left-style: 样式值;

    边框样式取值：

    none

    默认值，无边框

    dotted点线边框
    dashed虚线边框
    solid实线边框
    double双实线边框
    groove边框具有立体感的沟槽
    rigde边框成脊形
    inset使整个边框凹陷，即在边框内嵌入一个立体边框
    outset使整个边框凸起，即在边框外嵌入一个立体边框


    2、边框宽度 border-width

    1
    2
    3
    4
    5
    border-width: 宽度值;
    border-top-width: 宽度值;
    border-right-width: 宽度值;
    border-bottom-width: 宽度值;
    border-left-width: 宽度值;

    取值范围：

    • medium--默认宽度

    • thin--小于默认宽度

    • thick--大于默认宽度

    3、边框颜色 border-color

    1
    2
    3
    4
    border-top-color: 颜色值
    border-right-color: 颜色值
    border-bottom-color: 颜色值
    border-left-color: 颜色值

    4、边框复合 border

    1
    2
    3
    4
    5
    border: 边框宽度 样式 颜色值；
    border-top: 上边框宽度 样式 颜色值；
    border-right: 右边框宽度 样式 颜色值；
    border-bottom: 下边框宽度 样式 颜色值；
    border-left: 下边框宽度 样式 颜色值；

    八、定位属性

    控制元素的位置，包括相对定位和绝对定位：

    • 相对定位：允许元素在相对于文档布局的原始位置上进行偏移；

    • 绝对定位：允许元素与原始文档布局分离且任意定位。

    1、定位方式 position

    1
    2
    3
    4
    position: static;    #默认值
    position: absolute;    #绝对定位，需要同时使用left、right、top和bottom属性。
    position: fixed;    #当页面滚动时，元素不随着滚动。
    position: relative;    #相对定位，对象不可层叠。

    2、元素位置 top ightottomleft

    1
    2
    3
    4
    top: auto|长度值|百分比
    right: auto|长度值|百分比
    bottom: auto|长度值|百分比
    left: auto|长度值|百分比

    auto是默认值，长度值包含数字和单位，也可使用百分比来设置。

    3、层叠顺序 z-index

    设置层的先后顺序和覆盖关系。默认z-index=1，表示在最底层。

    1
    z-index: auto|数字

    4、浮动属性 float

    设置文字在某个元素的周围，它能应用于所有的元素。

    1
    2
    3
    float: none    #默认值
    float: left    #元素浮动在文字的左边
    float: right   #元素浮动在文字的右边

    5、清除属性 clear

    指定元素周围是否可以有其它元素浮动

    1
    2
    3
    4
    clear: none;    #默认值，两边都可以有
    clear: left;    #左边不能有
    clear: right;    #右边不能有
    clear: both;    #左、右两边都不能有

    6、可视区域 clip

    只显示元素裁切出的区域。

    1
    2
    clip： auto    #默认值，不裁切
    clip: rect (数字)    #需要四个值（上 右 下 左），依据左上角坐标（0,0）计算的便宜数值，任意数值都可用auto替换，即此边不裁切。

    7、层的宽度和高度 width、height

    1
    2
    width: 450px;
    height: 50px;

    8、超出范围 overflow

    设置层内的内容超出层所容纳的范围时的显示方式

    1
    2
    3
    4
    overflow: visible;    #总是显示出来
    overflow: auto;    #超出时才显示滚动条
    overflow: hidden;    #隐藏超出的内容
    overflow: scroll;    #总是显示滚动条

    9、可见属性 visibility

    针对前套层的设置

    1
    2
    3
    visibility: inherit    #默认值，继承父对象的可见性
    visibility: visible    #子层总是可见
    visibility: hidden     #子层总是隐藏

    九、列表

    1、列表项目符号和编号 list-style-type

    1
    list-style-type: 值

    列表项目符号：

    disc默认值，实心圆
    circle空心圆
    square实心方块
    decimal阿拉伯数字
    lower-roman小写罗马数字
    upper-roman大写罗马数字
    lower-alpha小写字母
    upper-alpha大写字母
    none不适用任何项目符号或编号


    2、列表项目图像符号 list-style-image

    1
    2
    list-style-image: none;    #不指定图像地址
    list-style-image: url;    #指定图像地址

    3、列表项目符号编号缩进 list-style-position

    1
    2
    list-style-position: outside;    #列表项目标记放置在文本之外，且环绕文本不根据标记对齐
    list-style-position: inside;    #列表项目标记放置在文本之内，且环绕文本根据标记对齐

    ps：如果一个列表项目的左边距被设置为0，那么项目符号不会被显示，左边距最小设置为30。

    4、列表项目符号编号复合 list-style

    1
    list-style: list-style-image | list-style-position | list-style-type

    举例：

    1
    2
    3
    4
    5
    6
    <style type="text/css">
    ol{
        list-style: url(te.png)
        list-style: outside
    }
    </style>

    注意：当list-style-image和list-style-type都设定时，image优先，除非url指定的图片不能显示。

    十、光标属性 cursor

    在对象上移动鼠标指针采用的光标形状

    1
    cursor: auto | 形状取值 | url(图像地址)

    光标取值：

    default平台默认光标，通常是一个箭头
    hand竖起一只手指的手型光标
    crosshair简单的十字线光标
    text大写字母I的形状
    help带有问好标记的箭头
    wait等待
    e-resize向东的箭头
    s-resize向南的箭头
    w-resize向西的箭头
    n-resize
    		向北的箭头
    ne-resize向东北的箭头
    nw-resize向西北的箭头
    sw-resize向西南的箭头
    se-resize向东南的箭头
    auto默认值，根据浏览器而定

    十一、滤镜

    特效处理

    1、不透明度 alpha

    alpha属性用于设置对象内容的透明度，使图片产生透明渐变效果。

    1
    filter: alpha (参数1=值，参数2=值，……)

    alpha属性参数：

    opacity开始时的透明度，取值范围0~100，默认是0完全透明，100为不透明
    finishopacity结束时的透明度，取值范围0~100
    style设置渐变，0表示无渐变，1为直线渐变，2为圆形渐变，3为矩形渐变
    startx设置透明渐变开始点的水平坐标，默认值是0
    starty设置透明渐变开始点的垂直坐标
    finishx设置透明渐变结束点的水平坐标
    finishy设置透明渐变结束点的垂直坐标

    举例：

    1
    2
    3
    4
    5
    <style type="text/css">
    .g{
        filter:Alpha(opacity=70):    #不透明度为70
    }
    </style>

    2、动感模糊 blur

    设置对象的动态模糊效果

    1
    filter:blur(add=参数值，direction=参数值，strength=参数值)

    • add：是否显示原始图片

    • direction：动态模糊的方向，按顺时针方向，以45度为单位进行累计

    • strength：动态模糊的强度，整数，默认是5个

    1
    2
    3
    4
    5
    6
    .g{
        filter: blur(add=true,direction=100,strength=8);
    }
    .g1{
        filter: blur(direction=450,strength=150);
    }

    3、颜色透明处理 chroma

    将图片中的某种颜色转换为透明色，产生透明效果。

    1
    filter:chroma(color=颜色)
    1
    2
    3
    .y{filter:chroma(color=red);}
    ……
    <image class="y" src="ima.gif" width="247" height="100" />

    4、阴影效果 dropShadow

    指定的方向和位置上产生阴影效果

    1
    2
    3
    4
    filter:dropShadow(color=阴影色，offX=参数值，offY=参数值，positive=参数值)
    /*color控制阴影的颜色
    offX和offY分别设置阴影相对于原始图像移动的水平距离和垂直距离
    positive设置阴影是否透明*/
    1
    2
    3
    .y{
        filter: dropShadow(color=#3366ff,offX=2,offY=1,positive=1)
    }

    5、对象翻转 flipH、flipV

    1
    2
    filter: FlipH;    #水平翻转对象
    filter: FlipV;    #垂直翻转对象

    6、发光效果 glow

    1
    filter: Glow(color=颜色，strength=强度)    #强度取值范围1~255，默认是5

    7、灰度处理 gray

    彩色变成黑白

    1
    filter: gray;

    8、反相 invert

    将图片的颜色、饱和度以及亮度完全反转过来。

    1
    filter: invert;

    9、x光片效果 xray

    1
    filter: xray;

    10、遮罩效果 mask

    像印章一样的效果​

    1
    filter:Mask(color=颜色)；    #外围遮盖的颜色

    11、波形滤镜 wave

    波纹扭曲效果

    1
    2
    3
    4
    5
    6
    7
    8
    filter: wave(add=参数值，freq=参数值，lightstrength=参数值，phase=参数值，strength=参数值)；
    /*
    add  用于设置是否把对象按照波形样式打乱；
    freq  图片上的波浪数目；
    lightstrength  波浪的光照强度，0~100
    phase  波浪的起始位置
    strength  波浪强度大小
    */

    举例：​

    1
    2
    3
    .p{
        filter: Wave(add=true,freq=2,lightstrength=20,phase=50,strength=40);
    }
  • 相关阅读:
    IIS Express 配置缓存位置
    Docker Demo on Docker
    前端的哪些坑
    如何在container中编译dotnet的eShopOnContainers
    JQuery 常用的那些东西
    jQuery选择器大全
    Js 跨域CORS报错 Response for preflight has invalid HTTP status code 405
    WPF 通过透明度遮罩和变换制作倒影效果
    Ons 让人欲哭无泪问题，官方介绍不详
    如何转换任何配置文件 文件中的内容
  • 原文地址：https://www.cnblogs.com/daliangtou/p/5169169.html
Copyright © 2011-2022 走看看