html-day03列表&css初识
1.列表
1.有序列表 <ol> <li>列表项</li> <li>列表项</li> </ol> 2.无序列表 <ul> <li>列表项</li> <li>列表项</li> </ul> 注意： ol或者ul里面只能有li,li里面可以有任何标签。 3.自定义列表 <dl> <dt>名词或者术语或者图片</dt> <dd>对名词术语的解释说明</dd> </dl>
自定义列表使用三种场景： 场景一：<dl> <dt>名词或者术语</dt> <dd>对名词术语的解释说明</dd> <dt>名词或者术语</dt> <dd>对名词术语的解释说明</dd> <dt>名词或者术语</dt> <dd>对名词术语的解释说明</dd> ... </dl> 场景二：<dl> <dt>图片</dt> <dd>对图片的解释说明</dd> </dl> <dl> <dt>图片</dt> <dd>对图片的解释说明</dd> </dl> ... 场景三：<dl> <dt>文字</dt> <dd> <a href="#">文字 <a href="#">文字 <a href="#">文字 ... </dd> </dl>
2.css:层叠样式表
css3最新版本的css.
1.语法：
选择器{ 属性:属性值; 属性:属性值; } 改变文字大小的属性 font-size: * px; 改变文字颜色的属性 color:颜色;
2.css的三种引入方式
1.内联式（行内样式） <元素 style=" 属性：属性值;属性:属性值; ">内容</元素> 2.内部式 <head> ... <style> 选择器{ 属性:属性值; 属性:属性值; } </style> </head> 3.外链式 外部引入方式一： 1.新建一个以.css为后缀的css文件 2.在head标签里面加入link标签，在link标签的href属性里面，填入对应的css文件路径 <head> ... <link rel="stylesheet" href='css文件路径'> </head> 3.在css文件里面按照css基本语法写代码，记得保存！ 外部引入方式二： 1.新建一个以.css为后缀的css文件 2.在head标签 <head> ... <style type="text/css"> @import url"css文件的路径" </style> </head>
扩展知识点：link和import之间的区别？ 差别1：本质的差别：link属于XHTML标签，而@import完全是CSS提供的一种方式。 差别2：加载顺序的差别：当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。 差别3：兼容性的差别：@import是CSS2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。 差别4：使用dom(document o bject model文档对象模型 )控制样式时的差别：当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的
3.选择器：是一种匹配模式，主要用于选中想要做样式的元素。
选择器整体分为5大类：
基本选择器、层次选择器、伪类选择器、属性选择器、伪对象（伪元素）选择器
基本选择器 1.通用选择器：选中所有元素 * { } 2.标签选择器:选中所有指定的标签 标签名{ } 3.类选择器:选中所有有指定类名的元素 .类名{ } 类名是通过给元素设置class属性得到的. <元素 class='自己取的类名' ></元素> 4.id选择器:选中有指定id名的元素 #id名{ } id名是通过给元素设置id属性得到的 <元素 id='自己取的id名' ></元素> id名是唯一的,类名是可以重复的. 一般给大盒子id名,给里面的元素使用类名. 伪类选择器 e:hover{ } 鼠标悬停在e元素身上的时候,给e设置样式. 其他伪类： a:link{ 未访问的链接 } a:visited{ 已经访问的链接 } a:active{ 激活的链接（按住的时候） }
4.css优先级的判定规则. [面试题]
权重之和,和越大,越优先.和一样,后者覆盖前者. !important > 行内样式 > id > 类 > 标签 > * > 继承 > 默认 无穷 1000 100 10 1 0 ！important使用方法： 属性:属性值 !important;
![[HTML、CSS]细节与使用经验](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635950/20241110/4a6bb78b9c294263bd2e005a5c2642e0.gif?x-oss-process=image/resize,h_160,m_lfit)
![[HTML、CSS]知识点](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635461/20241109/bcc34220ff734707ab00ebc739596dff.jpeg?x-oss-process=image/resize,h_160,m_lfit)