HTML,CSS实训笔记

HTML笔记

1、HTML -- 超文本标记语言



2、html 结构
(代表H5)

   
       
   


   
   



3、常用标签
 3.1、块级标签
       特点:独占一行,前后会主动换行
       标题标签(h1--h6)
       段落标签(p)
       水平线(
)
       有序列表
         

               
  1. (多个)
             

       无序列表
           

               
  • (多个)
               

       div -- 主要用于分区
 3.2、行级标签
        特点:按行逐一显示,不会自动换行
       文本类的
           加粗(b)
           斜体(i)
           强调(em)
           粗体(strong)
           小号字体(small)
           下标(sub)
           上标(sup)
           文本显示方向(bdo 属性:dir)
       超链接
            文本/图片


       图片
            提示文字


       span标签--包裹特殊文字
       换行

       空格:能够识别一个空格,如果多个,使用 
       版权:©
 4、form表单
       

       表单元素
         
           type = "text" 文本框
           type = "password" 密码框
           type = "radio" 单选框 -- 同一组的单选框,name要一样
           type = "checkbox" 多选框-- 同一组的多选框,name要一样
           type = "submit" 提交按钮 可以通过value属性修改显示的内容
           type = "reset" 重置按钮  可以通过value属性修改显示的内容

       

CSS笔记

一、HTML和CSS的区分
HTML---负责的是页面的内容
CSS----负责的是页面的样式(颜色、字体、位置、动画)
二、
那么html跟css如何建立关联
引入CSS样式,提供了3中方式
1、行内样式(知道即可,不推荐使用)
    格式:写在标签里边,通过style属性
    eg:


2、内部样式(近两天会使用到,以后就不建议使用了)
    格式:写在head里,通过style标签
    eg:
3、外部样式(推荐使用这种方式,以后就用这种方式)
    格式:html和css分离,是不同的文件,使用的时候要引入进来
    eg:① (较常使用)
       ②


三、修改样式
首先你要明确对谁进行修改,找到它,然后修改就可以
怎么找到你要修改的元素啊?
同样提供了3种方式
    第一种:元素选择器(HTML中的标签名)
    p{
        属性名:值;
    }
    特点:适用于所有的p元素,范围比较广


    第二种:类选择器
    .类名{
        属性名:值;
    }
    特点:比元素选择器精准
    eg:




    第三种:id选择器
    #id名{
        属性名:值;
    }
    特点:更为精准,能够找到唯一的那个元素
    eg:


    第四种:通配符(适用于所有的元素,慎用)
    *{
        padding:0;
        margin:0;
        取消标签默认的一些内边距和外边距
    }


4、修改样式
    字体类修改
        color
        font-family
        font-style
        font-size
        font-weight
        text-decoration
        text-indent
        text-align
        text-transform
        line-height
        letter-spacing
        word-spacing
    边框
        border-style
        border-color
        border-width
        以上三条都可以简写:border:solid 1px red;


        border-top、bottom、left、right


        border-radius 边框弧度
        border-radius:10px
        border-radius:100% 圆形


        可以使用border画一个三角形


    背景:
        background-color
        background-image:url("图片地址");
        background-repeat:repeat、repeat-x、repeat-y、no-repeat
        backgroung-position: 10px 20px 第一个值距离左边的像素值,第二个距离上边的像素值
        以上三条可以简写
        background:url("图片地址") no-repeat center;


    列表:
        list-style-image:url("图片地址"); 使用图片替换原有的黑点
        list-style-position:inside、outside;黑点的位置,默认在外边
        以上可以简写:
        list-style:none;取消默认的黑点


    盒子模型:
        元素的组成部分:内容(content)+填充物(padding)+边框(border)+外边距(margin)
        其中:padding :指的是内容和边框之间的距离
              margin:指的是元素跟元素之间的距离
        padding-left、right、top、bottom
        以上可简写  padding:10px;
                    padding:10px 20px;
                    padding:10px 20px 30px 40px;


        margin:同上。

你可能感兴趣的:(HTML,CSS实训笔记)