初遇CSS

痛定思痛。 2022-06-05 05:55 94阅读 0赞

**今天结识了一个新朋友——CSS，初步印象如下：**

**1、CSS的英文全称：Cascading Style Sheets**

**2、CSS中文名：层叠样式表**

**3、CSS用来干什么呢？：将网页内容和样式进行分离，设计网页内容的样式**

**4、如何将网页内容与CSS建立联系？：直接将css样式表拖到HTML页的</title>末尾，然后就会立马生成一句代码，这样就建立联系了。**

**5、我们先来认识几个简单的单词：**

**（1）id：id选择器**

**（2）class：类选择器，简单说就是一个标记，可以通过标记找到内容。**

**（3）body：HTML标签选择器**

**6、CSS选择器优先级：id选择器>类选择器>HTML标签选择器**

**7、如何通过CSS设置网页内容样式？让我们举一个小栗子吧：**

**首先我们有一个HTML页，内容如下：**

<!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>CSS测试</title>
 <link href="css/StyleSheet.css" rel="stylesheet" />
 </head>
 <body>
 栏目四
 栏目五
 栏目六
 这是一条新闻标题
 123456
 </body>
 </html>

**然后我们的css内容如下：**

body {
        color :#eb20e7;  
    }
    .menu {  /*栏目样式*/
        color:#f00; /*文字颜色*/
    }
    
    .title {  /*新闻标题样式*/
        color:#00ff90;  
    }
    
    #special {
        font-weight :bold ;    /*粗体*/
        color:#ffd800;
    }
    
    .title span {
        color :#1818e1;
        font-weight :bold ;
        font-size :larger;
    }
    
    .menu, .title {
        background-color :#000;
    }
    
    .wu {
        color :#faecec;
    }

**（1）class中可以写多个样式标记，如果这多个样式标记都对内容设置不同的颜色，那么内容的最终颜色取决于css中最下边的那个样式设置。**

**（2）class中还可以并列设置样式，如.menu,.title \{\} , 通过“,”分割即可。**

**感谢您的阅读~**