css基础1
今天是2019年6月15日周六，老师给我们讲了css的第一节课：css基础部分，写个随笔留个印记！
一、css的概念
css：cascading style sheet 中午翻译过来就是层叠样式表，它主要是用于定义HTML的内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等
优势： 1、实现了内容与表现的分离
2、提高了代码的可维护性
使用场景：能用css取代Html属性就要用到css，有些属性无法取代：如input属性的 type ，img属性的alt。
二、css的三种引入方式
1、行内样式（内联样式）
语法：新增标签的style属性在style属性的值中写css
格式：css属性1：属性值1；css属性2：属性值2；
特点：01，没有实现内容如表现的分离，只针对当前标签有效。
02，优先级别最高
使用场景：通过js动态给一些元素加样式
<body> <div style="width:100px;height:100px;background:red;"> </div> </body>
2、内部样式表
语法：在头部新增style标签，在style标签的内容中写css。
选择器：规定了页面上哪些元素可以使用定义好的css
格式：选择器 {
css属性：属性值；
}
特点：01，没有实现内容与表现的分离
02，有一定的可重用性和可维护性
使用场景： 没有使用场景
<!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>
3、外部样式表
语法：新建外部以.css结尾的文件，将所有的css代码写在外部的文件中，在需要使用的Html中通过link引入。
格式：<link rel="stylesheet" href="css路径">
注释：html注释 <!--html注释--> css注释 /*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样式表的特征
1、继承性：大多数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>
2、层叠性：如果代码多处都找到同一个标签，设置了很多样式，在不冲突的情况下，这些样式会层叠为一个，共同作用到标签上。
<!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>
3、优先级别：
01，浏览器缺省设置：user agent stylesheet （优先级别最低）
02，内部样式表和外部样式表优先级别一样，采取就近原则，谁在下以谁为准。
03，内联优先级别最高
04，！important手动提高优先级别，写在需要提高优先级css属性的后面以空格分割，需谨慎使用。
<!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选择器
概念：规定了页面上哪些元素可以使用定义好的样式
1、通配符：通用选择器
语法：* {
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>
2、标签选择器（元素选择器）
语法：将标签名作为选择器
使用场景：一般用于定义标签的默认样式，或者去除标签默认样式，使用场景很少。在Html、css中如Html,body,p,h1-h6,ul,li,ol这些元素都带有默认的外边距和内边距。
3、类选择器
语法：.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>
4、分类选择器
语法：将标签选择器和类选择器结合起来使用，从而实现对于一些元素不同属性精确定义。
格式：标签选择器.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>
5、多类选择器
定义：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>
6、id选择器
定义：给一个标签设置一个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>
7、群组选择器
功能：定义多个选择器的公共样式
语法： 选择器1，选择器2，选择器3...选择器 {
css样式
}
8、子代选择器：由于标签的嵌套，标签之间会产生两种关系：父子关系和祖先后代（包含父子）的关系。
格式：选择器1>选择器2
注意：选择器1和选择器2之间的关系是父子的关系，最终选中的是选择器2。
9、后代选择器
格式：选择器1 选择器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>
10、伪类选择器：正常情况下选择的是元素，伪类选择器选中的是选中的一种状态。
动态伪类：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>
3、active：匹配元素激活时的状态，一般用于a标签。
<!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：访问后的状态
未完，待续！
