zoukankan      html  css  js  c++  java
  • css学习小结

    Css学习总结:

    html 在一个网页中负责的事情是一个页面的结构

        

        css(层叠样式表在一个网页中主要负责了页面的数据样式。

        

    编写css代码的方式

        第一种: 在style标签中编写css代码。   只能用于本页面中,复用性不强。

            格式 :

                <style type="textcss">

                    编写css的代码。

                </style>   

            例子:

             <style type="textcss">

                a{

                        color:#F00;

                        text-decoration:none;

    }

            </style>   

         

         第二种: 可以引入外部的css文件。  推荐使用。

            方式1: 使用link标签。   推荐使用...

             格式:

                 <link href="css文件的路径" rel="stylesheet">

                例子: <link href="1.css" rel="stylesheet"/>

         

            方式2:使用<style>引入

                 格式:

                  <style type="text/css" >

                         @import url("css的路径");

                        </style>

                 例子:

                  <style type="text/css" >

    @import url("1.css");

    </style>

        

        第三种方式:直接在html标签使用style属性编写。    只能用于本标签中,复用性较差。 不推荐使用。

              例子:

               <a style="color:#0F0; text-decoration:none" href="#">新闻的标题1</a>

            

    -->

    <style type="text/css">

    html的注释:<!-- html的注释 -->

    css /* css的注释 ..*/

    /*

    选择器: 选择器的作用就是找到对应的数据进行样式化。

    1.标签选择器: 就是找到所有指定的标签进行样式化。

    格式:

    标签名{

    样式1;样式2....

    }

    例子:

    div{

    color:#F00;

    font-size:24px;

    }

    2. 类选择器使用类选择器首先要给html标签指定对应的class属性值。

    格式:

    .class的属性值{

    样式1;样式2...

    }

    例子:

    .two{

    color:#F00;

    font-size:24px;

    }

    类选择器要注意的事项:

    1. html元素的class属性值一定不能以数字开头.

    2. 类选择器的样式是要优先于标签选择器的样式。

    3. ID选择器: 使用ID选择器首先要给html元素添加一个id的属性值。

    ID选择器的格式:

    #id属性值{

    样式1;样式2...

    }

    id选择器要注意的事项:

    1. ID选择器的样式优先级是最高的,优先于类选择器与标签选择器。

    2. ID的属性值也是不能以数字开头的。

    3. ID的属性值在一个html页面中只能出现一次。

    4. 交集选择器: 就是对选择器1中的选择器2里面的数据进行样式化。

    选择器选择器2{

    样式1,样式2....

    }

    例子:

    .two span{

    background-color:#999;

    font-size:24px;

    }

    5. 并集选择器: 对指定的选择器进行统一的样式化。

    格式:

    选择器1,选择器2..{

    样式1;样式2...

    }

    span,a{

    border-style:solid;

    border-color:#F00;

    }

    6. 通用选择器:

    *{

    样式1;样式2...

    }

    伪类选择器:伪类选择器就是对元素处于某种状态下进行样式的。

     注意:

      1. a:hover 必须被置于 a:link 和 a:visited 之后

    2. a:active 必须被置于 a:hover 之后

    a:link{color:#F00} /* 没有被点击过---红色 */

    a:visited{color:#0F0} /*  已经被访问过的样式---绿色 */ 

    a:hover{color:#00F;} /* 鼠标经过的状态---蓝 */

    a:active{color:#FF0;}

    </style>

    盒子模型: 盒子模型就是把一个html边框比作成了一个盒子的边框,盒子模型要做用于操作数据与边框之间的距离或者 是边框与边框之间的距离。

    盒子模型主要是用于操作内边距(padding)外边距(margin

    css的定位

    相对定位: 相对定位是相对于元素原本的位置进行移动的。

          使用方式: position:relative;

    绝对定位: 绝对定位是相对于整个页面而言。

    position:absolute; 

    top:200px;

    left:380px;

    固定定位:

    position:fixed; /* 固定定位固定定位是相对于整个浏览器而已的。*/ 

    top:380px;

    left:1000px;

  • 相关阅读:
    5. Longest Palindromic Substring
    56. Merge Intervals
    386. Lexicographical Numbers
    42. Trapping Rain Water
    *[topcoder]BracketExpressions
    [codility]CountDiv
    *[codility]MinAvgTwoSlice
    *[codility]MissingInteger
    [mock]7月25日
    网络广告术语
  • 原文地址:https://www.cnblogs.com/he-shao/p/5468468.html
Copyright © 2011-2022 走看看