CSS详解

最新推荐文章于 2024-06-27 10:18:30 发布

阿百川pro

最新推荐文章于 2024-06-27 10:18:30 发布

阅读量204

点赞数

分类专栏： Java 文章标签： CSS

本文链接：https://blog.csdn.net/qq_44911955/article/details/93383872

版权

Java 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

什么是CSS

CSS的概念

Cascading Style Sheet 层叠样式表
表现HTML文件样式的语言，包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等

CSS的优势

内容与表现分离
网页的表现统一，容易修改
丰富的样式，使得页面布局更加灵活
减少网页的代码量，增加网页的浏览速度，节省网络带宽
运用独立与页面的CSS,有利于网页搜索收录
。。。。。。。。。

CSS的语法

选择器{
声明1；
声明2；
}
注释：CSS的最后一条声明后的“；”可写可不写，但是基于W3C标准规范考虑，建议最后一条声明的结束，“；”最好加上

Style标签
Style标签出现在HTML文档中的 < head> 和< /head> 之间

<style type="text/css">
h1{
       font-size:12px;
       color:#F00;
}
</style>

案例：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <style>
        /*
          style标签中写css代码
        */
        /*h1标签-红色*/
        h1{
            color: crimson;
        }
        /*h2标签-改变字体大小*/
        h2{
            font-size: 200px;
        }
    </style>


</head>
<body>



<h1 >Hello</h1>
<h2>World</h2>

</body>
</html>

运行结果为：
在这里插入图片描述

CSS的三种导入方式

内部样式表

需要使用style标签
格式：
选择器 {
属性 : 属性值
}
2. 行内样式
- style属性引入 ,行内样式如果要添加多个样式 , 中间使用分号隔开
- 格式：

<h1 
style="color: #96ffe6">Hello,css
</h1>

外部导入

需要新建一个 .css
需要使用link标签导入.css

内部样式表和行内样式的案例：



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--内部样式表
    需要使用style标签
    格式 :

        选择器 {
              属性 : 属性值
        }

    -->
    <style>
        a{
            font-size: 50px;
        }

    </style>




</head>
<body>

<!--行内样式
style属性引入 ,
行内样式如果要添加多个样式 , 中间使用分号隔开
-->
<h1 style="color: #96ffe6">Hello,css</h1>
<p style="font-size: 50px;font-weight: bolder;color: #96ffe6">Hello,css1</p>
<p style="color: #ff5f5d;font-weight: bolder">Hello,css2</p>

<p>Hello,css</p>

<hr/>


<a href="">Goodbye,world</a>




</body>
</html>

运行结果为：
在这里插入图片描述

外部导入案例：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--第三种导入方式:外部导入式
    需要使用  link标签
    -->
    <link rel="stylesheet" href="外部导入.css">


     <!--  <style >
           @import url("外部导入.css");
       </style>

   -->
  </head>
  <body>

  <div id="aaa">
      认真学习的样式很Cool
  </div>

  </body>
  </html>

新建一个css

div{
    font-size: 16px;
    color: #ff5f5d;
}

运行结果为：
在这里插入图片描述

CSS样式优先级（就近原则）：
行内样式>内部样式表>外部样式表

CSS的三种基础选择器

标签选择器：
标签：< h1 >…< h6 >、< p >、< img/ >
类选择器：
< 标签名 class = “类名称”>标签内容< /标签名 >
ID选择器：
< 标签名 id=“id名称”>标签内容< /标签名 >
案例演示：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        /*   类选择器
         思考 : 需要一类 ?  类在标签中定义, 使用class属性
          然后使用类选择器选择到指定的标签元素

          .类名称{
               属性:属性值
          }

        */

        .a{
            color: black;
            font-family: 宋体;
        }

        #aaa{
            color: #ff5f5d;
            font-style: italic;
        }

        div{
            color: #96ffe6;
            font-size: 40px;
        }

    </style>

</head>
<body>


<p class="a">Hello World</p>
<a href="" id="aaa">成就梦想</a>
<div >好好学习,天天向上</div>

</body>
</html>

运行结果为：
在这里插入图片描述
剩下的今后写

阿百川pro

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
CSS详解

什么是CSSCSS的概念Cascading Style Sheet 层叠样式表表现HTML文件样式的语言，包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等CSS的优势内容与表现分离网页的表现统一，容易修改丰富的样式，使得页面布局更加灵活减少网页的代码量，增加网页的浏览速度，节省网络带宽运用独立与页面的CSS,有利于网页搜索收录。。。。。。。。。CSS...
复制链接

扫一扫

专栏目录