笔记常用的全局属性id元素唯一标识整个页面不能重复用于 CSS 选择器、JS 获取元素、锚点跳转class给元素设置类名多个类空格分隔CSS 样式复用最常用style行内样式直接写 CSS不推荐大量使用dir文字方向ltr从左到右rtl从右到左title鼠标悬浮时弹出提示文字lang声明元素内文本语言zh-CN中文en英文meta元信息配置字符编码metacharsetutf-8针对 IE 浏览器的兼容性配置metahttp-equivX-UA-CompatiblecontentIEedge针对移动端的配置metanameviewportcontentwidthdevice-width, initial-scale1.0配置网页关键字metanamekeywordscontent8-12个以英文逗号隔开的单词/词语配置网页描述信息metanamedescriptioncontent80字以内的一段话与网站内容相关针对搜索引擎爬虫配置metanamerobotscontent此处可选值见下表配置网页作者metanameauthorcontenttony配置网页生成工具metanamegeneratorcontentVisual Studio Code配置定义网页版权信息metanamecopyrightcontent2023-2027©版权所有配置网页自动刷新metahttp-equivrefreshcontent10;urlhttp://www.baidu.comCSS层叠表样式文字大小、背景颜色、元素宽高等层叠一层一层“涂”上去表列表行内样式语法标签名style属性名:属性值;属性名:属性值;内容/标签名e.g.h1stylecolor:red;font-size:60px;测试文字/h1内部样式语法选择器 { css属性: 属性值; css属性: 属性值; }e.g.styleh1{color:red;font-size:40px;}/style注意style标签一般放在head标签中并没有实现结构与样式完全分离外部样式写在单独的.css文件中随后在HTML文件中引入使用语法新建一个扩展名为.css的样式文件把所有CSS代码都放入此文件中h1{color:red;font-size:40px;}在 HTML 文件中引入.css文件linkrelstylesheethref./xxx.css注意点link标签要写在head标签中。link标签属性说明href引入的文档来自于哪里。rel(relation关系) 说明引入的文档与当前文档之间的关系。外部样式的优势样式可以复用、结构清晰、可触发浏览器的缓存机制提高访问速度实现了结构与样式的完全分离。实际开发中几乎都使用外部样式这是最推荐的使用方式样式表的优先级行内样式内部样式外部样式后来者居上语法规范通配选择器作用可以选中所有的 HTML 元素语法*{属性名:属性值;}e.g.*{/* 选中所有元素 */color:orange;font-size:40px;}元素标签选择器作用为页面中某种元素统一设置样式。语法标签名{属性名:属性值;}e.g./* 选中所有h1元素 */h1{color:orange;font-size:40px;}/* 选中所有p元素 */p{color:blue;font-size:60px;}备注元素选择器无法实现差异化设置类选择器作用根据元素的class值来选中某些元素语法.类名{属性名:属性值;}e.g./* 选中所有class值为speak的元素 */.speak{color:red;}/* 选中所有class值为answer的元素 */.answer{color:blue;}一个元素不能写多个class属性下面是错误示例!-- 该写法错误元素的属性不能重复后写的会失效 --h1classspeakclassbig你好啊/h1一个元素的class属性能写多个值要用空格隔开例如!-- 该写法正确class属性能写多个值 --h1classspeak big你好啊/h1ID选择器作用根据元素的id属性值来精准的选中某个元素语法#id值{属性名:属性值;}e.g./* 选中id值为earthy的那个元素 */#earthy{color:red;font-size:60px;}id属性值尽量由字母、数字、下划线 (_)、短杠 (-) 组成最好以字母开头、不要包含空格、区分大小写交集选择器作用选中同时符合多个条件的元素交集有并且的含义通俗理解即…… 又…… 的意思例如年轻且长得帅。语法选择器1选择器2选择器3…选择器n {}e.g./* 选中类名为beauty的p元素为此种写法用的非常多 */p.beauty{color:blue;}/* 选中类名包含rich和beauty的元素 */.rich.beauty{color:green;}并集选择器作用选中多个选择器对应的元素又称分组选择器所谓并集就是或者的含义通俗理解要么…… 要么…… 的意思例如给我转 10 万块钱或者我报警语法选择器1,选择器2,选择器3,…选择器n {}多个选择器通过,连接此处,的含义就是或e.g./* 选中id为peiqi或类名为rich或类名为beauty的元素 */#peiqi, .rich, .beauty{font-size:40px;background-color:skyblue;width:200px;}Remark:并集选择器一般竖着写HTML元素间的关系后代选择器作用选中指定元素中符合要求的后代元素语法选择器1 选择器2 选择器3 …… 选择器n {}先写祖先再写后代选择器之间用空格隔开空格可以理解为“xxx中的”其实就是后代的意思。选择器1234……n可以是我们之前学的任何一种选择器。e.g./* 选中ul中的所有li */ul li{color:red;}/* 选中ul中所有li中的a */ul li a{color:orange;}/* 选中类名为subject元素中的所有li */.subject li{color:blue;}/* 选中类名为subject元素中的所有类名为front-end的li */.subject li.front-end{color:blue;}子代选择器作用选中指定元素中符合要求的子元素儿子元素。先写父再写子子代选择器又称子元素选择器、子选择器。语法选择器1 选择器2 选择器3 …… 选择器n {}选择器之间用隔开可以理解为“xxx的子代”其实就是儿子的意思。选择器1234……n可以是我们之前学的任何一种选择器。e.g./* div中的子代a元素 */diva{color:red;}/* 类名为persons的元素中的子代a元素 */.personsa{color:red;}注意:子代选择器最终选择的是子代不是父级。子、孙子、重孙子、重重孙子…… 统称后代子就是指儿子。兄弟选择器相邻兄弟选择器作用选中指定元素后符合条件的相邻兄弟元素。所谓相邻就是紧挨着他的下一个简记睡在我下铺的兄弟。语法选择器1选择器2 {}e.g./* 选中div后相邻的兄弟p元素 */divp{color:red;}通用兄弟选择器作用选中指定元素后符合条件的所有兄弟元素。简记睡在我下铺的所有兄弟语法选择器1~选择器2 {}e.g./* 选中div后的所有的兄弟p元素 */div~p{color:red;}注意两种兄弟选择器选择的是下面的兄弟属性选择器作用选中属性值符合一定要求的元素。语法[属性名]选中具有某个属性的元素。[属性名值]选中包含某个属性且属性值等于指定值的元素。[属性名^值]选中包含某个属性且属性值以指定的值开头的元素。[属性名$值]选中包含某个属性且属性值以指定的值结尾的元素。[属性名*值]选择包含某个属性属性值包含指定值的元素。e.g./* 选中具有title属性的元素 */div[title]{color:red;}/* 选中title属性值为atguigu的元素 */div[titleatguigu]{color:red;}/* 选中title属性值以a开头的元素 */div[title^a]{color:red;}/* 选中title属性值以u结尾的元素 */div[title$u]{color:red;}/* 选中title属性值包含g的元素 */div[title*g]{color:red;}常用的伪类选择器动态伪类:link超链接未被访问的状态。:visited超链接访问过的状态。:hover鼠标悬停在元素上的状态。:active元素激活的状态。激活按下鼠标不松开。注意点遵循LVHA的顺序即link、visited、hover、active。:focus获取焦点的元素。表单类元素才能使用:focus伪类。当用户点击元素、触摸元素、或通过键盘的 “tab” 键等方式选择元素时就是获得焦点。结构伪类选中的是div的第一个儿子p元素按照所有兄弟计算的divp:first-child{color:red;}选中的是div的最后一个儿子p元素按照所有兄弟计算的divp:last-child{color:red;}选中的是div的第n个儿子p元素按照所有兄弟计算的divp:nth-child(3){color:red;}选中的是div的第偶数个儿子p元素按照所有兄弟计算的divp:nth-child(2n){color:red;}或者divp:nth-child(even){color:red;}选中的是div的前五个儿子p元素按照所有兄弟计算的divp:nth-child(-n5){color:red;}错误写法divp:nth-child(5-n){color:red;}格式anb选中的是div的第一个儿子p元素按照所有同类型兄弟计算的divp:first-of-type{color:red;}选中的是div的最后一个儿子p元素按照所有同类型兄弟计算的divp:last-of-type{color:red;}选中的是div的第n个儿子p元素按照所有同类型兄弟计算的divp:nth-of-type(5){color:red;}选中的是div的倒数第n个儿子p元素按照所有兄弟计算的divp:nth-last-child(3){color:red;}选中的是div的倒数第n个儿子p元素按照所有同类型兄弟计算的divp:nth-last-of type(2){color:red;}选中的是没有兄弟的span元素按照所有兄弟计算的独生子女span:only-child{color:red;}选中的是没有同类型兄弟的span元素按照所有兄弟计算的span:only-of-type{color:red;}选中的是根元素:root{background-color:gray;}选中的是没有内容的div元素空格也算内容div:empty{width:100px;height:100px;backgroundcolor:red;}作业!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title校园失物招领/titlelinkrelstylesheethrefstyle.css/headbodymainh1校园失物招领/h1imgsrcimages/notebook.pngalt笔记本h2谁的笔记本/h2pclassa物品编号SW-016/pp捡到一本spanstylecolor:blue;蓝色笔记本/span封面上没有姓名。/ppclassa拾取地点操场看台/ppclassa拾取时间周三午休/ph2物品特征/h2ulli封面为蓝色没有姓名。/lili前几页写有课堂笔记。/lilistylecolor:green;书页中夹着一张白色书签。/li/ulh2认领须知/h2olli先核对物品特征再到值班室登记。/lili认领时请说明笔记本里的内容。/lili确认信息后签字领取物品。/li/olpclasswarnstylecolor:red;温馨提醒请勿代领避免拿错。/pp认领地点教学楼一楼值班室。/p/main/body/html/* 基础排版已提供可直接使用。这部分不作为考点。 margin 是外边距padding 是内边距不要求记忆或自行调整。 在本文件末尾添加你自己的选择器规则。 */body{margin:0;padding:30px;background-color:whitesmoke;color:black;font-family:Microsoft YaHei,sans-serif;font-size:18px;line-height:1.8;}main{width:600px;margin:0 auto;padding:30px;background-color:white;}h1{margin:0 0 20px;font-size:32px;color:blue;}h2{margin:20px 0 12px;font-size:24px;color:blue;}img{display:block;width:600px;}p{margin:12px 0;}ul, ol{margin:12px 0;padding-left:28px;}/* 在下面自行编写样式选择器和 class、id 名称由你决定。 */.a{color:grey;}