1.css基础信息2.css行内样式写在style中 智能控制当前样式h1 stylecolor: red;font-size:60px;欢迎来学习/h1书写繁琐 不能复用 要是下面的要求效果一样就得一直复制 不能体现出结构和样式分离的效果3.内部样式style标签可以写到head也可以写在body里面 一般在head里面 但没有实现结构与样式完全分离styleh1{color: red;font-size:60px;}/style4.外部样式写在单独的.css文件中 把所有css样式代码写在这里link尽量写在head里面 href引入的文档来自于哪里 rel引入文档与当前文档的关系引入 link relstylesheet href./position3.css优势 可以复用结构清晰 实现了结构与样式的完全分离 可以触发浏览器缓存机制5.样式的优先级行内样式内部样式外部样式内部样式和外部样式 和编写顺序有关 后来者居上 以 后编写的为主 后面的覆盖前面相同元素的 不相同则不会覆盖同一个里面写 相同的属性元素也是以后面为主6.语法规范7.代码风格8.通配选择器可以选中所有html元素 格式如下style* {color:darkred;font-size: 40px;}/style9.元素选择器为某种元素统一设置样式h1{color: chartreuse;}h2{color: blue;}10.类选择器根据标签class的值进行分类选中一个标签p不能有多个class属性 一个class可以有多个值 要用空格隔开11.id选择器精准选中某个元素写作格式#me {color: brown;}h1 idme我说/h112复合选择器交集选择器不可以用两个元素选择器进行选择 因为标签名不可能既是span又是p标签 标签加类名 类名加类名都可以/* 选中类名包含me和wenhao的元素 两个元素选择器 */.me.wenhao{color: blueviolet;}h2 classme wenhao为啥不回消息/h2/* 选中类名为you的p元素 */p.you {color: aqua;}p classyou速回消息/p写法选择器1选择器2选择器3选择器4选择器5{} 无空隙间隔并集选择器 you或者why或者angry都选择选择器选择器选择器{} 任何形式都可以写注意最后一个选择器不写逗号.you,.why,.angry{font-size: 40px;width: 200px;background-color: chartreuse;}13html元素之间的关系父元素 直接报过某个元素的元素子元素 被父元素直接包含的元素祖先元素 父亲的父亲一直往外找 都是祖先元素 父元素算是祖先元素的一种后代元素 儿子的儿子 一直往里找 都是后代元素 子元素算是后代元素的一种兄弟元素 具有相同父元素的元素互为兄弟元素14后代选择器可以用各种选择器嵌套15子代选择器用连接 儿子 不是后代/* div的儿子a */diva {color: red;}16兄弟选择器两种都是向下找 第一个可能就覆盖不到/* 相邻兄弟选择器 *//* 选中div后紧紧相邻的兄弟p元素后面的 紧紧相连 才可使用 *//* divp{color: rgb(81, 255, 0);} *//* 通用兄弟选择器 *//* 选中div后所有的兄弟p元素 */div~p{color: red;}17属性选择器写法style/* 第一种写法 选中具有title属性的元素[title] {color: brown;} *//* 第二种写法 选中具有title属性 且属性值为xxx的元素[titleastudy01]{color: cornflowerblue;} *//* 第三种写法 选中具有title属性 且属性以字母X开头[title^c]{color: aquamarine;}*//* 第四种写法 选中具有title属性 且属性以字母X结尾*//* [title$y]{color: aquamarine;} *//* 第五种写法 选中具有title属性 且属性含有字母X */[title*y]{color: aquamarine;}/style18伪类选择器概念 很像类 但不是类 是元素特殊状态的一种描述写法/* 选中的是没有访问过的a元素 */a:link{color: rgb(0, 139, 32);}/* 选中的是访问过的a元素 */a:visited{color: rgb(139, 32, 0);}19