css、js笔记

css笔记

一、css的简介
1、什么是css
层叠样式表，css是对html进行样式修饰语言
层叠：就是层层覆盖叠加，如果不同的css样式对同一html标签进行修饰，样式有冲突的部分应用优先级高的，不冲突的部分共同作用
样式表：就是css属性样式的集合
2、css的作用
(1)修饰html的 使其html样式更加好看
(2)提高样式代码的复用性
(3)html的内容与样式相分离 便于后期维护

3、css的引入方式和书写规范
(1)内嵌样式
内嵌样式是把css的代码嵌入到html标签中

你好啊 小朋友

语法：
(1)使用style属性将样式嵌入到html标签中
(2)属性的写法：属性：属性值
(3)多个属性之间使用分号;隔开
不建议使用
(2)内部样式
在head标签中使用style标签进行css的引入

div{color:red;font-size: 100px;}

语法：
(1)使用style标签进行css的引入

属性：type：告知浏览器使用css解析器去解析
(2)属性的写法：属性：属性值
(3)多个属性之间使用分号;隔开

    (3)外部样式
        将css样式抽取成一个单独css文件 谁去使用谁就引用
        <link rel="stylesheet" type="text/css" href="demo1.css"/>
        语法：
            (1)创建css文件 将css属性写在css文件中
            (2)在head中使用link标签进行引入
                <link rel="stylesheet" type="text/css" href="css文件地址"/>
                rel:代表要引入的文件与html的关系
                type：告知浏览器使用css解析器去解析
                href：css文件地址
            (3)属性的写法：属性：属性值
            (4)多个属性之间使用分号;隔开
    (4)@import方式
        <style type="text/css">
            @import url("css地址");
        </style>
        link与@import方式的区别：
            (1)link所有浏览器都支持 import部分低版本IE不支持
            (2)import方式是等待html加载完毕之后在加载
            (3)import方式不支持js的动态修改

二、css选择器
1、基本选择器
(1)元素选择器
语法：html标签名{css属性}
示例：
hello css!!!

span{color:red;font-size:100px; }

(2)id选择器 id唯一性
语法：#id的值{css属性}
示例：

hello css1!!!

hello css2!!!

#div1{background-color: red;}
#div2{background-color: pink;}

(3)class选择器
语法：.class的值{css属性}
示例：

div1

div2

div3