美文网首页
CSS基本介绍

CSS基本介绍

作者: 麦壳儿UIandFE2 | 来源:发表于2016-10-13 21:59 被阅读36次

    css( cascading style sheets)层叠样式表:给html里的骨架(标签)穿衣服(属性)。

    style标签:是CSS标签。

    css 3种写法:
    1)、行内式:每个标签都有一个style属性,所以可以在标签身上写CSS属性。免除了选择器部分。

    <div style=' k:v; k:v; k:v; '><div>
    
    

    2)、内嵌式:通过style标签,放在head标签中。

    <style type='text/css'>
    
     选择器{
       k:v;
       k:v;
      }
      
    </style>
    

    3)、外链式:将属性写在css文件中,通过连接标签link连接。工作中常用,复合W3C的理念。

    <link type='text/css' rel='stylesheet' href='css路径'/>
    
    

    ********元素的显示方式:********

    css中元素分为两类:

    一:独占一行block:典型:div p h1-h6 ol ul li dl dt dd
    独占一行,可以设置宽高。

    二:不换行的:
    行内元素inline:典型:span a b u i strong del em ins s
    一行内显示,宽高不生效,自适应内容。

    行内块inline-block:典型:img input
    即可认为设置宽高又可以在一行显示。
    ********元素之间显示方式切换:********
    修改display属性:

    css代码由2部分组成:
    ==1.选择器:==
    一:基础选择器4类:

    标签选择器:
    类选择器:.
    id选择器:#
    通配符:*

    二:复合选择器:

    后代选择器:空格
    并集选择器:,
    指定选择器:标签名.id/类 (权重最高,高手常用)

    例如:div.box
         div.#box
    

    ==2.属性==:键值对 (css学习的重点)

    K:v;
    

    css两大特性

    ********继承性********

    作用:子元素可以继承父元素的样式。
    什么样的属性才可以继承:(经验之谈)
    ==text-,font-,line-开头的属性都是可以继承的==color.也可以a除外。

    具体应用:
    在写页面之前我们会通过给body设置一个字体,来将页面上所有的标签都能够继承这个属性。

    *****特殊性:*****

    1. ==a==标签的==颜色==不能继承,如果一定要修改a标签的颜色直接作用在a标签上面。
    2. ==h==标签的==大小==不能继承,如果一定要修改h标签的大小直接作用在h标签上面。

    ********层叠性********
    是浏览器处理冲突的一个特性。

    作用:同一属性后写的会覆盖先写的,权重高的选择器中的属性会概掉权重低的。

    **优先级

    !important>行内样式>id选择器>类选择器>标签选择器>通配符>继承**

    变数:!important
    注意:虽然important是一个变数,但是不能作用在继承上。!important属性无法继承。
    ==权重:==

    涉及权重的2点:选择器和css书写形式

    作用:多个选择器组合以后的优先级。
    通俗简便算法:
    ==标签选择器:1两;
    类选择器:1斤;
    id选择器:1吨;==
    复合选择器:把个部分相加即可。

    **********总结:权重其它是优先级的算法**********
    ********优先级是层叠表现********。
    选择器工作的一个原理:
    选择器在查找元素的时候不是从左往右找,而是==从右往左找==。

    相关文章

      网友评论

          本文标题:CSS基本介绍

          本文链接:https://www.haomeiwen.com/subject/cecgyttx.html