css 课堂笔记
css：层叠样式表 Cascading( [kæ'skeɪdɪŋ] 级联)Style Sheet
css基本语法结构：选择器{
属性：值;
属性：值；
...
}
三种主要的选择器：
标签选择器：
以HTML标签命名的选择器,直接控制对应的标签
p{font-size:16;}
类选择器：
在标签内加入class属性，选择器名为“.”加上对应的class属性值
.p1{font-size:16px;} ... <p class="p1">.......</p>
ID选择器：
在标签内加入id属性，id属性不可以重复，选择器名为"#"加上id属性值
#p1{font-size:16px;} ... <p id="p1">...</p>
ID选择器优先级>类选择器>标签选择器
<span></span>范围标签
HTML中引入css样式：
行内引用，就是在标签中加style属性然后设置
<p style="font-size:16px;" >...</p>
内部引用：
在<head>标签里面加上<style>标签以及一些声明：
<head> <title></title> <style type="text/css"> ....写各种选择器 </style> </head>
外部引用：
首先新建css文件，css文件以.css为后缀名，可以有声明编码，其他与在HTML内完全相同。
@charset "utf-8";
/* CSS Document */
p{
font-size:16px;
}
在HTML内引用外部样式表，两种方式：
都是在head标签里面引入外部样式表
1、链接外部样式表：
<link href="1.css" rel="stylesheet" type="text/css" />
2、导入外部样式表：
<style type="text/css"> @import url("1.css"); </style>
导入我的理解，显示搭建好了css的空间，然后利用url属性将对应css内容引入进来。
链接式与导入式的区别：
1、链接式是先加载到网页，网页再编译，导入式是先编译网页再加载样式
2、导入的样式表后面属于特殊的内部样式表，必须放在<style>中的第一行，后面还可以书写css代码
3、js操作只能改变link链接的样式表的内容，无法操作import的
4、多页面同时link一个css会比导入要慢
复合选择器：
后代选择器
在HTML中<a><b>x</b></a>
如果设置在被a包裹的b标签的内容，就可以使用后代选择器
规则： 外层标签写在前面，内层标签写在后面，中间使用空格分隔
标签嵌套的时候，内层标签称为外层标签的后代
p span{ font-size:30px; color:yellow; } <p>hello,<span>你好</span></p>
注意：选择器名的嵌套的不只是标签，类选择器名也可以
p .sp{
font-size:30px;
color:blue;
}
交集选择器
交集选择器控制的是两个选择器的交集的内容。注意：这和后代选择器本质上是不同的。这指的是既可以使用第一个选择器控制又可以使用第二个选择器控制的同一个标签的内容。
书写规则：
第一个必须是标签选择器，第二个必须是类选择器或者ID选择器，两个选择器之间不能有空格，紧密连接
<p id="yu">你好,对的</p> <p>你好，<span class="me">好吗</span></p> p#yu{ background-color:#3F6; } p.me{ background-color:#3F6; }
测试结果：对的能出背景，好吗不能出背景
并集选择器
多个选择器的交集
规则，多个选择器用逗号连接而成。
p,table{ background-color:green; } <p>你好，<span class="me">好吗</span></p> <table> <tr> <td><input type="text" /></td> </tr> </table>
css中的继承
子标签继承父标签风格
子标签不影响父标签样式风格
