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 关键字作用提高权重,使其无限大

 

posted @ 2018-09-05 11:33  不是一个世界的人  阅读(110)  评论(0编辑  收藏  举报