爱站程序员基地前端三要素
html：木偶css：化妆javascript：动态展示（跳舞）
CSS
1.什么是css?
cascading style sheets层叠样式表
2.css的语法
### 1.属性名和属性值之间使用:隔开多对属性之间使用;隔开最后一对属性可以不加分号id=\"one\"class=\'one\'style=\'根据css语法设置\'title=\'one\'<div style=\"width:100px;height:100px;color:red;\"></div><style>选择器{width:100px;height:100px;color:red...}</style><div></div>### 2.速记写法简写形式border:1px solid red;border-width:1px;border-top-widthborder-left-widthborder-right-widthborder-bottom-widthborder-styleborder-top-styleborder-bottom-style。。。。border-color盒子=内容区+内边距+边框+外边距padding marginpadding-top:10px;padding-left:10px;padding-right:10px;padding-bottom:10px;-->padding:10px;//上下左右均为10pxpadding:10px 20px;//上下10px 左右20pxpadding:10px 20px 30px;//上10px 左右20px 下30pxpadding:10px 20px 30px 40px;//上 右 下 左margin：同padding用法一样###3.注释1.注释写法/*注释内容*/快捷键：ctrl+/取消注释：ctrl+k+u2.注释的作用解释说明更好的维护和管理3.注释不能嵌套使用<!--注释<!--inner-->内容-->
3.html中引入css的方式
1.行内样式style属性<div style=\'\'></div>2.内联样式style标签<style>div{css语法}</style>3.外部引入创建.css为后缀名的文件link标签：先加载css，在加载html的同时瞬间将样式加载上去<link rel=\"stylesheet\" href=\"./outer.css\">@import url():不建议使用，先加载html，再加载css，给用户的体验不好eg:@import url(\"./outer.css\");
link和@import的区别
link:将样式单独抽离出来，写成一个css文件，在head标签中通过link标 签导入
<link rel=\"stylesheet\" href=\"\">
@import:将样式单独抽离出来，写成一个css文件，在style标签内通过@import导入路径
<style>@import \'./test.css\';</style>
1.link先加载css文件，@import先加载html文件2.link 引入的样式页面加载时同时加载,@import引入的样式在页面加载完成时再加载;3.link 没有兼容问题, @import不兼容 ie5 以下的浏览器;4. 所属范围不同@import 是css的语法，只能导入样式 link是html的标签，不仅可以加载样式，还可以定义rel属性 rel=\"stylesheet\"表示调用外部样式表
引入css的优先级问题
行内样式>内联样式/外部引入
就近原则：哪一种设置方式更靠近元素，哪一种方式的优先级更高（根据html解析顺序得来：自上而下）
4.选择器
标签选择器/元素选择器根据标签名称选择一类元素eg：divid选择器：通过id属性选择一个元素#value<div id=\'one\'></div>#one类选择器：class.value普遍选择器：*：选择所有*{margin：0px;padding:0px;}后代选择器：selector1>selector2:选择直接子元素
eg:<style>#outer>li{border: 3px solid blue;}</style></head><body><ul><li>outer1<ul><li>inner1</li></ul></li><li>outer2</li><li>outer3</li></ul></body></html>
<style>#outer li{border: 3px solid blue;}</style></head><body><ul id=\"outer\"><li>outer1<ul><li>inner1</li></ul></li><li>outer2</li><li>outer3</li></ul></body></html>
`
兄弟选择器：+:选择当前元素之后的一个兄弟元素#one+div{background-color: blue;}</style></head><body><div id=\"one\" class=\"one\"></div><div id=\"two\" class=\"one two\"></div><div class=\"two\"></div><div class=\"two three\"></div><div id=\"five\" class=\"one\"></div>样式结果如下图：
注意：
如果第一个div之后有一个p标签则，如上设置，就选择不到第二个div了，
~:选择当前元素之后的所有兄弟元素
将上面一段代码中的+换成~
样式结果如下图所示：
属性选择器：[class]:选择当前页面中具有class属性的元素[class]{background-color: black;}样式结果如下图所示：
[class=\'one\']:选择当前页面中具有class属性，并且属性值为one的元素[class~=\'one\']:选择当前页面中具有class属性，并且属性值之一为one的[class^=\'o\']:选择当前页面中具有class属性，并且属性值以o字符开头[class$=\'o\']:选择当前页面中具有class属性，并且属性值以o字符结尾[class*=\'o\']:选择当前页面中具有class属性，并且属性值中包含o字符
多选择器：使用逗号隔开多个选择器divpdiv{width:100px;height:100px}p{width:100px;height:100px;}-->div,p{width:100px;height:100px;}#one,.two,p{}<div><ul class=\'one\'>li*3</ul><ul class=\'two\'>li*3</ul></div><p class=\'two\'></p>div .one,.two{}div .one,div .two{}table tr td组合选择器：将多个选择器组合到一起使用div.one{}<div class=\"one\"></div><div class=\'two\'></div><div class=\'three\'></div><p class=\'one\'></p>伪类选择器：:伪类名称:first-child选择当前元素作为父元素的第一个孩子eg：div:first-child div中作为第一个孩子的，即第一个div（外层的）,div :first-child 选择的是div的后代的第一个，即span标签p:first-child失效（原因是p不是第一个）<div><span></span><p></p><a href=\"\"></a><div></div></div>:last-child 最后一个:nth-child(number（第几个）/odd(奇数个)/even（偶数个）)中间的和状态相关的：:hover:当鼠标悬停在元素上时cursor是用来设置鼠标样式，值有help,wait,pointer:active：当鼠标按下时:link：当鼠标未被点击时a:link{color:red}:visited：当点击过之后的一个状态设置顺序：link->visited--〉hover-->active伪元素选择器：<div>hello</div>::伪元素的名称Eg:<div id=”#text”>Hello</div>div#text::first-letter{color:red;}::first-letter:第一个字符::first-line：第一行::seclection:文本被选中时eg：<input type=\"type\" value=\"hello\">input::selection{color:red;}::before:在当前元素内容之前content:text/url()::after：在当前元素内容之后eg:在hello之前插入你好div#text::before{content:\'你好\'}<div id=\"text\">hello</div>
选择器的优先级
!important:不计入特性值中，使用了该属性的样式优先级最高,不建议使用
eg:background-color:red!important;
优先级需要根据特性值来计算，特性值越大，优先级越高，特性值相同，越靠下的优先级越高style属性中:1000id选择器:100类选择器/属性选择器/伪类选择器:10元素选择器/伪元素选择器：1div#one{//number=101}
