CSS笔记(一)

CSS样式表作用在文件中、元素上有以下几种方式:

1、链接进来

2、导入进来

3、内部 CSS

4、行内样式,直接作用在某个元素上

 

注意:1和2是外部文件,1是link进来,2是import进来,但是某些浏览器貌似不支持import,所以大多link进来

         3是写在head上

         4是只能作用在某些元素上,不具备全局性

 

下面是链接和导入外部样式表的方法:

 

这是一个.css文件,就是我们的外部样式表

 

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>师然学习笔记</title>
        <!--
            描述:链接外部样式
       -->
        <!--
        <link href="css/outer.css" rel="stylesheet" type="text/css">
        -->
        
            <!--
                描述:导入外部样式
            -->
            <!--
                <style type="text/css">
                
                @import url("css/outer.css");
            </style>
            -->
    </head>
    <body>
        <table>
            
            <tr>
                <td>师然学习H5</td>
            </tr>
            
            <tr>    
                <td>师然学习iOS</td>
            </tr>
            
            <tr>    
                <td>师然学习java</td>
            </tr>
        </table>
    </body>
</html>

 

效果如下:

以下是内部样式表和行内样式表的代码

注意,如果内部样式和行内样式重叠,行内样式表级别更高

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>师然学习笔记</title>
        
        <!--
            
            描述:这个是内部样式表
        -->
        <style type="text/css">
            
            table{
                
                background-color:#003366 ;
                
            }
            
            td{
                
                background-color:#FF0F0F ;
                font-family: "微软雅黑";
                font-size: 30pt;
        </style>
    </head>
    <body>
        
        <!--
            
            描述:行内样式表
        -->
        <div style="font-size: 18px;
                    color: #60c;
                    height:30px;
                    width: 200px;
                    border-top: 3px
                    solid #CCCCCC;
                    border-left: 3px solid #CCCCCC;
                    border-bottom: 3px solid #CCCCCC;
                    border-right: 3px solid #CCCCCC;">aaaa</div>
                    
                    <hr/>
                    
                    
        
        <table style="">
            
            <tr>
                <td style="
                    font-family: '楷体_GB2312';
                    font-size: 20pt;
                    text-shadow: -8px 6px 2px #333;">师然学习H5</td>
            </tr>
            
            <tr>    
                <td>师然学习iOS</td>
            </tr>
            
            <tr>    
                <td>师然学习java</td>
            </tr>
        </table>
    </body>
</html>

效果如下:

 

posted @ 2017-03-29 10:46  师然  阅读(190)  评论(0编辑  收藏  举报