今天是2019年6月15日周六，老师给我们讲了css的第一节课：css基础部分，写个随笔留个印记！
一、css的概念
css：cascading style sheet 中午翻译过来就是层叠样式表，它主要是用于定义HTML的内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等
优势：1、实现了内容与表现的分离
2、提高了代码的可维护性
使用场景：能用css取代Html属性就要用到css，有些属性无法取代：如input属性的 type ，img属性的alt。
二、css的三种引入方式
语法：新增标签的style属性在style属性的值中写css
格式：css属性1：属性值1；css属性2：属性值2；
特点：01，没有实现内容如表现的分离，只针对当前标签有效。
02，优先级别最高
使用场景：通过js动态给一些元素加样式
<body> <div style="width:100px;height:100px;background:red;"> </div> </body>
语法：在头部新增style标签，在style标签的内容中写css。
选择器：规定了页面上哪些元素可以使用定义好的css
格式：选择器 {
css属性：属性值；
}
特点：01，没有实现内容与表现的分离
使用场景： 没有使用场景
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>内部样式表</title> <style> div { width: 200px; height: 200px; background: red; } </style> </head> <body> <div id="box">我是div</div> </body> </html>
语法：新建外部以.css结尾的文件，将所有的css代码写在外部的文件中，在需要使用的Html中通过link引入。
格式：<link rel="stylesheet" href="css路径">
html部分：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>外部样式表</title> <link rel="stylesheet" href="css/common.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="box"></div> </body> </html>
css部分：
.box { width: 299px; height: 200px; background: pink; } 三、css样式表的特征
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>继承性</title> <style> div { color: purple; } </style> </head> <body> <div> 我是div文本内容 <p>我是p文本内容</p> </div> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>层叠性</title> <style> div { width: 400px; height: 400px; background: pink; } </style> </head> <body> <div style="width: 300px"></div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>important</title> <style> div { width: 400px !important; height: 400px; background: orange; } </style> <link rel="stylesheet" href="style.css"> </head> <body> <div style="width: 800px"></div> </body> </html> 四、css选择器
概念：规定了页面上哪些元素可以使用定义好的样式
语法：* {
css代码
}
功能： 匹配页面上所有的元素
注意：要谨慎使用，效率比较低。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>通配符</title> <style> * { color: orange; } </style> </head> <body> <div>我是div</div> <p>我是p段落</p> <span>我是span标签</span> </body> </html> 语法：将标签名作为选择器
使用场景：一般用于定义标签的默认样式，或者去除标签默认样式，使用场景很少。在Html、css中如Html,body,p,h1-h6,ul,li,ol这些元素都带有默认的外边距和内边距。
语法：.class值 {
css代码
}
属性：class属性的功能就是将标签分类，注意不是以标签名分类。
class属性的值命名规范：由字母数字下划线分隔符组成，尽量不要使用拼音，英文名应见名知意。注意：当这个类由多个单词组成，中间使用下划线或分隔符隔开。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>类选择器</title> <style> .zhy { width: 300px; height: 300px; background: pink; } .zy { width: 400px; height: 400px; background: blue; } .zjx { width: 500px; height: 500px; background: orange; } </style> </head> <body> <div class="zhy">我是zhy</div> <div class="zy">我是zy</div> <div class="zjx">我是zjx</div> </body> </html> 语法：将标签选择器和类选择器结合起来使用，从而实现对于一些元素不同属性精确定义。
格式：标签选择器.class值 {
css代码
}
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>分类选择器</title> <style> .box { width: 200px; height: 200px; background: orange; } p.zhy { color: red; } </style> </head> <body> <div class="box">div标签</div> <p class="zhy">p标签</p> </body> </html>
定义：class属性可以定义多个值，多个值之间以空格分割。
含义：一个标签具有class属性且值为多个。
使用场景：用于提升选择器的优先级
格式：.属性值1.属性值2.属性值3 {
css样式
}
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>分类选择器</title> <style> .box { width: 200px; height: 200px; background: orange; margin-top: 10px; } .zy { color: black; } .zhy { color: red; } .zjx { color: purple; } .box.zjx.zxm { font-size: 25px; } </style> </head> <body> <div class="box zy">div1</div> <div class="box zhy">div2</div> <div class="box zjx zxm">div3</div> </body> </html> 定义：给一个标签设置一个id属性，通过选择id属性的值来选择这个标签。
注意：一个id属性只能有一个值，不能和其他标签的id属性重复。id属性是一个标签独一无二的身份证明。
语法：#id值 {
css代码
}
使用场景：在静态页布局中用于最外层的盒子
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>id选择器</title> <style> #box { width: 200px; height: 200px; background: orange; } </style> </head> <body> <div id="box">我是div</div> </body> </html> 功能：定义多个选择器的公共样式
语法： 选择器1，选择器2，选择器3...选择器 {
css样式
}
格式：选择器1>选择器2
注意：选择器1和选择器2之间的关系是父子的关系，最终选中的是选择器2。
注意：选择器1和选择器2之间的关系是祖先后代关系，最终选中的是选择器2。
备注：祖先后代是包含子代的。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>子后代选择器</title> <style> #box>div { color: red; } #box div { color: blue; } #box .zhy { color: orange; } </style> </head> <body> <div id="box"> <div class="zhy"> 子代div标签 <div> 后代div标签 <span>我是 <a href="#">a标签</a> </span> </div> </div> </div> </body> </html>
动态伪类：1、hover：匹配元素鼠标移入时的状态
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hover</title> <style> #box { width: 200px; height: 200px; background: orange; } #box:hover { width: 300px; height: 300px; background: purple; } </style> </head> <body> <div id="box" class="zhy"></div> </body> </html> 2、focus：获取焦点时的状态，匹配的是表单控件。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>focus</title> <style> input:focus { width: 400px; } </style> </head> <body> <input type="text"> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>active</title> <style> a:active { color: green; } a:link { color: red; } a:visited { color: pink; } </style> </head> <body> <a href="#">我是超链接</a> </body> </html> 链接伪类：1、link：访问前的状态
2、visited：访问后的状态
未完，待续！