CSS嵌入方式

末蓝、 2024-04-18 21:02 39阅读 0赞

1 什么是CSS？CSS的作用是什么？  
    CSS英文全称：Cascading Style Sheet，是层叠样式表，不属于编程语言；  
    CSS的作用：CSS是HTML的化妆品，可以让HTML变的更炫酷，是专门来修饰HTML的  
    CSS在哪里编写？CSS代码是嵌入在HTML中的，没有HTML代码，CSS代码是无效的  
2 CSS主要掌握以下内容：  
    4.1 CSS注释：在style体内使用/\*\*/  
    4.2 在HTML中嵌入CSS代码  
        (1) 第一种方式：内联嵌入方式  
            A、语法：style="样式名1:样式值1; 样式名2:样式值3;"  
            B、在HTML中，大部分标签都有style属性，在该属性中高可用设置该标签的CSS样式  
            C、示例一：style属性完成a标签的样式：让其有下划线，有鼠标悬停效果手型  
                a、字体下划线：text-decoration:underline  
                b、鼠标悬停手势效果：cursor:hand;(该样式IE中支持，FireFox中不支持)  
                c、鼠标悬停手势效果：cursor:pointer;(该样式都支持，兼容性强)  
                <a style="text-decoration:underline; color:blue; cursor:pointer;">百度</a>  
            D、实例二：

<html>
                    <head>
                        <title>CSS样式_内联嵌入式</title>
                    </head>
                    <body>
                        <a href="#" style="text-decoration:none;">电影</a>&nbsp
                        <a href="#" style="text-decoration:none;">奇葩说</a>&nbsp
                        <a href="#" style="text-decoration:none;">德云社</a>&nbsp<br/>
                        <img id="img1" src="img/1.jpg" width="500px" height="300px"/>
                    </body>
                </html>

(2) 第二种方式：定义内部样式块对象  
            在head标签中添加：<style type="text/css"></style>在style内部编写  
            A、标签选择器：标签名\{\}  
                a、标签选择器：整个页面所有该标签都使用这个样式  
                    a\{  
                        cursor:pointer;  
                        color:blue;  
                        text-decoration:underline;  
                    \}  
                b、示例：使用标签选择器实现字体没有下划线  
                    a\{  
                        text-decoration:none;  
                    \}  
            B、id选择器：\#idName\{\}  
                a、只对该id的标签使用这个样式  
                    \#google\{  
                        cursor:pointer;  
                        color:blue;  
                        text-decoration:underline;  
                    \}  
            C、类选择器：.myclass\{\}  
                a、样式作用于有该类的标签  
                    .myclass\{  
                        cursor:pointer;  
                        color:blue;  
                        text-decoration:underline;  
                    \}

<html>
                    <head>
                        <title>CSS样式_内部样式块</title>
                        <style type="text/css">
                            /* 标签选择器：页面中所有a标签使用以下样式 */
                            a{
                                text-decoration:none;
                            }
    
                            /* id选择器：将页面中id为Img1的标签修改如下样式 */
                            #img1{
                                width:300px;
                                height:200px;
                            }
    
                            /* 类选择器：将页面中样式类型为myclass的字段颜色改为红色 */
                            .myclass{
                                color:red;
                            }
                        </style>
                    </head>
                    <body>
                        <h1>刮刮视频</h1><br/>
                        <a href="#" >电影</a>&nbsp
                        <a href="#" >奇葩说</a>&nbsp
                        <a href="#" >德云社</a>&nbsp<br/>
                        <a href="#" class="myclass">篮球公园</a> 
                        <a href="#" class="myclass">网球</a> 
                        <br/><br/>
                        <img id="img1" src="img/2.png" />
                        <br/><br/>
                        <img id="img2" src="img/1.jpg" width="500px" height="300px"/>
                        <br/><br/>
                    </body>
                </html>

(3) 第三种方式：链入外部样式文件  
            A、在head标签中：<line rel=stylesheet href="1.css" type="text/css">

B、@import指令引入外部样式表。@import指令必须放在样式表 <style type = "text/css">@import url(1.css);</style>  
            1.css代码：

/*
                    标签选择器：页面中所有a标签使用以下样式
                */
                a{
                    text-decoration:none;
                }
    
                /*
                    id选择器：将页面中id为Img1的标签修改如下样式
                */
                #img1{
                    width:300px;
                    height:200px;
                }
    
                /*
                    类选择器：将页面中样式类型为myclass的字段颜色改为红色
                */
                .myclass{
                    color:red;
                }

html代码：

<html>
                    <head>
                        <title>CSS样式_链入外部样式文件</title>
                        <link rel=stylesheet href="1.css" type="text/css">
                    </head>
                    <body>
                        <h1>刮刮视频</h1><br/>
                        <a href="#" >电影</a>&nbsp
                        <a href="#" >奇葩说</a>&nbsp
                        <a href="#" >德云社</a>&nbsp<br/>
                        <br/><br/>
                        <img id="img1" src="img/2.png" />
                        <br/><br/>
                    </body>
                </html>

(4) web前端开发中最难的是：解决各大浏览器之间的兼容问题

**希望对你有帮助，祝你有一个好心情，加油！**

**若有错误、不全、可优化的点，欢迎纠正与补充！**