CSS入门（一）

矫情吗；* 2023-06-28 06:26 12阅读 0赞

**[CSS入门（二）：][CSS]  
https://blog.csdn.net/Veer\_c/article/details/103883102**

## CSS入门 ##

## CSS：层叠样式表(英文全称：Cascading Style Sheets） ##

HTML：负责网页的结构，  
CSS：负责网页的美观（样式）  
可以用来设置网页的样式：

## css的使用方式 ##

**行内样式**  
注意：  
使用标签的style属性进行css控制，css写在style属性值中  
弊端：只能控制一个标签的样式  
超链接

**内部样式**  
注意：  
使用style的标签进行css控制，css内容写在style标签体内  
一次控制多个标签的样式  
和html标签混杂在一起，不好维护。css内容无法在多个html页面中重用

**外部样式（推荐使用）**  
注意：  
建立独立后缀为css的文件，css内容写在该文件中  
在使用css的html页面中，导入外部css文件

<link href="01.css" rel="stylesheet"/>

**CSS语法和选择器：**

<style type="text/css">
    /*标签选择器*/
    div{ 
        font-size:14px;
        color:#F00;}
    /*类选择器,给div1和div2设置样式*/
    /*.c1{ font-size:16px; color:#00F;}*/
    /*使用id选择器给div1设置样式*/
    #d1{ 
        font-size:24px;
        color:#600;}
    /*将div4和div5的c2样式设置为和c1完全相同*/
    /*.c2{ font-size:16px; color:#00F; }*/
    /*当c1和c2中的css代码相同的时候,我们就可以使用并集选择器将两个选择其中的代码进行抽取,形成一个并集选择器*/ 
    .c1,.c2{ 
        font-size:16px;
        color:#00F;
        }
    /*给div中的span标签设置一个样式,交集选择器*/
    div span{ 
        font-size:36px;
        color:#006;
        }
    </style>
    </head>
    <body>
    <div id="d1">div1</div><br />
    <div class="c1">div2</div><br />
    <div class="c1">div3</div><br />
    <div class="c2">div4</div><br />
    <div class="c2">div5</div><br />
    <div><span>div中的span标签</span></div><br />
    <span>独立的span标签</span>
    </body>

**注意：当一个标签同时被多个选择器选中时，标签的范围越小，优先级越高**

**伪类选择器：**

<style type="text/css">
        a:link{ 
            /*在a标签的link状态下需要展示的样式*/
             font-size:24px;
             color:#00F;
            }
        a:visited{ 
            font-size:24px;
            color:#900;
            }
        a:hover{ 
            font-size:24px;
            color:#F00;
            text-decoration:line-through;
            }
        a:active{ 
            font-size:24px;
            color:#9F0;
            }
    </style>
    </head>
    <body>
    <a href="3.css语法及选择器.html">伪类选择器</a>
    </body>

**注意：伪类选择器对于链接的不同状态是有不同的要求的**  
1.在CSS定义中hover必须置于link，和visited的之后  
2.active必须置于hover之后才是有效的  
3.伪类名称对大小写不敏感  
**练习：使用伪类选择器，让鼠标经过表格时，会给改变颜色**

**[CSS入门（二）：][CSS]  
https://blog.csdn.net/Veer\_c/article/details/103883102**

[CSS]: https://blog.csdn.net/Veer_c/article/details/103883102