JavaWeb开发前端语言：CSS

最新推荐文章于 2023-08-18 15:00:04 发布

思念寄给宇宙

最新推荐文章于 2023-08-18 15:00:04 发布

阅读量467

点赞数 2

本文链接：https://blog.csdn.net/qq_41537102/article/details/116708728

版权

JavaWeb 同时被 3 个专栏收录

13 篇文章 1 订阅

订阅专栏

前端语言

3 篇文章 0 订阅

订阅专栏

CSS

1 篇文章 0 订阅

订阅专栏

JavaWeb开发前端语言：CSS

1、CSS介绍
2、CSS语法规则
3、CSS和HTML的结合方式
- 3.1 CSS与HTML结合方式一
- 3.2 CSS与HTML结合方式二
4、CSS选择器
4.5 CSS常用样式
总结

前面我们知道了页面由三个部分组成。分别是结构、表现以及行为。结构，是我们在页面中可以看到的数据，我们也可以称之为内容。一般内容用html来展示。

本节将学习页面的第二个部分：表现，所谓表现就是内容在页面上的展现形式。例如：颜色，布局等，一般需要使用CSS技术来进行实现。

1、CSS介绍

CSS是层叠样式表(Cascading Style Sheets)的简称。
CSS是一种标记语言，属于浏览器解释型语言，可以直接由浏览器执行，不需要编译。
CSS是用来表现HTML或XML的标记语言。

2、CSS语法规则

CSS语法由三部分构成：选择器、属性和值p {property:value}
在这里插入图片描述

CSS语法解释
选择器p：浏览器根据"选择器"决定CSS样式影响的HTML标签
属性property：是需要改变的样式名，并且每个属性都有一个值。属性和值之间被冒号分开，并由{}包围，这样就组成一个完整的样式声明，例如：p{color:red}

注意：如果要定义多个声明，则需要用分号将每个声明分开。

CSS定义多个声明：
      p
      {
           color:red;
           font-size:30px;
            }

每行最好只描述一个属性。

3、CSS和HTML的结合方式

3.1 CSS与HTML结合方式一

现有两个div、span标签。

        <div>div标签1</div>
        <div>div标签2</div>
        <span>span标签1</span>
        <span>span标签2</span>

演示：修改每个div与span标签的样式：边框3个像素，实线，红色。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--将每一个div和span标签样式修改为：边框为3个像素，实线，红色-->
    <div style="border: 3px solid red" >div标签1</div>
    <div style="border: 3px solid red">div标签2</div>
    <span style="border: 3px solid red">span标签1</span>
    <span style="border: 3px solid red">span标签2</span>
</body>
</html>

这种方式存在很大的缺点：

1.如果标签多了。样式多了。代码量也是非常庞大的。
2.代码可读性较差。
3.这种形式的CSS代码没有复用性。

3.2 CSS与HTML结合方式二

可以在head标签中，使用style标签来定义各种自己需要的css样式。

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

    <style type="text/css">
      /*在head标签中，使用style标签来定义css样式*/
        div{
            border: 3px solid red;
        }
        span{
            border:3px solid red;
        }
    </style>
</head>
<body>
        <div>div标签1</div>
        <div>div标签2</div>
        <span>span标签1</span>
        <span>span标签2</span>
</body>
</html>

当然这种方式也存在一定的缺点：

1.只能在同一个页面上内复用代码，不能在多个页面中复用css代码。
2.维护起来也不是太方便，实际项目中会有成千上万的页面，要到每个页面中去修改，工作量也是比较大的。

4、CSS选择器

4.1 标签名选择器

标签名选择器的样式为：
         标签名{
                   属性：值；
                   }

案例：在所有div标签上修改字体颜色为蓝色，字体大小为30个像素。边框为1像素黄色实线。并且修改所有span标签的字体颜色为黄色，字体大小为20个像素。边框为5像素蓝色虚线。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--案例：在所有div标签上修改字体颜色为蓝色，字体大小为30个像素。边框为1像素黄色实线。
        并且修改所有span标签的字体颜色为黄色，字体大小为20个像素。边框为5像素蓝色虚线。
     -->
    <style type="text/css">
        div{
            color:blue;
            font-size: 30px;
            border: 1px  yellow solid ;
        }
        span{
            color:yellow;
            font-size: 20px;
            border: 5px blue dashed;
        }
    </style>
</head>
<body>
       <div>div标签1</div>
       <div>div标签2</div>
       <span>span标签1</span>
       <span>span标签2</span>

</body>
</html>

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

4.2 id选择器

id选择器的格式：
     #id属性值{
           属性：值；
     }

案例：分别定义两个div标签
第一个div标签定义为id为id001，然后根据id属性定义css样式修改字体为蓝色，字体大小为30个像素，边框为1像素黄色实线。
第二个div标签定义id为id002，然后根据id属性定义css样式修改字体的颜色为红色，字体大小为20个像素，边框为5像素蓝色点线。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--案例：分别定义两个div标签
       第一个div标签定义为id为id001，然后根据id属性定义css样式修改字体为蓝色，
       字体大小为30个像素，边框为1像素黄色实线。
       第二个div标签定义id为id002，然后根据id属性定义css样式修改字体的颜色为红色，
       字体大小为20个像素，边框为5像素蓝色点线。-->
    <style type="text/css">
        #id001{
            color: blue;
            font-size: 30px;
            border: 1px yellow solid;
        }
        #id002{
            color:red;
            font-size: 20px;
            border: 5px blue dotted;
        }
    </style>
</head>
<body>
      <div id="id001">div标签1</div>
      <div id="id002">div标签2</div>
</body>
</html>

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

4.3 class(类)选择器

class类型选择器的格式为：
        .class属性值{
          属性:值；
        }

演示：修改class属性值为class01的span和div标签，字体颜色为蓝色，字体大小30个像素，边框为1像素黄色实线。
修改class属性值为class02的span和div标签，字体颜色为灰色，字体大小25个像素，边框为1像素红色实线。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--演示：修改class属性值为class01的span和div标签，字体颜色为蓝色，字体大小30个像素，边框为1像素黄色实线。
             修改class属性值为class02的span和div标签，字体颜色为灰色，字体大小25个像素，边框为1像素红色实线。
    -->
    <style>
        .class01{
            color: blue;
            font-size: 30px;
            border: 1px yellow solid;
        }
        .class02{
            color: gray;
            font-size: 25px;
            border: 1px red solid;
        }
    </style>

</head>
<body>
        <div class="class01">div标签1</div>
        <div class="class02">div标签2</div>
        <span class="class01">span标签1</span>
        <span class="class02">span标签2</span>

</body>
</html>

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

4.4 组合选择器

组合选择器的格式为：
    选择器1，选择器2{
          属性：值；
          }

案例：修改 class=“class01” 的div 标签和 id=“id01” 所有的span标签，字体颜色为蓝色，字体大小20个像素。边框为1像素黄色实线。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--案例：修改 class="class01" 的div 标签 和 id="id01" 所有的span标签，
        字体颜色为蓝色，字体大小20个像素。边框为1像素黄色实线。
        -->
    <style>
       .class01,#id01{
           color: blue;
           font-size: 20px;
           border: 1px yellow solid;

       }
    </style>
</head>
<body>
        <div class="class01">div标签1</div>
        <div class="class02">div标签2</div>

        <div id="id01">span标签1</div>
        <div id="id02">span标签2</div>

</body>
</html>

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

4.5 CSS常用样式

CSS常用样式
1.宽度 width:20px;。宽度可以写成像素值：20px；也可以写百分比值：20%；
2.高度 height:20px;。高度可以写成像素值：20px；也可以写百分比值：20%；
3.颜色 color:red;。颜色可以写颜色名：如red,blue,green等。颜色也可以写rgb值和十六进制表示值：如rgb(0,255,255)，#00FF00，注意写十六进制值必须写#
4.背景颜色：background-color:#000FF00
5.超链接去下划线：text-decoration:none;
6.关于表格设置：table{border:1px sloid black;（设置边框） border-collapse:collapse(将边框合并)}

总结

本节主要介绍了前端语言CSS的常用知识，CSS语法由三部分构成：选择器、属性和值组成CSS选择器的使用是重要的，对于网页中内容的布局与颜色等设置有着不可忽略的作用。
在这里插入图片描述

思念寄给宇宙

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
JavaWeb开发前端语言：CSS

JavaWeb开发前端语言：CSS1、CSS介绍2、CSS语法规则3、CSS和HTML的结合方式3.1 CSS与HTML结合方式一前面我们知道了页面由三个部分组成。分别是结构、表现以及行为。结构，是我们在页面中可以看到的数据，我们也可以称之为内容。一般内容用html来展示。本节将学习页面的第二个部分：表现，所谓表现就是内容在页面上的展现形式。例如：颜色，布局等，一般需要使用CSS技术来进行实现。1、CSS介绍CSS是层叠样式表(Cascading Style Sh
复制链接

扫一扫