css的一些可以随时回来看的东西

基本理论

什么是CSS。有什么作用
    Css（Cascading style Sheet）:层叠样式表语言。
    Css的作用是：
        修饰HTML页面，设置HTML页面中的某些元素的样式，让HTML页面更好看
        Css好比是HTML的化妆品一样
    HTML还是主体，CSS依赖HTML。CSS的存在就是修饰HTML，所以新建的文件还是.html文件

CSS我们要求掌握到什么程度？
    常见的CSS样式要求会写
    别人写的CSS样式要能看懂

在HTML页面中嵌套使用CSS的三种方式：
第一种方式：在标签内部使用style属性来设置元素的CSS样式，这种方式称为
内联定义方式
    语法格式：
        <标签 style="样式名：样式值；样式名：样式值；。。。"></标签>
第二种方式:在head标签中使用style块，这种方式被称为样式快方式。
    语法格式：
        <head>
            <style type="text/css">
                选择器{
                    样式名：样式值；
                    样式名：样式值；
                        。。。
                }
                选择器{
                    样式名：样式值；
                    样式名：样式值；
                        。。。
                }
            </style>
        </head>

第三种方式：链入外部样式表文件，这种方式最常用（将样式写到一个独立的xx.css文件中）
在需要的网页上直接饮用CSS文件，样式就引入了
    语法格式：
        <link type ="text/css" rel="stylesheet" href="css文件的路径"/>

        这种方式易维护，维护成本低

HTML中引入CSS样式的第一种方式，内联定义方式

<!doctype html>
<html>
    <head>
        <title>HTML中引入CSS样式的第一种方式，内联定义方式</title>
    </head>
    <body>
    <!--
        width宽度样式
        hight高度样式
        background-color 背景色样式
        display 布局样式（none隐藏，block表示显示）
    
    -->
        <div style ="width:200px;height:300px;display:block;
        border-color:red;border-eidth:1px;border-style:solid;"></div>
        <br><br>
        <!--
            样式还能这样写：
                border:1px solid black;

        -->
        <div style ="width:200px;height:300px;display:block;
        borner:1px solid black;">
    </body>
</html>

HTML中引入CSS样式的第二种方式，样式块

<!doctype html>
<html>
    <head>
        <title>HTML中引入CSS样式的第二种方式，样式块</title>
        <style type="text/css">
        /*
            id选择器
            语法格式：
                #id{
                样式名：样式值；
                样式名：样式值；
            。。。。
                
                }

        */
    --------------------------------------------------  
        #usernameErrorMsg{
            color:red;
            font-size:12px;
        }
        /*
        标签选择器
        语法格式：
            标签名{
                样式名：样式值；
                样式名：样式值；
            。。。。
            }
            标签选择器作用的范围比id选择器广。
        */
-------------------------------------------------------------
        div {
            background-color:black;
            border:1px solid red;
            width:100px;
            height:100px;
        }
        /*
            类选择器
            语法格式：
                .类名{
                    样式名：样式值；
                    样式名：样式值；
                    样式名：样式值；
                。。。。
                }

                .myclass{
                            
                }
        */
        </style>
    </head>
    <body>
        <!--
            设置样式字体大小12px，颜色为红色!
        -->
        <span id ="usernameErrorMsg">对不起，用户名不能为空</span>

        <div></div>
        <div></div>
        <div></div>
        <br><br><br>
        <input type ="text" class ="myclass"/>
        <select class="myclass">
            <option>本科</option>
            <option>专科</option>
    </body>
</html

在HTML中使用CSS的第三种方式

<!doctype html>
<html>
    <head>
        <title>在HTML中使用CSS的第三种方式</title>
        <link rel="stylesheet" type="text/css" href="C:\Users\Administrator\Desktop\新建文件夹 (8)/003.css"/>
        </head>
    <body>
        <a href ="http://www.baidu.com">百度</a>

        <span id="baiduSpan">点我</span>
    </body>
</html>

这是那个003文件中的内容
a{
 text-decoration:none;
}

#baiduSpan{
    text-decoration: underline;
    cursor:pointer;
}

样式列表

<!doctype html>
<html>
    <head>
        <title>列表样式</title>
        <style type ="text/css">
            ul{
                list-style-type:none;
                }
            </style>
    </head>
    <body>
        <ul>
            <li>中国
                <ul>
                    <li>北京</li>
                    <li>上海</li>
                    <li>重庆</li>
                </ul>
            </li>
            <li>美国</li>
            <li>俄国</li>
        </ul>
    </body>
</html>

主要是用的比较少其他的么需要的时候还会补上

posted @ 2020-10-09 02:34 锁猴阅读(79) 评论(0) 收藏举报

刷新页面返回顶部

锁猴

css的一些可以随时回来看的东西

css的一些可以随时回来看的东西

公告