css学习day01

<!--
            HTML:Hyper Text Markup Language超文本标签语言
            css:Cascading Style Sheet 层叠样式表 作用：决定如何显示html元素。
        -->
        <!--
            常用的部分css样式：
            1.宽度width 单位：px
            2.高度height 单位：px
            3.背景颜色background-color 单位：颜色单词
            4.文字颜色color 单位：颜色单词
            5.文字大小font-size 单位：px
            6.行高line-height    单位：px
            7.文本对齐方式text-align 值：left/center/right
            8.首行缩进text-indent 单位：px
            9.12px支持最小字体，16px浏览器默认字体,区分是不是单词的标准有没有”空格“，
            10.center、left
        -->
        <!--书写css样式的三种方式
            1.行间css样式 直接在标签内通过style属性书写css样式。
            2.内联css样式 在head标签里面通过style标签书写css样式。
            3.外联css样式 单独创建一个css样式书写css样式。
            w3c对html的书写有这样的规范建议
            结构(html)，样式(css)，行为(js)三者尽可能做到相分离.
        -->

引用外联样式是，link和@import的区别和使用方法

<!--如何引用css文件
            1.@import方式引用，@开头全是css代码
            2.link标签引入，是html代码
            @import和link方式引用css文件的区别
            1.@import是css语法，link是html语法
            2.@import只能引用css类型文件，link可以引用其他类型文件
            3.@import 必须等到html文档加载完成后才开始加载，link会在文档加载的同时加载引用文件
            4.@import引用的代码后期无法修改，link引入代码后期可通过js修改
        -->
        <link rel="stylesheet" type="text/css" href="style/s1.css"/>
        <!--<style type="text/css">
            @import url("style/s1.css");
        </style>-->

head中mate标签的作用

<!--meta标签单标签配置网站的原信息
            当前meta标签的作用设置当前文件的字符集（语言类型）
            将来我们还会通过meta标签做奇特配置
            如：1.兼容ie浏览器
            2.设置seo优化数据
            3.适配移动端
        -->

行元素、块元素特点和区别

<!-- html里面所有标签根据自身特点可以分为两种
1.行元素
    1.1能在一行显示
    1.2不支持设置宽高，其大小有内容撑出
    1.3不支持垂直方向上的margin和padding
2.块元素
    2.1独占一行
    2.2支持设置宽高，如果不设置，默认宽度和父元素一样
    2.3支持垂直方向上的margin和padding
行元素：img,a,strong,em,span
块元素：h1-h6,p,hr,ul,ol,li,div，form,pre
br,img替换元素-->

快捷键语法详情

<!--
	emmet语法
	1.写标签，标签名+tab键
	2.标签名1+标签名2+标签名3+......+tab键，所有标签一次生成，之间互为兄弟标签
	3.标签名1>标签名2>标签3>...+tab键，所有代码一次生成。之间互为父子标签
	4.标签名*n+tab键，一次书写多个同名标签。
	5.$配合*使用，$会从1自增。
	6.{}里面可以书写标签的文本内容
	7.[]里面可书写标签的属性
	8.()表示一个整体-->
//案例
div+p+span 
div>p>span
 div>p+span 
ul>li*5 h$*6 div{这是div$元素}*10
 a[href=###]{超链接$}*5 
ul>(li>a[href=###]{超链接$})*5

　　常用选择器

/*1.通配符选择器 能找到当前文档里的所有标签*/
			
			/*2.元素选择器 能找到当前文档中所有的同类型的某中标签
			 语法
			 标签名{
			 	
			 }*/
			/*3.id选择器能找到当前文档里设置了对应id值的某个元素
			 注意：id值要具有唯一性
			 语法：
			 #id值{
			 	
			 }
			 需要事先对要找到的元素设置id值*/
			/*
			 4.class选择器 能找到文档中若干个任意类型的标签
			 语法：
			 .class值{}
			 需要事先对要找到的元素设置class值*/
			/*
			 5.子选择器 找到当前文档里与选择器1成父子关系的选择器2表示的元素
			 注意：这种父子关系可以不断向后延伸
			 语法：
			 选择器1>选择器2>...{
			 	
			 }*/
			/*
			 6.后代选择器
			 语法：标志空格
			 选择器1 选择器2{
			 	
			 }*/
			/*
			7. 相邻兄弟选择器，相邻、且在其下面.找到当前文档里与选择器1表示的元素相邻且在其下面的选择器2表示的元素。
			选择器1+选择器2+...{
				
			}
			*/
			/*
			 命名规则：
			 1.只能有数字、字母、下划线组成
			 2.数字不开头
			 3.见名之意
			 需要多个单词时
			 1.helloWorld驼峰命名法
			 2.HelloWorld帕斯命名法
			 3.iHelloWorld匈牙利命名法*/