html-day03列表&css初识

2022/2/13 23:46:43

编程Tag： 选择器属性标签 css html import id day03

本文主要是介绍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:visited{
    		color:orange;
		}
		a:active{
    		color:red;
		}
		...`在这里插入代码片`

4.css优先级的判定规则. [面试题]

权重之和,和越大,越优先.和一样,后者覆盖前者.
!important > 行内样式 > id > 类  > 标签  > * > 继承 > 默认
    无穷        1000    100  10     1     0   
！important使用方法：
属性:属性值 !important;

这篇关于html-day03列表&css初识的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！