• 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.适配移动端
            -->

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

     1 <!-- html里面所有标签根据自身特点可以分为两种
     2 1.行元素
     3     1.1能在一行显示
     4     1.2不支持设置宽高,其大小有内容撑出
     5     1.3不支持垂直方向上的margin和padding
     6 2.块元素
     7     2.1独占一行
     8     2.2支持设置宽高,如果不设置,默认宽度和父元素一样
     9     2.3支持垂直方向上的margin和padding
    10 行元素:img,a,strong,em,span
    11 块元素:h1-h6,p,hr,ul,ol,li,div,form,pre
    12 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匈牙利命名法*/
    

      

    勤学似春起之苗,不见其增,日有所长; 辍学如磨刀之石,不见其损,日所有亏!
  • 相关阅读:
    HDU 6040 Hints of sd0061 —— 2017 Multi-University Training 1
    HDU 6038 Function —— 2017 Multi-University Training 1
    HDU 6034 Balala Power! —— Multi-University Training 1
    使用python将excel数据导入数据库
    python reload(sys)找不到,name 'reload' is not defined
    伯乐在线资讯URL
    伯乐在线文章URL
    慕课网python分布式爬虫打造搜索引擎视频中爬取伯乐网文章
    javascript HTML DOM 简单介绍
    css样式大全
  • 原文地址:https://www.cnblogs.com/qiaozhiming123/p/14269471.html
Copyright © 2020-2023  润新知