学习web前端历程（八）

最新推荐文章于 2024-09-01 00:22:26 发布

l123zmj

最新推荐文章于 2024-09-01 00:22:26 发布

阅读量102

点赞数 1

文章标签： css规则与注释 css基础选择器 css样式表特征 div+css布局

本文链接：https://blog.csdn.net/l123zmj/article/details/97905065

版权

css规则与注释、chrome调试工具的使用、css基础选择器、样式表特征、div+css布局

一、css规则与注释

1.css语法
（1）css是以属性/值对的形式出现
（2）属性和属性值之间用冒号（：）连接
（3）多对属性之间用分号（；）隔开
如：color：red；

2.css注释

<!--   html 注释语句   -->
/*     css注释语句  */

（1）html/css注释快捷键：
Ctrl+/ 单行注释/取消注释
Ctrl+shift+/ 多行注释/取消注释

二、chrome调试工具的使用

1.chrome调试工具打开的快捷方式： f12 Ctrl+shift+i
2.chrome使用小技巧：
（1）ctrl+滚轮可以放大开发调试工具的代码大小
（2）左边式html元素结构，右边式css样式
（3）右边css样式可以改动数值和颜色，把改动的数值和颜色放到代码中，再来查看更改后的效果

三、css基础选择器（重点、难点）

1.元素选择器（修饰元素、标签）

如HTML中的元素：p b div a img body等
元素选择器格式：（修饰指定标签，但当有多个时，不可以只修改一个）

标签{
属性1：属性值1；
属性2：属性值2；
...
}

2.通用选择器（也叫全局选择器：修饰全部元素）

通用选择器格式：

*{
属性1：属性值1；
属性2：属性值2；
...
}

注意：
（1）可以与任何的元素匹配
（2）常用于设置一些默认样式
（3）通用选择器的使用范围最广，但是它的优先级最低

<style>
     /*  p{
           color: red;   元素
       }
       div{
           color: green;
       }*/

        *{
            color: aqua;  通用
        }
    </style>
</head>
<body>
<p>元素选择器和通用选择器</p>
<p>元素选择器和通用选择器</p>
<p>元素选择器和通用选择器</p>
<div>元素选择器和通用选择器</div>
<div>元素选择器和通用选择器</div>
<div>元素选择器和通用选择器</div>

3.类选择器（通常配合class=“ ”使用、单独修饰一个标签）

类选择器格式：

   .类名{
   属性1 class="类名"：属性值1；
   属性2：属性值2；

注意：一个页面中的class名字可以重复

4.ID选择器（配合id使用，单独修饰一个标签）

ID选择器格式：

   #类名{
   属性1 id="类名"：属性值1；
   属性2：属性值2；
   ...

注意：一个页面中的id相同的id名只能出现一次

 <style>
        .leikuan{
            color: red;
        }
        #libai{
            color: green;
        }
    </style>
</head>
<body>
<p class="leikuan">雷宽</p>
<p  id="libai">李白</p>
<p class="leikuan">杜甫</p>

5.合并选择器（并集选择器）

格式：

选择器1，选择器2，...{
属性1，属性值1；
属性2，属性值2；
...
}

作用：提取共同的样式，减少重复代码

  <style>
   p,div,h1,.xiang,#he{
       color: green;
   }
    </style>
</head>
<body>
<p>奶茶</p>
<p>果汁</p>
<div>米饭</div>
<div>面条</div>
<h1>西红柿</h1>
<h1>大白菜</h1>
<h1>红绕肉</h1>
<h2 class="xiang">我想喝奶茶呢</h2>
<h2>我想喝奶茶啊</h2>
<h2 id="he">我想喝奶茶哦</h2>

css选择器的命名规则：
1.建议使用字符（a-z、A-Z、0-9）连接符（-）、下划线（_）、不建议使用中文
2.不能以数字开头
优先级：ID选择器>类选择器>标签选择器

四、css样式表特征

1.继承性
指被包含在内部的标签可以拥有外部标签的样式，比如text-、font-*、line-height，但是有些属性不可以继承，比如：border、padding、margin

2.层叠性
可以定义多个样式

3.优先级
样式定义冲突时，按照不同样式规则的优先级来应用样式

注意：
1.相同的选择器，其样式表排序：行内样式>内部样式>外部样式（就近原则）
2.相同方式的样式表，其选择器排序：ID选择器>类选择器>标签选择器（范围越小越优先）
3.外部样式表的ID选择器>内部样式表的标签选择器

  <style>
        /*div{
           color: red;
            font-size: 30px;
            border：2px soild red；
        }
        .qianduan{
            color: green;
        }
        #study{
            color: plum;
        }*/
        .haha{
            color: green;
            font-size: 30px;
        }
        #hehe{
            color: red;
            font-size: 30px;
        }
    </style>
</head>
<body>
<!--<div>  继承性 （p标签继承div标签的属性）
    <p class="qianduan" id="study">我在学习前端</p> 层叠性（优先级高的覆盖优先级低的）
    <p  >我在学习前端</p>
    <p>我在学习前端</p>
</div>-->
<p class="haha" id="hehe">猜猜我是什么颜色？</p>

五、div+css布局

内容和显示分离，便于维护扩展，网页布局方便，当需求改变的时候，效果最明显

div:
1.可定义文档中的分区或节
2.可以把文档分割为独立的、不同的部分
3.是一个块级元素，这意味着它的内容只动成为一个新行
4.通常与css进行配合，会有更强的表现形式

布局实例时需要用到的css属性：

width             数值
height            数值
background-color  颜色
float：left       使div不占据一行

<style>
    .header{
        height: 100px;
        background-color: aliceblue;
    }
    .content1{
        width: 400px;
        height: 400px;
        background-color:blanchedalmond;
        float:left;
    }
    .content2{
        height: 400px;
        background-color: lavender;
    }
    .footer{
        height: 100px;
        background-color: plum;
    }
</style>
</head>
<body>
<div class="header"></div>
<div class="content1"></div>
<div class="content2"></div>
<div class="footer"></div>

页面显示为：
在这里插入图片描述
div+css练习

代码：

 <style>
    .xian1{
        background-color: aqua;
        height: 10px;
    }
    .header{
        background-color: green;
        height: 70px;
    }
    .xian{
            background-color: aqua;
            height: 10px;
        }
    .content1{
        background-color: green;
        height: 70px;
    }
    .content2{
        background-color: aqua;
        height: 10px;
    }
   .content3{
       background-color: blue;
       height: 300px;
       width: 300px;
       float: left;
   }
    .content4{
        float: left;
        background-color: aqua;
        height: 300px;
        width: 10px;
   }
    .content5{
       background-color: blue;
       height: 300px;
        width: 1350px;
   }
     .content6
     {
         background-color: aqua;
         height: 10px;
     }
   .content7{
       background-color: green;
       height: 100px;
   }
    .footer{
       background-color: aqua;
       height: 10px;
   }
    </style>
</head>
<body>
    <div class="xian1"></div>
    <div class="header"></div>
    <div class="xian"></div>
    <div class="content1"></div>
    <div class="content2"></div>
    <div class="content3"></div>
    <div class="content4"></div>
    <div class="content5"></div>
    <div class="content6"></div>
    <div class="content7"></div>
    <div class="footer"></div>