CSS基础

2018-06-24 01:43:30来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

 一、什么是CSS

  W3C标准中,倡导有3:其一为内容与表现分离,其二为内容与行为分离,其三为内容结构的语义化。其倡导中第一条的“表现”指的便可以说是CSS。CSS全称Cascading StyleSheets,中文名为层叠样式表,是一种用来表现HTML等文件样式的计算机语言。

 二、CSS的常用选择器

  1、标签选择器

    写法:HTML标签名

    作用:可以选中页面中,所有与选择器同名的HTML标签。

    

  2、类选择器    

    写法:.class名{}
    调用:在需要调用选择器样式的标签上,使用class="class名"调用选择器。
    优先级:类选择器大于标签选择器 。两个起冲突时,优先级高的生效

    

  3、id选择器

    写法:#id名{}

    调用:需要调用样式的标签,起一个id="ID名"

    优先级:id选择器大于class选择器

    注意:整个页面中,不能发出现同名ID

  

        

      【class选择器与ID选择器的区别】

      1、写法不同:class选择器用.声明,ID选择器用#声明。
      2、优先级不同:ID选择器>class选择器。
      3、作用范围不同:class选择器可以多次调用,ID选择器只能使用一次。

  4、通用选择器

    写法:*{}

    作用:可以选中页面中所有的HTML标签。

    优先级:最低!!!

    

  5、并集选择器

      写法:选择器1,选择器2,……,选择器n{}

      生效规则:多个选择器取并集,只要标签满足其中任意一个选择器,样式即可生效。

    

  6、交集选择器

      写法:选择器1选择器2……选择器n{}  所有选择器紧挨着,没有分隔

      生效规则:多个选择器取交集,则必须满足所有选择器的要求,才能生效。

    

  7、后代选择器

      写法:选择器1 选择器2 …… 选择器n{}  选择器之间有空格间隔

      生效规则:只要满足,后一选择器是前一个选择器的后代,即可生效。(后代包括子代、孙代、重孙代。。。)通俗的讲:只要后一个选择器,在前一个选择器里面即可。

    

  8、子代选择器

      写法:选择器1>选择器2>……>选择器n{}  选择器之间用>间隔

      生效规则:必须满足,后一个选择器是前一个选择器的直接子代,才能生效。(中间不能间隔人和标签)。

    

 三、CSS导入方式和优先级

  1、优先级的权重问题

      1、css生效的第一原则是:近者优先!!即,哪个选择器作用于最里层标签,则这个选择器生效。
      2、当选择器作用于同一层时,可以根据优先级权重,进行累加计算:
        id选择器*100>class选择器*10>标签选择器*1
        注意:并集选择器,相当于多个选择器拆开写,所以,并集选择器优先级不能累加。
      3、当选择器作用于同一层,且优先级权重相等时。则,写在最后选择器生效。

  2、引入css的三种方式

      1、行内样式表:直接在HTML标签中,使用style=""的方式引用;

           <div style="height:100px;"></div>
        优点:使用灵活,优先级权重最高;
        缺点:不符合w3c关于内容与表现分离的要求;不利于样式复用;
      2、内部样式表:在<head></head>标签中,使用<style>标签包裹css代码
        特点:一定程度的实现了HTML与css的分离,但是分离不够彻底,没有办法多页面公用样式。
      3、外部样式表:将css单独写入css文件中,并与HTML文件关联。
        优点:彻底实现HTML与css的分离,符合w3c规范,有利于多页面复用统一样式;

  3、导入css文件的两种方式

      ①在<head>标签中,使用link链接:<link rel="stylesheet" type="text/css" href="css/02_css.css" />
      ②在<style>标签中,使用@import导入; @import url("css/02_css.css");【一般不用】

  4、【两种导入方式的区别】

      ①link属于标准的HTML标签,而@import不是标准标签
      ②link可以兼容所有低版本浏览器,而@import只在css2之后能用;
      ③link是将两个文件链接起来,起桥梁作用;而@import相当于将css文件复制到HTML文件中;
      ④link会在HTML文件边加载的过程中,边链接css文件;@import会在HTML文件全部加载完以后,再导入css文件;
      综上所述,我们使用link链接的方式,加载css文件。

  5、引入外部css样式表

      rel:选择stylesheet
      type:选择text/css:可以省略
      href:表示链接的css文件路径

      

 四、CSS常用文本属性 

    1、字体、字号类
      ①font-weight:字体粗细;bold-加粗 normal-正常 、lighter-细体
       也可以使用100~900之间的数值。400表示normal,700表示bold
      ②font-style:字体样式。italic-倾斜、normal-正常
      ③font-size:字号。可以写px单位,也可以写%
        200%表示浏览器默认大小(16px)的两倍=32px;
      ④font-family:字体系列(字体族)。可以直接写字体名,也可以写字体系列名;
        常用字体系列:serif-衬线体 sans-serif-非衬线体;
         font-family可以接收多个值,用逗号分隔。表示优先使用第一个,如果没有这种字体,依次向后使用。
        通常一个值放字体系列名;
         eg:font-family:"黑体","微软雅黑",sans-serif;
      ⑤font缩写形式:
        >>>顺序必须是:
           font-weight font-style font-size/line-height font-family
        >>>不同属性之间,用空格分隔;
        >>>font-size/line-height必须一组,用/分隔;
        >>>font-family多个字体之间,用逗号分隔;
        >>>eg:font:bold italic 6px/100px "微软雅黑",sans-serif;

      

    2、字体颜色
      ①color:字体颜色 。可以使用单词、十六进制、RGB等
      ②opacity:透明度,可选值0-1
        [opacity和rgba的区别]
        rgba本身可以设置颜色,而opacity必须配合其他颜色属性来用;
        rgba仅仅是让当前元素设置的所有文字、背景、子元素都透明;

              

     CSS中的颜色表示方式
      ①直接使用颜色的英文单词表示:red、green、blue
      ②使用颜色的十六进制数表示:#ffff00
        六位数,两两分组,分别表示红、绿、蓝的配比;
      ③RGB(0~255,0~255,0~255);三位数,分别表示红、绿、蓝的配比;
       rdba();第四位数,表示透明度。

    3、行距、对齐类
      ①line-height:行高。可以写px单位、可以直接写数字(表示默认行距的几倍)、
       也可以写%(表示默认行距的百分比)
        >>>行高重要作用:怎么让单行文字在div中垂直居中?
          设置行高等于div的高度,即可让单行文字垂直居中。
      ②text-align:设置区域内的行级元素水平方式;left/center/right
      ③letter-spacing:字符间距,字与字之间的距离
      ④text-decoration:文本修饰:
          underline-下划线、overline-上划线、line-through-删除线、none
      ⑤overflow:设置超出区域文字的显示方式。
          >>>overflow;hidden;超出区域的文字隐藏不显示;
          >>>overflow:scroll;无论文字多少,都会显示水平垂直滚动条;
          >>>overflow:auto;自动,默认效果。文字多显示滚动条,文字少不显示滚动条;
          >>>可以使用overflow-x和overflow-y单独修改两个方向的滚动条;
            overflow-y:scroll;overflow-x:hidden;
      ⑥text-overflow:设置行末多余文字的显示方式;
          >>>clip-多余文字裁剪掉 ellipsis-多余文字省略号显示
          >>>显示省略号,需要配合white-space:nowrap;使用
          >>>【重点内容】设置行末显示省略号:(三行代码,缺一不可)
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
      ⑦white-space:nowrap;设置中文行末,不断行显示
      ⑧text-indent:首行缩进。
      ⑨-webkit-text-stroke: 0.5px blue; 文字描边
        -webkit:表示只要webkit内核的浏览器生效、常见的有chrome、safari
      ⑩text-shadow:文字阴影。有四个属性值,空格分隔;2px 2px 2px green;
          >>>水平阴影距离,正数表示阴影右移,负数左移;
          >>>垂直阴影距离,正数表示阴影下移,负数上移;
          >>>阴影模糊距离,0表示阴影一点不模糊;
          >>>阴影的颜色;

 4、CSS常用背景属性

    1、background-color:背景色
    2、background-image:背景图。使用url("")选择背景图片。
       背景图和背景色同时存在时,背景图覆盖背景色。
    3、background-repeat:背景图的重复方式。
      no-repeat:不平铺、repeat:平铺、repeat-x:沿x轴平铺、repeat-y:沿y轴平铺。
    4、background-size:背景图的大小
      [指定宽度、高度]
      >>>宽度高度的指定,可以写px,也可以写%(父容器宽高的百分比)
      >>>当写两个属性时,分别表示宽度、高度;
      当写一个属性时,表示宽度、高度将会等比缩放;
      [其他属性值]
      >>>contain:图片等比缩放,直到宽或高中较大的一边缩放到100%为止。
      (可能导致较短的一边<100%,图片无法盖住全部区域)
      >>>cover:图片等比缩放,直到宽或高中较小的一边缩放到100%为止。
      (可能导致较大的一边>100%,图片超出区域显示不全)
    5、background-position:背景图偏移量
        >>>指定位置:left/center/right top/center/bottom
          当只写一个值时,另一个默认居中。
        >>>指定坐标:两个属性分别表示 水平位移 垂直位移
      ①坐标的值,可以是px单位,也可以是百分数
      ②当写像素单位时:(左负右正,上负下正)
        水平方向:正数右移,负数左移
        垂直方向:正数下移,负数上移
      ③当写%(百分数)时:
        一般只能是正数。表示的是,去掉图片的宽高,剩余空白区域的分布比例。
        eg:background-position:30% 水平方向去掉图片宽度,剩余区域3:7分。

 5、CSS伪类选择器

    1、写法:伪类选择器,在选择器后面,用:分隔,紧接伪类状态;
        eg: .a:link
    2、超链接的伪类状态:
      :link:未访问状态 :visited已访问状态
      :hover-鼠标指上状态 :active-激活选定状态(鼠标点下未松开)
      注意:当超链接多种伪类状态同时存在时,必须按照link-visited-hover-active的顺序,
         否则会导致部分选择器不生效
    3、input的伪类状态:
      :hover :focus(获得焦点状态) :active
      注意input的多种状态同时存在时,必须按照上面的顺序;
    4、其他标签,基本只用:hover事件;

  6、CSS盒子模型

    1、margin 外边距

      ①、只写一个值:表示四周的外边距均为指定的值;
      ②、写两个值:第一个数为上下外边距 第二个数为左右外边距;
      ③、写三个值:分别表示上右下三个方向,左边默认等于右边;
      ④、写四个值:表示上右下左四条边顺时针方向;
      ⑤、margin:0 auto;设置块级元素,在父容器中水平居中!!!
    2、padding 内边距   

      设置方式与magin完全相同;
      注意:设置padding,将会导致div区域被撑大!!!使用时必须注意div的实际的宽高是多少!!!!

    3、边框

      1、设置边框需要三个属性:宽度,样式,颜色    原则上三个属性缺一不可,顺序可以随便修改;
      2、可以使用top、right、bottom、left分别设置四个边

    4、当父盒子包裹子盒子,给子盒子添加margin-top时,子盒子与父盒子的上边线并不能分开,而是会导致,两个盒子同时掉下来。    

      [解决办法]
      1、给父盒子添加一点padding-top;不推荐使用,会导致父盒子结构多余1px的padding;
      2、给父盒子添加1px的border-top;同样会导致1px的多余空间,不推荐使用;
      3、给父盒子或者子盒子添加浮动;可能会由于浮动,一定程度的影响页面的布局;
      4、给父盒子添加overflow属性;推荐使用的方式。

    5、border-radius 圆角    

      1、border-radius可以接受8个属性值,分别表示:x轴(左上、右上、右下、左下角)/y轴(左上、右上、右下、左下角)
          eg:border-radius:10px 20px 30px 40px/10px 20px 30px 40px
      2、缩写形式:
        只写x轴,y轴将默认等于y轴;
        四个角写不全,默认对角相等;
        只写一个值,默认8个数均等;
          eg:border-radius:50px 20px;
      3、当圆角弧度>=正方形边长一半,将会显示为圆形。

    6、border-image  图片边框    

      1、border-image:一共可以放10个属性值:
        ①图片的路径:url();
        ②图片的切片宽度:4个值,分别代表上下左右四跳边;
      通过4个切线切割,可以将图片分为九宫格,九宫格四个角分别对应边框的四个角(不会进行任何拉伸),九宫格四个边分别对应四条边框(会根据设置进行拉伸/铺完/重复等操作)
      
          注意:写的时候必须不能带px单位!!!!!
        ③边框的宽度:4个值,分别代表上右下左四条边框的宽度;
          注意:写的时候必须带px单位,与切片宽度用/分隔
        ④边框的重复方式:stretch(拉伸)、round(铺满)、repeat(重复)
      [round和repeat的区别]
      round:会对四条边进行适当的拉伸、压缩,确保四条边可以重复整数次;
      repeat:会保持每条边的宽度长度比例不变,可能导致四角处,无法显示一条完整的边;

    7、box shadow  盒子阴影

      6个属性值,用空格分隔;
      ①x轴阴影距离(必选):可正可负,正----右移,负----左移;
      ②y轴阴影距离(必选):可正可负,正----下移,负----上移;
      ③阴影的模糊半径(可选):只能是正数,默认为0.数值越大,阴影越模糊;
      ④阴影扩展半径(可选):可正可负,默认为0,数值增大,阴影扩大;数值减小,阴影减小;
      ⑤阴影颜色(可选):默认为黑色
      ⑥内外阴影(可选):默认为外阴影。 inset表示内阴影

    8、盒子模型分类
      1、 标准盒子(W3C盒子): 我们设置的宽度和高度,仅仅包含content部分; 再添加padding或border,会导致盒子变大;
      2、 IE盒子(怪异盒子): 我们设置的宽度和高度,包含content+padding+border;再添加padding或border,会压缩content区域,但盒子总大小不变; 

  7、CSS浮动   

    1、标准流中的块级盒子,宽度将会自动伸展为100%;而浮动的块级盒子,宽度不会自动伸展,而是由内容撑开;
    2、 当一个盒子浮动, 标准流中未浮动的其他盒子,将视浮动盒子不存在而占据浮动盒子原来的位置。(浮动盒子,会盖在这个盒子的上方),但是,未浮动盒子中的文字内容,将会受到浮动盒子宽度的影响。(未浮动盒子中的内容,不会被浮动盒子盖住)

    3、由于第二条的原因。可以给受影响的盒子,添加clear属性,清除掉浮动盒子对自身的影响。
      clear可选值:left-清除左浮动影响, right-清除右浮动影响;
       both-同时清除左右浮动影响 ,常选;   

    4、 父盒子没有指定高度。 如果子盒子没有浮动,则父盒子的高度可以被子盒子撑开。如果,父盒子中的所有子盒子都浮动,则父盒子高度将变为0;
      

      [解决所有子盒子浮动,父盒子高度塌陷的问题]
    ① 给父盒子也添加浮动;
    ② 给父盒子添加overflow属性; 推荐使用!!!
    ③ 在父盒子最后,添加一个高度为0的空div。 给这个div添加clear: both;属性,清除掉浮动效果。
    ④可以将第三条的div,用伪对象选择器::after实现:
      #div4::after{
          display:block;
          content:"";
          height:0px;
          clear:both;
          }

8、CSS定位  

   [相对定位 relative]
    1、使用position: relative;设置元素为相对定位元素;
    2、使用top、right、left调整元素的位置。当left和right同时存在时,left生效;top和bottom同时存在时,top生效。
    3、定位机制:
      ①相对定位时相对于自己原来的位置定位。当top等属性不指定时,元素位置不会发生改变
      ②相对定位,不会释放掉元素在原有文档流中的位置。不会影响其他文档流元素的位置;
    4、关于元素z轴重叠
      ①定位元素,默认的z轴高于普通文档流元素。
      ②同为定位元素,后来者居上。后面的盖住前面的。
      ③可以使用z-index手动调节定位元素的上下层z轴顺序。
      z-index默认为0,而且只能用于定位元素。

   [绝对定位]
    1、使用position:absolute;设置元素为绝对定位;
    2、定位机制:
      ①相对于第一个非static定位的祖先元素进行定位。(即相对于使用了relative、absolute、fixed定位的祖先元素进行定位)
      ②如果所有的祖先元素都未定位,则相对于浏览器左上角进行定位;
      ③使用absolute的元素,会从文档流中完全删除。原有空间会被释放。
   [固定定位]
    1、使用position:fixed;设置固定定位;固定定位,是一种特殊的绝对定位!!!!只是祖先元素无法使用定位锁住;
    2、定位机制:永远相对于浏览器的左上角进行定位,而且不随滚动条的滚动而滚动

   [z-index属性]
    1、作用:根据z-index属性设置的数值,决定元素在z轴方向上的层叠次序;
    2、使用要求:
      ①z-index 只能给定位元素调整层叠次序。relative、absolute、fixed
      ②元素的z-index属性,要考虑父容器z-index的约束:
        >>>如果父容器设置了z-index属性,则子容器的所有元素,将不能脱离父容器层次的约束。(即,父容器设置了z-index,则子容器只能以父容器的数值为准。再给子容器设置z-index,只能调整子容器在父容器层次之内的层叠次序)
        >>>如果父容器没有设置z-index,或者设置z-index:auto;则子容器调整z-index将不受父容器层次约束。
    3、z-index:auto和z-index:0的异同点
      ①z-index:auto;是默认值,与z-index:0;处于同一个平面;
      ②z-index:0;会约束子元素必须与父容器在同一平面;
      z-index:auto;不会约束子元素的层次;
   [clip属性]

    1、作用:clip属性用于裁切图片标签,显示图片的指定区域;
    2、使用要求:clip属性,只能作用于有absolute或fixed定位的图片标签上;
    3、clip属性,接受一个rect()函数,函数传入四个值,分别表示上右下左四条切线的位置;
      注意:与其他属性不同的是,rect中的四个值,上下两个值的距离都是从上边量取;左右两个值都是从左边量取;

 


     

 



    




 

 

 

 

 

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:深度理解div+css布局嵌套盒子

下一篇:html实现钝角效果;html实现限制一行字数的显示,超出的部分用省