CSS的简单概述

一、CSS的使用方式

1、行内样式

      格式:<HTML 标签 style="样式属性:取值;样式属性:取值;..."><HTML 标签>

      例如:<h1 style="color:orange">标题1</h1>    (不提倡使用)

2、内部样式

     格式:<head>

               <style type="test/css">

                选择器1{样式属性1:取值;样式属性2:取值;...}

                选择器2{样式属性1:取值;样式属性2:取值;...}

                ......

                </style>

                </head>

3、外部样式

      格式:<head>

                        <link rel="stylesheet" type="text/css" href="样式表文件的地址">

                </head>

                    rel="stylesheet"属性用来生明在HTML文件中使用外部样式表。

                    type="text/css"属性用来指明该文件的类型是样式表文件。

                    href="...."属性用来指定样式表文件的路径和名称。

二、CSS的选择器

    1、标签选择器

            <style type="text/css">

            div{
                font-size: 24px;
                color: #f00;
                }

            </style>

            <body>

            <div>div的内容</div>

             </body>

    2、id选择器

            <style type="text/css">

            #div1{
                font-size: 24px;
                color: #f00;
                }

            </style>

            <body>

            <div id=div1>div1的内容</div>

             </body>

    3、类选择器

            <style type="text/css">

            .div2{
                font-size: 24px;
                color: #f00;
                }

            </style>

            <body>

            <div class=div2>div2的内容</div>

             </body>

    4、并集选择器(分组选择器)
            #div1,.divCls,...{
                background-color: #f00;
            }
           (选择器之间用逗号隔开)
    5、交集选择器(包含选择器)
            #div1 span{
            font-size: 24px;
                color: #0f0;    
            }
            (父选择器:#div1 子选择器:span,用空格隔开)

    6、通用选择器:

          *{

            background-color: #f00;

         }

三、伪类选择器

        <style type="text/css">
            没有访问过的状态
            a:link{
                font-size: 24px;
                color: #f00;
            }
            
            鼠标访问过的状态:visited:点击了,并且松开的状态
            a:visited{
                font-size: 24px;
                color: :#FFFFCC;
                text-decoration: none;
            }
            
            鼠标经过的状态:hover
            a:hover{
                font-size: 24px;
                color: #00f;
                text-decoration: none; 文本修饰
            }
            
            鼠标激活状态:active:鼠标点击,但是没有松开的状态
            a:active{
                font-size: 24px;
                color: #0f0;
                text-decoration: underline;
            }
        </style>
   
    <body>
        <a href="01.CSS的选择器.html">超链接</a>
     </body>
          (  锚伪类要循环显示一种效果:四个状态必须有先后循环
            
            提示:在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。

 

            提示:在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。)

四、CSS文本

    <style type="text/css">
            
            body{
                
                文本颜色属性:color
                color: #f00;
              
                line-height:行高
                line-height: 60px;
                
                letter-spacing:字符间距
                letter-spacing: 10px;
                
                text-align:文本的对其方式
                text-align: center;
                
                word-spacing:字间距:shu默认两个组成的叫单词
                word-spacing: 10px;
                
                
                 文本修饰
                 text-decoration
                 常用的属性值
                 underline:下划线
                 none:没有下划线
                 overline:上划线
                 line-through:中划线

             
                text-decoration: line-through;

            }

五、CSS字体

    <style type="text/css">
            body{
                 font-family:字体系列(类型)
                 系统默认是宋体

                 font-family: "楷体";
                
                font-size:字体尺寸
                font-size: 24px;
                
                
                font-style:字体的样式
                常用的属性值:
                normal:标准的字体样式
                italic:斜体

                
                font-style: italic;
                
                
                font-wight:设置字体的粗细
                 属性值:bold:适当加粗

                
                font-weight: bold;
                
                CSS字体的简写属性
                font:italic bold 36px "黑体" ;
                
            }
            

        </style>

六、CSS背景

    body{
                背景颜色:background-color
                background-color: #0CF;
                
                
                背景图片:background-image:
                 属性:url指定图片的路径

                
                background-image: url(img/mm.jpg);
                
                background-repeat:设置背景图片是否重复以及如何重复
                常用的属性值:
                             默认值:repeat:x轴和y轴重复
                             repeat-x:背景图片水平方向重复
                             repeat-y:y轴重复
                             no-repeat:不重复

                
                background-repeat: no-repeat;
                
                background-position 设置背景图像的起始位置
                可能用到的属性值
                图片的显示的位置   图片在浏览器中的位置
                                  top            left
                           content            center
                            bottom           right

               
                background-position: top right;
                
                
                CSS背景图片的简写属性

                background: #f00 url(img/mm.jpg) no-repeat top center;                
            }

        </style>

七、CSS列表

    <style>
            body ul{
                list-style-type:设置列表项前面的类型
                list-style-type: none;
                
                给列表项前面的类型自定义
                 list-style-image:
               常用的属性值:URL() 图像的路径

                
                list-style-image: url(img/start.jpg);
                
            }
        </style>
  
    <body>
        XX学生管理系统:
            <ul>
                <li>学生管理</li>
                <li>选课管理</li>
                <li>教师管理</li>
            </ul>

    </body>

八、CSS表格

    <style type="text/css">
            body table{
              将表格的边框合并为单一的框
              属性值:collapse

                
            border-collapse :collapse;
            }
        </style>
 
    <body>
        <table border="1px"  align="center" width="400px" height="300px">
            <thead>
            <tr>
                <th>姓名</th>
                <th>班级</th>
                <th>成绩</th>
            </tr>
            </thead>
            <tbody>
                <tr align="center">
                    <td>张三</td>
                    <td>计算机1班</td>
                    <td>87</td>
                </tr>
                <tr align="center">
                    <td>李四</td>
                    <td>计算机2班</td>
                    <td>89</td>
                </tr>
                <tr align="center">
                    <td>王五</td>
                    <td>计算机1班</td>
                    <td>98</td>
                </tr>
            </tbody>
        </table>

    </body>

九、CSS边框

    <style type="text/css">
            div{
                     边框的颜色
                     border-color:边框颜色的简写属性
                    1)边框颜色默认的顺序:上 右 下 左
                    2)边框颜色某一边如果没设置,那么取对边的颜色

                
                
                border-color:#f00;
                border-left-color:#f00 ;
                border-right-color:#00f ;
                border-top-color: #0f0;
                border-bottom-color: #FF0;
                
                 边框的宽度
                 border-width:
                
                

                border-left-width: 10px;

                border-right-width: 20px;

                border-top-width: 30px;

                border-bottom-width: 40px;

                边框宽度的简写属性
                 border-width: 10px;

                
               
                     一块标签,要想显示边框的效果,必须指定属性:边框的样式:
                     border-style:边框样式的简写属性

                     
                
                
                border-style: solid;
                border-left-style: solid;
                border-right-style: dashed;
                border-top-style: dotted;
                border-bottom-style: double;
                
                
                一个div显示边框,使用boder的简写属性
                
                border:1px solid #000 ;
                width: 50px;
                height: 50px;
                
            }

        </style>

十、盒子模型


            盒子模型:div块标签+css进行网页布局
              一个盒子属性:
             容量:就是给div块标签指定的宽度和高度


        <style type="text/css">
            div{
                设置边框
                border:1px solid #000;
                width: 100px;
                height: 100px;
                
                padding-left: 10px ;
            }
            
            #dv1{
                让div1盒子内边距向右移动10px
                padding-left: 10px;
                
                给div1设置一个下外边距
                margin-bottom: 10px;
            }
            
            #dv2{
                上外边距
                margin-top: 10px;

            }

            dispaly属性
                     常用的属性值:none 次元素不会被显示 隐藏了!
            .cba{
                display:none;
            }
            
            #spanId{
                display: block; 此元素将显示为块级元素,此元素前后会带有换行符
            }
            
            h3{
                display: inline;默认。此元素会被显示为内联元素,元素前后没有换行符。

            }

            浮动属性
                 float:
                         常用的两个属性值:
                                     left:左浮动

                                     right:右浮动

               

 

                 #ww{

                    float:left;

 

                    }

 

 

 

                    clear属性

                    设置一个元素的侧面是否允许其他的浮动元素。

                    both:在当前两侧都不允许有浮动元素

          

                    .cle{ 

                    clear:both;

                    }


     
  

 

           

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值