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

2018-10-19  本文已影响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精英班”笔记)

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

上一篇 下一篇

猜你喜欢

热点阅读