CSS初识

作者: fossumjonas | 来源:发表于2019-07-02 19:58 被阅读0次

    CSS基础

    
    1. 什么是CSS
        CSS-Cascading Style Sheets又叫层叠样式表(简称样式表)
        CSS是web标准中的表现标准, 它决定了网页中内容的样式和布局(目前使用的CSS3) 
        
        2. 怎么写CSS
        1)语法
        选择器{属性名1:属性值1;属性名2:属性值2;属性名3:属性值3...}
        
        2)说明
        选择器{} - 通过选择器选中需要添加样式的标签;在内联样式中不用写
        属性 - 属性名和属性值之间用冒号连接,多个属性之间用分号分开
               属性名不是自己命名,必须是CSS提供的属性,(学习CSS主要就是学CSS中的属性)
               属性值如果是表达大小的数字,必须加单位: 100px(像素) , 100em(空格数), 50%(百分比)
               颜色值: 颜色英文单词、#6位16进制颜色值、rgb(0~255,0~255,0~255)、rgba(r,g,b,透明度)
                      透明度:0 ~ 1
                      
        3)常用属性
        color : 文字颜色
        background-color : 背景颜色
        font-size : 字体大小
        width :  宽度
        height : 高度
        
                      
        3. 写在哪儿
        根据样式表写的位置,将样式表分为: 内联样式、内部样式和外部样式
        1) 内联样式:将样式表写在标签的style属性中
                    只能作用于一个标签
                    
        2) 内部样式:将样式表写在style标签中
                    能作用于当前整个html中的标签
        
        3) 外部样式:将样式表写在css文件中,然后再在html文件中通过link导入
                    可以作用于所有页面的所有标签
        
    
    
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            
            
            
            <!--2.内部样式-->
            <style type="text/css">
                /*这儿写的代码是CSS代码*/
                a{
                    color: yellowgreen;
                    
                    /*去掉下划线*/
                    text-decoration: none;
                }
                
                p{
                    background-color: yellow;
                    color: green;
                }
            </style>
            
            <!--3.外部样式-->
            <link rel="stylesheet" type="text/css" href="css/外部样式.css"/>
            
        </head>
        <body>
            <!--1.内联样式-->
            <p style="font-size: 40px;">我是段落1</p>
            
            <a href="https://www.baidu.com" style="background-color: darkblue;">百度一下</a>
            <a href="http://1000phone.com">千锋教育</a>
            
        </body>
    </html>
    
    

    相关文章

      网友评论

        本文标题:CSS初识

        本文链接:https://www.haomeiwen.com/subject/wiothctx.html