Day1 CSS基础

作者: 煮酒浮白 | 来源:发表于2018-03-20 18:16 被阅读2次

Day1 CSS基础
CSS学习资源
【2016年特别福利】史上最全CSS学习资料大全
创意戏剧师资培训
react学习路线图
CSS初识
css大纲
CSS第一小节第一天
CSS第一天
史上最全的HTML、CSS知识点总结，浅显易懂。适合入门新手，需

本课总结如下
1、主流浏览器及其内核
包括 5 大浏览器及 4 大内核，分别为
IE 内核 trident;
FireFox 内核Gecko；
google chrome 内核 Webkit/Blink;
Safari 内核Webkit;
Opra 内核 Prosto/Blink

2、css 的3种引入方式
2.1>行间样式
2.2>页面级Css
2.3>外部文件

3、css 选择器的使用及其优先级别
行间样式 > id > class | 属性|伪类 > 标签选择器 | 伪元素> 通配符;
IDE会根据权重进行比较各自的优先级别

!important Infinity
行间样式 1000
id 100
class|属性 10
标签选择器 1
通配符 0

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS 练习</title>

<!--    <style type="text/css">
        div {
            width: 50px;
            height: 50px;
            background-color: blue;
            border-radius: 50%;
        }

    </style> -->

    <link rel="stylesheet" type="text/css" href="Practise1.css">

</head>
<body>

<!-- 1.主流浏览器 及其 内核 -->
    <!--  5大主流浏览器及4大内核
     浏览器主要分为内核和shell两部分 -->
     <!-- IE                 trident
     FireFox            Gecko
     Google  Chrome     Webkit/blink
     Safari             Webkit
     Opera              presto/blink -->


<!-- 2.HTML、CSS、JS 之间的关系 -->
    <!-- HTMML 是结构，房屋基础；CSS是样式，房屋装饰；JS是行为，房屋用途 -->

<!-- 3.引入CSS的几种方法 -->

    <!-- 3.1行间样式 -->
    <!-- <div style="width: 100px; height: 100px; background-color: red; border-radius: 50%"></div> -->
    <!-- 3.2页面级CSS -->
    <!-- <div></div> -->
    <!-- 3.3外部文件 -->
    <!-- <div></div> -->

<!-- 4.选择器 -->
    <!-- 4.1 id选择器 -->
    <!-- <div id="today"></div> -->
    <!-- 4.2 class选择器 -->
    <!-- <div class="classDemo">la is labo nida</div> -->
    <!-- 4.3标签选择器 -->
    <!-- <div>我是标签选择器</div> -->
    <!-- 4.4.通配符选择器 -->
    <!-- <div>通配符选择器 整个页面均配置</div> -->
    <!-- 4.5属性选择器 -->
    <!-- <div id="nid">我就是我</div> -->
    <!-- <div id="nida">颜色不一样的烟火</div> -->

<!-- 优先级顺序 -->
    <!-- 行间样式 > id > class | 属性 > 标签选择器 > 通配符 -->

<!-- <div id="nid" style="width: 300px; height: 100px; background-color: lightgreen">优先级比对</div> -->


</body>
</html>

CSS部分



/*div {
    width: 200px;
    height: 100px;
    border-radius: 50%;
    background-color: yellow;
}*/

#today {
    width: 100px;
    height: 100px;
    border-color:  currentColor;
    border-radius: 50%;
    background-color: green;
}

.classDemo {

    background-color: purple;
}

/*div {
    width:  500px;
    height: 500px;
    background-color: red;
}*/

* {
    background-color: yellow;
}

[id="nid"] {
    width: 50;
    height: 20;
    background-color: green;
}