zoukankan      html  css  js  c++  java
  • 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匈牙利命名法*/
    

      

    勤学似春起之苗,不见其增,日有所长; 辍学如磨刀之石,不见其损,日所有亏!
  • 相关阅读:
    请允许我们发个广告——与云共舞:以华为云精英服务商为起点开展我们的云业务团队
    【故障公告】再次出现数据库 CPU 居高不下的问题以及找到了最可能的原因团队
    【故障公告】升级阿里云 RDS SQL Server 实例故障经过团队
    【故障公告】阿里云 RDS 数据库服务器 CPU 100% 造成全站故障团队
    全网最详细的Sublime Text 3的激活(图文详解)
    全网最详细的Windows里下载与安装Sublime Text *(图文详解)
    全网最详细的大数据集群环境下多个不同版本的Cloudera Hue之间的界面对比(图文详解)
    全网最详细的Cloudera Hue执行./build/env/bin/supervisor 时出现KeyError: "Couldn't get user id for user hue"的解决办法(图文详解)
    全网最详细的大数据集群环境下如何正确安装并配置多个不同版本的Cloudera Hue(图文详解)
    Hive执行过程中出现Caused by : java.lang.ClassNotFoundException: org.cloudera.htrace.Trace的错误解决办法(图文详解)
  • 原文地址:https://www.cnblogs.com/qiaozhiming123/p/14269471.html
Copyright © 2011-2022 走看看