★ FEATURED ARTICLE HTML 全局属性id给标签指定的唯一标识不能重复作用可让 label 标签与表单控件相关联也可与 CSS / JavaScript 配合使用不能在以下 HTML 元素中使用head、html、meta、script、style、titleclass给标签指定类名后可通过 CSS 给标签设置样式style给标签设置 CSS 样式dir内容方向值ltr、rtl不能在以下 HTML 元素中使用head、html、meta、style、titletitle给标签设置一个文字提示一般用在超链接和图片lang给标签设置语言不能在以下 HTML 元素中使用head、html、meta、style、titlemeta 元信息head!--针对 IE 浏览器的一个兼容性设置--metahttp-equivx-UA-CompatiblecontentIEedge!--针对移动端的一个配置--metanameviewportcontentwidthdevice-width,initial-scale1.0!--配置关键字--metanamekeywordcontent8-12个以英文逗号隔开的单词/词语!--5.配置网页描述信息--metanamedescriptioncontent80字以内的一段话与网站内容相关!--6.针对搜索引擎爬虫配置--metanamerobotscontent内容见下!--7.配置网页自动刷新, 无法后退--metahttp-equivrefreshcontent10;urlhttp://www.baidu.com/headCSS编写位置1.行内样式bodyh1stylecolor:red;font-size:80px;欢迎来到尚硅谷学习/h1/body2.内部样式headstyle!--调整图片相同-- h1{color:red;font-size:80px;}/style/headbodyh1喜羊羊/h1/body问题结构与样式没有完全分离 、多个HTML页面无法复用样式3.外部样式1.新建一个.css文件随后在HTML文件中引用2.语法!--1、新建一个.css文件把所有css代码放入此文件 --h1{ color:red; font-size:80px; }!--2、在HTML文件中引入.css文件--linkrelstylesheethref./xxx.css3.注意3.1 link标签要写在 head 标签中3.2 href : 引入文档来自哪里rel : 说明引入文档与当前文档的关系样式表的优先级1.行内高于内部外部 /后面覆盖前面样式2.统一样式中优先级与编写顺序有关后面覆盖前面CSS语法规范选择器找到要添加样式的元素注释/* */CSS代码风格1.展开风格按规定写开发时使用便于调试/维护2.紧凑风格省略可以省略的符号 项目上线时使用减小文件体积!--紧凑--h1{color:red;font-size:80px;}CSS选择器1.通配选择器* { 属性名属性值 }2.元素选择器!--无法差异化--h2 { 属性名:属性值; }3.类选择器style/*选中页面中所有类名为xx的元素*/.xx{属性名:属性值;}/*选中页面中所有类名yy的元素*/.yy{属性名:属性值;}/stylepclassxx/ppclassyy/p1.元素class属性值不带 . ,但css的类选择器要带2.claa值自定义不能纯数字不能汉族尽量英文与数字结合用 - 链接3.一个元素不能有多个class4.一个元素的class属性能写多个值用空格隔开h1classspeak big222/h14.ID选择器1.根据元素的id属性值精准的选中某个元素2.语法style#id值{属性名:属性值;}#earthy{color:red;font-size:80px;}/style3.id属性值由字母数字, 下划线(_) ,短杠-组成最好以字母开头不能有空格区分大小写4.一个元素只能有一个id属性多个id属性值不能相同5.一个元素可以同时拥有id 和class属性CSS复合选择器1.交集选择器1.选择同时符合多个条件元素且的意思2.语法 选择器1选择器2选择器3…选择器n{}style/*选中类名为beauty的p元素*/p.beauty{color:bule;}/*选中类名包括rich和beauty的元素*/rich.beauty{color:green;}/stylebodypclassbeauty6666/ph2classrich beauty888/h2/body3.当有id时一般不用复合选择器2.并集选择器1.选中多个选择器对应的元素2.语法 选择器1,选择器2,选择器3,…选择器n{}style#peiqi, .rich, .beauty{font-size:80px;background-color:skyblue;width:200px;}/style3.一般用于集体声名缩小样式表体积HTML元素关系1.父元素2.子元素3.祖先元素4.后代元素5.兄弟元素3.后代选择器1.选择指定元素中符合要求的后代元素2.语法 选择器1 选择器2 选择器3 …选择器n{} 选择器之间用空格隔开选择器可以是之前的任何选择器style/*选中ul中的所有li*/ul li{color:red;}/*选中ul中所有li的a*/ul li a{color:orgen;}/*选中类名为subject元素中的所有li*/.subject li{color:bule;}/*选中类名为subject元素中的所有类名为front-end的li*/.subject li.front-end{color:blue;}/style3.结构要符合规定4.子代选择器1.选择指定元素中符合要求的子元素2.语法 选择器1 选择器2 选择器3 …选择器n{}style/*ul中的子代li元素*/ulli{color:red;}/style5.兄弟选择器1.指定元素1后紧紧相临的元素2选择器1 选择器22.指定元素1后所有的兄弟2元素选择器1~选择器2headstyle/*div后相邻的兄弟p*/divp{color:red;}/style/headbody/*div后所有的兄弟p*/ div~p { color:red; }/body6.属性选择器1.[属性名] 选中某个属性的元素2.[属性名“值”] 包含某个属性且属性值等于指定值的元素3.[属性名^“值”]包含某个属性属性值等于开头的元素4.[属性名$“值”]属性值为指定的结尾的元素5.[属性名*“值”]属性值包含指定的元素style/*选中具有title属性的元素*/div[title]{}/*选中title属性值为atguigu的元素*/div[titleatguigu]{}/*选中title属性值为a开头的元素*/div[title^a]{}/*选中title属性值以u结尾的元素*/div[title$u]{}/*选中title属性值包含g的元素*/div[title*g]{}/style7.伪类选择器1.概念作用选中特殊状态的元素像类但不是类是元素的一种状态7.1动态伪类1.:link 超链接未被访问的状态2.:visited 访问过的状态3.:hover 鼠标悬停·在元素上的状态4.:active 元素激活的状态按下鼠标不收开编写顺序l v h a5.:focus 获取焦点的元素表单类元素才能使用 :focus 伪类当点击元素触摸元素通过键盘 “tab” 键等方选择元素时就是获取焦点7.2.1结构伪类headstyle/*选中的是div的第一个儿子p元素---结构1*/divp:first-child{color:red;}/*选中的是div的后代p元素且p的父亲是谁无所谓但p必须为父亲的第一个儿子---结构2*/div p:first-child{color:red;}/*选中的是p元素且p的父亲是谁无所谓但p必须为父亲的第一个儿子----结构2*/p:first-child{color:red;}/style/headbody!--结构1--divp1111/pp2222/pp3333/p/div!--结构2--p11/pdivp22/pmarqueep33/pp44/p/marqueep55/pp66/pp77/p/div/body7.2.2结构伪类headstyle/*选中的是div的最后一个p元素 (按所有兄弟计算)*/divp:last-child (2){color:red;}/*选中的是div的第n个儿子p元素(按所有兄弟计算)---结构1*//*括号里可为公式-anb的形式*//*n不能为0空even为偶数odd为奇数-n3为选中前三个*/divp:nth-child (2){color:red;}/*结构2*//*选中的是div的第一个儿子p元素所有同类型兄弟计算的*/divp:first-of-type{color:red;}/*选中的是div的最后一个个p元素 (按所有兄弟计算)*/divp:last-of-type{color:red;}/*选中的是div的第n个p元素所有同类型兄弟计算的*/divp:nth-of-type(3){color:red;}/style/headbody!--结构1--divp1111/pp2222/pp3333/p/div!--结构2--divspan999/spanp1111/pp2222/pp3333/p/div/body7.2.3结构伪类style/*div中倒数第n个p元素按照所有兄弟*/divp:nth-last-child(){}/*div中倒数第n个p元素按照所有同类型兄弟*/divp:nth-last-of-type(){}/*选中的是没有兄弟的span元素*/span:only-child{}/*选中的是没有同类型兄弟的span元素*/span:only-of-type{}/*选中的是html的根元素*/:root{}/*选中的是没有内容的div元素*/div:empty{width:;height:;background-color:;}/style
阅读完成 · 觉得有帮助？
