• CSS


    CSS

    CSS简介

      层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

      CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

    css特点

      CSS为HTML标记语言提供了一种样式描述,定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。
    总体来说,CSS具有以下特点:
      1:丰富的样式定义
    CSS提供了丰富的文档样式外观,以及设置文本和背景属性的能力;允许为任何元素创建边框,以及元素边框与其他元素间的距离,以及元素边框与元素内容间的距离;允许随意改变文本的大小写方式、修饰方式以及其他页面效果。
        2:易于使用和修改
    CSS可以将样式定义在HTML元素的style属性中,也可以将其定义在HTML文档的header部分,也可以将样式声明在一个专门的CSS文件中,以供HTML页面引用。总之,CSS样式表可以将所有的样式声明统一存放,进行统一管理。
    另外,可以将相同样式的元素进行归类,使用同一个样式进行定义,也可以将某个样式应用到所有同名的HTML标签中,也可以将一个CSS样式指定到某个页面元素中。如果要修改样式,我们只需要在样式列表中找到相应的样式声明进行修改。
      3:多页面应用
    CSS样式表可以单独存放在一个CSS文件中,这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件,在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。
        4:层叠
    简单的说,层叠就是对一个元素多次设置同一个样式,这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表,而某些页面中的某些元素想使用其他样式,就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写,在浏览器中看到的将是最后面设置的样式效果。
      5:页面压缩

    在使用HTML定义页面效果的网站中,往往需要大量或重复的表格和font元素形成各种规格的文字样式,这样做的后果就是会产生大量的HTML标签,从而使页面文件的大小增加。而将样式的声明单独放到CSS样式表中,可以大大的减小页面的体积,这样在加载页面时使用的时间也会大大的减少。另外,CSS样式表的复用更大程度的缩减了页面的体积,减少下载的时间。

    css工作原理

      CSS是一种定义样式结构如字体、颜色、位置等的语言,被用于描述网页上的信息格式化和现实的方式。CSS样式可以直接存储于HTML网页或者单独的样式单文件。无论哪一种方式,样式单包含将样式应用到指定类型的元素的规则。外部使用时,样式单规则被放置在一个带有文件扩展名_css的外部样式单文档中。
      样式规则是可应用于网页中元素,如文本段落或链接的格式化指令。样式规则由一个或多个样式属性及其值组成。内部样式单直接放在网页中,外部样式单保存在独立的文档中,网页通过一个特殊标签链接外部样式单。

      名称CSS中的“层叠(cascading)”表示样式单规则应用于HTML文档元素的方式。具体地说,CSS样式单中的样式形成一个层次结构,更具体的样式覆盖通用样式。样式规则的优先级由CSS根据这个层次结构决定,从而实现级联效果。

    一,css四种引入方式

    1:行内间引用

      直接将css代码写在指定标签内部。

    <!--第一种引入方式:-->
    <div style="color: darkred;font-size: 50px">hello kelvin</div>
    

     2:内嵌式

      在head标签内添加一个style标签,在style标签内写css代码。

    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">
            p{
                color:#f40;
                background-color: gray;
            }
            a{
                text-decoration: none;
            }
        </style>
    </head>
    

     3:导入式

      导入外部样式单的功能与链接外部样式单的功能差不多,只是语法上存在差别。导入外部样式单主要通过@import方式导入CSS文件,有两种导入方式 。

      a、在style元素中导入CSS文件
    <style type="text/css">    
         @import "CSS样式文件的绝对地址";
         @import url("样式文件的绝对地址");
     </style>   
    

      url可省略,所以只需指定样式单地址即可,在标准CSS的语法中,@import还有sMedia属性,用于指定CSS的可作用的设备,目前还没得到广泛的支持,所以sMedia可以不写。 

      b、在CSS文件中再导入CSS文件
    /*某个CSS文件*/
    @import "另一个CSS文件的地址";
    .test{
          100px;
         height: 100px;
         line-height: 20px;
         background-color: red; 
    }
    

       在CSS文件中再导入CSS文件,会给服务器造成太大的文件请求压力,最好不要这样做。 @import是由CSS提供的一种导入样式的方式,当页面被加载时,@import会等到页面全部被加载完成时再加载CSS样式,所以在页面还未加载完成期间,页面还没有CSS样式效果,会导致“屏闪”,通过@import导入的CSS样式是无法用DOM去控制的。

    4:链接式

      就是将一个.css文件引入到HTML文件中,但它与导入式不同的是链接式使用HTML规则引入外部CSS文件,它在网页的<head></head>标签对中使用<link>标记来引入外部样式表文件。

    <link type="text/css" rel="stylesheet" href="CSS样式文件的地址">
    

       **必须有href属性,用于指定需要引入的CSS文件的路径 。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件,因此显示出来的网页从一开始就是带样式的效果的,它不会象导入式那样先显示无样式的网页,然后再显示有样式的网页,这是链接式的优点。

      使用CSS样式时,尽量将CSS代码与HTML代码分离,css的引入最好使用链接式,即最好使用引入外部CSS文件的方式。

    二,css选择器

     1:基本选择器

    1:* 表示匹配所有标签
    例:*{
                color: red;
            }
    效果:所有标签内容字体颜色变红。
    2:标签名 表示匹配指定名称的标签
    例:p{
                color:red;
            }
    效果:所有p标签内的字体颜色变红。
    3:"#"+id 表示匹配指定id的标签。
    例:#div1{
                color: red;
            }
    效果:id名为div1的标签内容字体颜色变红。
    4:"."+class名 表示匹配指定类名的标签。
    例:.class1{
                color: red;
            }
    效果:class名为class1的标签内容字体颜色变红。
    
    注:基本选择器可以组合使用。例如:div.div1{color:red} 选择div标签中id为div1的标签。
    

     2:组合选择器

    E,F表示基本选择器
    1:E,F(并列选择器) 表示筛选E和F两个或两类标签,对其进行同样的操作。
    例: p,#div1{
                color:green;
            }
    效果:p标签和id为div1的标签内容字体颜色变红。
    2:E F(后代选择器)表示筛选E下面的F标签。
    例: div .goods{
                color:green;
            }
    效果:div标签内部的class名为goods的标签内容字体颜色变红。
    3:E>F (父子选择器) 筛选E的下一级的F标签
    例: div>.goods{
                color:green;
            }
    效果:div标签下一级的class名为goods的标签内容字体颜色变红。
    4:E+F(毗邻选择器) 筛选紧随E之后的同级元素F
    例:.div1>.div2{
                color: red;
            }
    效果:只会选择class=div1子代的class=div2的标签。
    

     注意(嵌套规则):

      1:块级标签可以嵌套块级标签和行级标签,但是行级标签只能嵌套行级标签。

      2:特殊的块级标签只能嵌套行级标签,不能嵌套块级标签。h* p dt

      3:li内可以嵌套div

      4:块级标签与块级标签并列,行级标签与行级标签并列。

    3:属性选择器

    E[att]         匹配所有具有att属性的E元素,不考虑它的值。(注意:E在此处可以省略,比如“[cheacked]”。以下同。)   p[title] { color:#f00; }
     
     E[att=val]     匹配所有att属性等于“val”的E元素                            div[class=”error”] { color:#f00; }
    
     E[att~=val]    匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素      td[class~=”name”] { color:#f00; }
    
     E[attr^=val]    匹配属性值以指定值开头的每个元素                     div[class^="test"]{background:#ffff00;}
    
     E[attr$=val]    匹配属性值以指定值结尾的每个元素                     div[class$="test"]{background:#ffff00;}
    
     E[attr*=val]    匹配属性值中包含指定值的每个元素                     div[class*="test"]{background:#ffff00;}
    

     4:伪类

      CSS伪类是用来给选择器添加一些特殊效果。

    anchor伪类:专用于控制链接的显示效果

    a:link(没有接触过的链接),用于定义了链接的常规状态。
    
    a:hover(鼠标放在链接上的状态),用于产生视觉效果。
    
    a:visited(访问过的链接),用于阅读文章,能清楚的判断已经访问过的链接。
    
    a:active(在链接上按下鼠标时的状态),用于表现鼠标按下时的链接状态。
    
    伪类选择器 : 伪类指的是标签的不同状态:
    
               a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态
    
    a:link {color: #FF0000} /* 未访问的链接 */
    
    a:visited {color: #00FF00} /* 已访问的链接 */
    
    a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
    
    a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }
    

     示例:当鼠标移入div盒子内,上半部分背景色变红。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">
            #outer{
                 100px;
                height: 200px;
                background-color: green;
            }
            #top{
                 100px;
                height: 100px;
                background-color: green;
            }
            #bottom{
                 100px;
                height: 100px;
                background-color: green;
            }
            #outer:hover #top{
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div id="outer">
            <div id="top"></div>
            <div id="bottom"></div>
        </div>
    </body>
    </html>
    

     before after伪类 :

    :before    p:before       在每个<p>元素之前插入内容
    :after     p:after        在每个<p>元素之后插入内容
    
    p:before        在每个 <p> 元素的内容之前插入内容                    p:before{content:"hello";color:red}
    p:after         在每个 <p> 元素的内容之前插入内容                    p:after{ content:"hello";color:red}
    

     5:css优先级和继承

    CSS优先级:

    所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序。

    样式表中的特殊性描述了不同规则的相对权重,它的基本规则是:
    1 内联样式表的权值最高       style=""-------------------1000;
    2 统计选择符中的ID属性个数。    #id    -------------100
    3 统计选择符中的CLASS属性个数。 .class  -------------10
    4 统计选择符中的HTML标签名个数。     p     --------------1
    

     按这些规则将数字符串逐位相加,就得到最终的权重,然后在比较取舍时按照从左到右的顺序逐位比较。

    CSS的继承性:
     
          继承是CSS的一个主要特征,它是依赖于祖先-后代的关系的。继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代。例如一个BODY定义了的颜色值也会应用到段落的文本中。
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">
            body {
                color: #ff4400;
            }
        </style>
    </head>
    <body>
    <p>hello</p>
    </body>
    </html>
    

    p标签中的文字会继承body{color:#ff4400},然而CSS继承性的权重是非常低的,是比普通元素的权重还要低的0。

    我们只需要给加个颜色值就能覆盖掉它继承的样式颜色。由此可见:任何显示申明的规则都可以覆盖其继承样式。 

    此外,继承是CSS重要的一部分,我们甚至不用去考虑它为什么能够这样,但CSS继承也是有限制的。有一些属性不能被继承,如:border, margin, padding, background等。

    注意:

    1、文内的样式优先级为1,0,0,0,所以始终高于外部定义。这里文内样式指形如<div style="color:red>blah</div>的样式,而外部定义指经由<link>或<style>卷标定义的规则。
    
    2、有!important声明的规则高于一切。
    
    3、如果!important声明冲突,则比较优先权。
    
    4、如果优先权一样,则按照在源码中出现的顺序决定,后来者居上。
    
    5、由继承而得到的样式没有specificity的计算,它低于一切其它规则(比如全局选择符*定义的规则)。
    

     三,css常用属性

    1:颜色属性

    *背景颜色*/  
    background:transparent; /*透视背景*/
    background-image : url(/image/bg.gif); /*背景图片*/
    background-attachment : fixed; /*浮水印固定背景*/
    background-repeat : repeat; /*重复排列-网页默认*/
    background-repeat : no-repeat; /*不重复排列*/
    background-repeat : repeat-x; /*在x轴重复排列*/
    background-repeat : repeat-y; /*在y轴重复排列*/
    指定背景位置
    background-position : 90% 90%; /*背景图片x与y轴的位置*/
    background-position : top; /*向上对齐*/
    background-position : buttom; /*向下对齐*/
    background-position : left; /*向左对齐*/
    background-position : right; /*向右对齐*/
    background-position : center; /*居中对齐*/
    

     2:css文字属性

    color : #999999; /*文字颜色*/
    font-family : 宋体,sans-serif; /*文字字体*/
    font-size : 9pt; /*文字大小*/
    font-style:itelic; /*文字斜体*/
    font-variant:small-caps; /*小字体*/
    letter-spacing : 1pt; /*字间距离*/
    line-height : 200%; /*设置行高*/
    font-weight:bold; /*文字粗体*/
    vertical-align:sub; /*下标字*/
    vertical-align:super; /*上标字*/
    text-decoration:line-through; /*加删除线*/
    text-decoration: overline; /*加顶线*/
    text-decoration:underline; /*加下划线*/
    text-decoration:none; /*删除链接下划线*/
    text-transform : capitalize; /*首字大写*/
    text-transform : uppercase; /*英文大写*/
    text-transform : lowercase; /*英文小写*/
    text-align:right; /*文字右对齐*/  
    text-align:left; /*文字左对齐*/
    text-align:center; /*文字居中对齐*/
    text-align:justify; /*文字分散对齐*/
    vertical-align属性
    vertical-align:top; /*垂直向上对齐*/
    vertical-align:bottom; /*垂直向下对齐*/
    vertical-align:middle; /*垂直居中对齐*/
    vertical-align:text-top; /*文字垂直向上对齐*/
    vertical-align:text-bottom; /*文字垂直向下对齐*/
    

     3:css边框空白

    padding-top:10px; /*上边框留空白*/
    padding-right:10px; /*右边框留空白*/
    padding-bottom:10px; /*下边框留空白*/
    padding-left:10px; /*左边框留空白
    

     4:css符号属性

    list-style-type:none; /*不编号*/
    list-style-type:decimal; /*阿拉伯数字*/
    list-style-type:lower-roman; /*小写罗马数字*/
    list-style-type:upper-roman; /*大写罗马数字*/
    list-style-type:lower-alpha; /*小写英文字母*/
    list-style-type:upper-alpha; /*大写英文字母*/
    list-style-type:disc; /*实心圆形符号*/
    list-style-type:circle; /*空心圆形符号*/
    list-style-type:square; /*实心方形符号*/
    list-style-image:url(/dot.gif); /*图片式符号*/
    list-style-position: outside; /*凸排*/
    list-style-position:inside; /*缩进*/
    

     5:css链接属性

    a /*所有超链接*/
    a:link /*超链接文字格式*/  
    a:visited /*浏览过的链接文字格式*/
    a:active /*按下链接的格式*/
    a:hover /*鼠标转到链接*/
    鼠标光标样式:
    链接手指 CURSOR: hand
    十字体 cursor:crosshair
    箭头朝下 cursor:s-resize
    十字箭头 cursor:move
    箭头朝右 cursor:move
    加一问号 cursor:help
    箭头朝左 cursor:w-resize
    箭头朝上 cursor:n-resize
    箭头朝右上 cursor:ne-resize
    箭头朝左上 cursor:nw-resize
    文字I型 cursor:text
    箭头斜右下 cursor:se-resize
    箭头斜左下 cursor:sw-resize
    漏斗 cursor:wait
    光标图案(IE6)   p {cursor:url(“光标文件名.cur”),text;}
    

     6:css框线一览表

    border-top : 1px solid #6699cc; /*上框线*/
    border-bottom : 1px solid #6699cc; /*下框线*/
    border-left : 1px solid #6699cc; /*左框线*/  
    border-right : 1px solid #6699cc; /*右框线*/
    以上是建议书写方式,但也可以使用常规的方式 如下:
    border-top-color : #369 /*设置上框线top颜色*/
    border-top-width :1px /*设置上框线top宽度*/
    border-top-style : solid/*设置上框线top样式*/
    其他框线样式
    solid /*实线框*/
    dotted /*虚线框*/
    double /*双线框*/
    groove /*立体内凸框*/
    ridge /*立体浮雕框*/
    inset /*凹框*/
    outset /*凸框*/
    

     7:css边界样式

    margin-top:10px; /*上边界*/
    margin-right:10px; /*右边界值*/
    margin-bottom:10px; /*下边界值*/
    margin-left:10px; /*左边界值*/
    

     8:最常用!

    一:字体
    1 字体样式{font:font-style font-variant font-weight font-size font-family}  
    2 字体类型{font-family:"字体1","字体2","字体3",...}  
    3 字体大小 {font-size:数值|inherit| medium| large|larger| x-large| xx-large| small| smaller| x-small| xx-small}  
    4 字体风格{font-style:inherit|italic|normal|oblique}  
    5 字体粗细  {font-weight:100-900|bold|bolder|lighter|normal;}  
    6 字体颜色  {color:数值;} 
    7 阴影颜色{text-shadow:16位色值} 
    8 字体行高  {line-height:数值|inherit|normal;} 
    9 字间距  {letter-spacing:数值|inherit|normal} 
    10 单词间距{word-spacing:数值|inherit|normal} 
    11 字体变形{font-variant:inherit|normal|small-cps }  
    12 英文转换{text-transform:inherit|none|capitalize|uppercase|lowercase} 
    13 字体变形 {font-size-adjust:inherit|none}  
    14 字体{font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal|semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}  
    15 行间距 {line-height:数值|inherit|normal;}  
    16 文本修饰{text-decoration:inherit|none|underline|overline|line-through|blink} 
    17 段首空格  {text-indent:数值|inherit} 
    18 水平对齐{text-align:left|right|center|justify}  
    19 垂直对齐{vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}  
    20 书写方式{writing-mode:lr-tb|tb-rl}  
    二:背景样式 
    1 背景颜色{background-color:数值} 
    2 背景图片{background-image: url(URL)|none} 
    3 背景重复{background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y} 
    4 背景固定{background-attachment:fixed|scroll} 
    5 背景定位 {background-position:数值|top|bottom|left|right|center} 
    6 背影样式 {background:背景颜色|背景图象|背景重复|背景附件|背景位置} 
    三:框架样式(BoxStyle)  
    1 边界留白{margin:margin-top margin-right margin-bottom margin-left} 
    2 补  白{padding:padding-top padding-right padding-bottom padding-left} 
    3 边框宽度{border-border-top-width border-right-width border-bottom-widthborder-left-width}
    宽度值:thin|medium|thick|数值 
    4 边框颜色{border-color:数值数值数值数值}  数值:分别代表top、right、bottom、left颜色值 
    5 边框风格{border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove} 
    6 边  框{border:border-width border-style color} 
       上边框{border-top:border-top-width border-style color} 
       右边框{border-right:border-right-width border-style color} 
       下边框{border-bottom:border-bottom-width border-style color} 
       左边框{border-left:border-left-width border-style color} 
    7 宽  度 {长度|百分比| auto} 
    8 高  度 {height:数值|auto} 
    9 漂  浮{float:left|right|none} 
    10 清  除{clear:none|left|right|both} 
    四:分类列表 
    1 控制显示{display:none|block|inline|list-item} 
    2 控制空白{white-space:normal|pre|nowarp} 
    3 符号列表{list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none} 
    4 图形列表{list-style-image:URL} 
    5 位置列表{list-style-position:inside|outside} 
    6 目录列表 {list-style:目录样式类型|目录样式位置|url} 
    7 鼠标形状{cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}
    
  • 相关阅读:
    数据排序
    (一)Spark简介Java&Python版Spark
    醒 了
    祈福
    可以接受失败,但不选择放弃
    烦中偷乐
    Yahoo! UI Library入门
    文章内容的简单优化方法
    Asp.Net网站速度优化
    ASP.NET实现GZIP压缩优化
  • 原文地址:https://www.cnblogs.com/sun-10387834/p/10390872.html
Copyright © 2020-2023  润新知