美文网首页
css引入、css基础选择器、选择器权重

css引入、css基础选择器、选择器权重

作者: 时光在浅唱 | 来源:发表于2018-10-19 11:24 被阅读9次

    初学入门,可能有些地方会理解有误,恳请批评指正~

    1. 主流浏览器:

        (1)占有一定的市场份额且必须有独立研发的内核。

        (2)浏览器由shell+内核组成。shell是浏览器的操作部分的展示页面。内核是操作代码识别和运行的。

        (3)主流浏览器有:IE(内核trident),Firefox(内核Gecko),Google chrome(内核Eebkit/blink),Safari(内核Webkit),Opera(内核presto)

    2. 备注格式:<!--  -->

    3. css: cascading style sheet(层叠样式表)

    4. 引入css:

        (1)行间样式,<div style=" css代码 "></div>

        (2)页面级css,在<body></body>中写一个<div></div>,然后在<head></head>标签中写

                <style type="text/css">

                        div {

                                    css代码

                        }

                </style>

                这样,就会作用于<body></body>中的<div></div>标签。

        (3)外部css文件(最实用最重要):

                    <1>(在html文件的<body></body>标签中添加<div></div>标签)在<head></head>标签中添加

                            <link rel="stylesheet" type="text/css" herf="css文件所在地址">

                    <2>在css文件中写

                            div{

                                    css代码

                            }

                这样,就能把css文件和html文件链接起来,并且css文件中的"div"模块作用于html文件中的<div></div>标签。

    5. 异步加载:同时加载;同步加载:不同时加载。

    6. (元素)选择器:

        (1)id选择器:在html文件中的<div></div>元素的头标签中添加"id"属性,在css文件中利用"#id值{css代码}"定位选择的元素。每个元素只能有一个id值。

        (2)class选择器:在html文件中的<div></div>元素的头标签中添加"class"属性,在css文件中利用".class值{css代码}"定位选择的元素。每个元素可以有多个class值,(class="demo demo1")一个class值可以被多个元素共有(多对多)。

        (3)标签选择器:在css文件中直接写所选择的标签名,"标签名{css代码}",将选出html文件中所以的此类标签。

        (4)通配符选择器:形式"*{css代码}",选择所有的内容。(在自定义标签时会用到)

        (5)属性选择器:形式"[属性名]{css代码}"。

        (5)优先级:!important>行间样式>id选择器>class选择器==属性选择器>标签选择器>通配符选择器

    7. css权重(256进制):

        (1)important                Infinity   

        (2)行间样式                1000

        (3)id                            100

        (4)class|属性|伪类        10

        (5)标签|伪元素               1

        (6)通配符                        0

    8. 标签中必须有内容,链接的css代码才能生效。

    2018-10-18(渡一教育“web前端开发HTML+CSS精英班”笔记)

    累~~~听一天报告,补补补>_<

    相关文章

      网友评论

          本文标题:css引入、css基础选择器、选择器权重

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