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;
   

你可能感兴趣的:(css,html,css3)