1、css概述

主要的使用场景就是美化网页,布局页面

(1)html的局限性

它只关注内容的语义,只能做一些简单的样式,并且非常的臃肿和繁琐

(2)css对网页美化的作用

css是层叠样式表的简称,它和html是一样的,都是一种标记语言,css主要用于设置html页面的文本内容(字体、大小、对齐方式等)图片的外形(宽度、高度、边框样式、边距等)以及版面的布局和外观显示样式。css可以美化html使得页面更加漂亮,页面的布局更加简单。

(3)html与css

html主要做结构,显示元素内容,css美化html,布局网页。因此,html专注结构呈现,css做样式,即结构与样式相分离

 

2、css语法规范

(1)代码

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            p{
                color: red;
                font-size: 20px;
            }
        </style>
    </head>
    <body bgcolor="aquamarine">
        <h2>静夜思</h2>
        <p>
                                床前明月光,疑似地上霜
        </p>
        <p>
                               举头望明月,低头思故乡,
        </p>
    </body>
</html>

(2)测试

 

 

在style标签中,p被称为选择器,用于指定css的html标签,花括号内部是对该对象设置的具体样式

属性和属性的值,以键值对的形式出现

属性和属性的值以冒号隔开

每一个键值对以分号相隔开

 

3、选择器

就是根据不同的需求,把不同的标点选出来。

(1)标签选择器

标签选择器是指用标签名称作为选择器,按照标签名称分类,为页面中某一标签制定统一的样式。优点是能够快速地为页面同类型的标签,统一设置样式。但是标签选择器不能满足差异化样式,只能同时设置同一类型的标签

代码:

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            p{
                color: red;
                font-size: 20px;
            }
            
            div{
                color:black;
                font-size: 25px;
            }
        </style>
    </head>
    <body bgcolor="aquamarine">
        <h2>静夜思</h2>
        
        <p>
                       床前明月光,
        </p>
        
        <p>
                               疑似地上霜,                 
        </p>
        
        <div>
            举头望明月,
        </div>
        
         <div>
            低头思故乡,
        </div>
        
    </body>
</html>

测试:

 

 

 标签选择器,是根据标签的不同来对样式进行设置的

 

(2)类选择器

标签选择器不能实现差异化的设置,但是类选择器可以,它可以单独选一个或者几个标签

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .myclass1{
                color: red;
                font-size: 20px;
            }
            
            .myclass2{
                color:black;
                font-size: 25px;
            }
        </style>
    </head>
    <body bgcolor="aquamarine">
        <h2>静夜思</h2>
        
        <p class="myclass1">
                       床前明月光,
        </p>
        
        <p class="myclass2">
                               疑似地上霜                
        </p>
        
        <div class="myclass1">
            举头望明月,
        </div>
        
         <div class="myclass2">
            低头思故乡
        </div>
        
    </body>
</html>

测试:

 

 

在使用类选择器之后,即使是相同的标签,也可以实现不同的样式。如果说标签选择器是为了区别不同的标签的话,那么类选择器,则可以进一步对众多的同一种标签进行区分

类命名规则:

头:header

内容:content

尾:footer

导航:nav

侧栏:column

菜单:menu

类选择器实现盒子模型:

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .red{
                width: 50px;
                height: 20px;
                background-color: red;
            }
            
            .yeloow{
                width: 50px;
                height: 40px;
                background-color: yellow;
            }
        </style>
    </head>
    <body bgcolor="aquamarine">
        <h2>类选择器实现盒子模型</h2>
        
      <div class="red"></div>
      
      <div class="yeloow"></div>
      
      
      <div class="red"></div>
        
    </body>
</html>

 

 在同一种标签中,通过class的不同实现不同的布局

类选择器的多类名:一个标签的class属性有多个值

 

可以把一些标签元素相同的元素放到一个类里面:

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
           .myclass1{
                   width: 250px;
                height: 60px;
                background-color: blanchedalmond;
           }
           .myclass2{
                   width: 250px;
                height: 60px;
                background-color:red;
           }
        </style>
    </head>
    <body>
        <h2>类选择器实现盒子模型</h2>
        
      <div class="myclass1">
          床前明月光,疑是地上霜.
      </div>
      
      <div class="myclass2">
          举头望明月,低头思故乡,
      </div>
        
    </body>
</html>

在这个案例中,两句话显示的区域的大小是相同的,可以把他们抽取出来,重新创建一个新的class

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
           .myclass1{
                background-color: blanchedalmond;
           }
           .myclass2{
                   
                background-color:red;
           }
           .area{
                   width: 250px;
                height: 60px;
           }
        </style>
    </head>
    <body>
        <h2>类选择器实现盒子模型</h2>
        
      <div class="myclass1 area">
          床前明月光,疑是地上霜.
      </div>
      
      <div class="myclass2 area">
          举头望明月,低头思故乡,
      </div>
        
    </body>
</html>

这样的话可以节省css代码,统一修改也非常方便

 

(3)id选择器

ID选择器和类选择器的使用方法基本相同,但是定义方式不同,最大的区别就是ID选择器只能使用一次

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
        #color{
            color: red;
        }
        </style>
    </head>
    <body>    
      <div id="color">
          床前明月光,疑是地上霜.
      </div>
    </body>
</html>

 

(4)通配符选择器

*:修改所有标签的样式

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
        * {
            color: red;
        }
        </style>
    </head>
    <body>    
      <div id="color">
          床前明月光,疑是地上霜.
      </div>
      <p>
          举头望明月,低头思故乡.
      </p>
    </body>
</html>

 

内容来源于网络如有侵权请私信删除