zoukankan      html  css  js  c++  java
  • web-02-css

    1、css作用

        1)用来修饰html

        2)告诉浏览器以什么样的方式显示html元素

        3)实现内容与表现层分离,提高代码的重用性和维护性

      注:(标签=标记=节点=元素=css)

    2、如何使用css

        1)行内式  ---> 只对当前元素有作用(不推荐)

             不推荐原因:修改和阅读麻烦,行内优先级最大

    <标签名 style="样式名:值"></标签名>
    style="属性:值;属性:值...."

             style的值可以有多个(属性:值),多个样式用“;”隔开

        2)内部式 --> 对当前页面内的节点起作用

            -1. 在<head>中添加style标签

            -2. 在style标签中写css语法

              css语法规范:

    选择器{
    //css声明
    属性:值;
    属性:值;
    }

        3)外部式

          好处:一次编写多次使用

          -1. 编写外部css文件

             建议在顶行加上 @charset "utf-8";  定义编码格式

          -2.在html页面中引入css文件

    <link href="css文件路径" rel="stylesheet" type="text/css">

    3、CSS选择器(重点:找节点)

        1)元素选择器(标签选择器)

        2)类选择器(class是用在css中)

            写法: .类名

            通常用作将页面不同节点设置同一个样式

        3)id选择器(id是给js用的)

            写法:#id值

            id值需要唯一(通常id是用在js中)

         注:通过 .class/#id值 作为选择器

    4、选择器类型升级版

        1)交集选择器(以上面三张选择器作为基础)

           选择器1选择器2(之间不用任何符号)

    如:li.c_red  //查找页面上class为c_red的li节点

         注:多个选择器之间没有任何符号,用空格隔开

    class="c_red big"
    .c_red.big{}

        2)并集选择器

            选择器1,选择器2(之间用都号隔开)

    如:h1,h2  //查找页面上的h1和h2节点

        3)后代选择器

            选择器1 选择器2(之间用空格隔开)

    如:div li  //查找页面上在div中的所有li节点

        4)儿子选择器(只找下一代)

            选择器1>选择器2

    如:body>ul  //查找页面上body的儿子节点ul

        5)下一个弟弟选择器

            选择器1+选择器2

    如:h1+h2  //用于查找紧跟在h1节点后面的同级h2节点

        注:a链接

    :link-->未被访问过的超链接
    :hover-->当鼠标悬停时显示的样式(如:li:hover)
    :active-->未被激活的元素
    :visited-->已经访问过得超链接
    :focus-->获取焦点

         写选择器遵循“爱恨原则”:(LoVe HAte)

    5、CSS特性

        1)继承性

            父元素的css声明可以被子元素继承(如字体颜色等)

        2)层叠性

            同一个元素若存在多个css规则,对于不冲突的样式,可以叠加。若冲突则考虑下一个特性

        3)权重(优先级)---不推荐使用

            -1. 从引用方式来看:

                行内式优先级>内部式>外部式

            -2. 根据选择器来看(优先级)

                id>class>标签选择器

           注意:继承的权重等于零

               权重的比较公式:id个数/class个数/标签的个数

             -3. 样式冲突时比较规则:

                 * 先看是否选中项

                      若一个选中一个没有选中,听选中的

                 * 若都选中

                      比权重(id个数/class个数/标签的个数)听权重大的,后来居上

                 * 若都没有选中

                      -比远近 -->听距离近的

                      -若远近一样 -->比权重

                      -若权重一样-->后来居上

                   注意:!important 关键字作用提高权重,使其无限大

  • 相关阅读:
    另一种方式实现事务码SE16里的结果集修改
    如何修改Fiori Launchpad里Tile计数调用的时间间隔
    Opportunity的chance of success的赋值逻辑
    Smart template的控件能否当成普通控件来用
    一个查看UI5控件所有公有方法的小技巧
    到底哪种类型的错误信息会阻止business transaction的保存
    Java实现 LeetCode 453 最小移动次数使数组元素相等
    Java实现 LeetCode 453 最小移动次数使数组元素相等
    Java实现 LeetCode 453 最小移动次数使数组元素相等
    Java实现 LeetCode 452 用最少数量的箭引爆气球
  • 原文地址:https://www.cnblogs.com/xslzwm/p/9591163.html
Copyright © 2011-2022 走看看