【笛子的JavaWeb总结】什么是CSS?

最新推荐文章于 2023-03-09 08:30:36 发布

SOS团团员A

最新推荐文章于 2023-03-09 08:30:36 发布

阅读量225

点赞数

分类专栏：笛子的JavaWeb总结文章标签： css html javaweb

本文链接：https://blog.csdn.net/qq_34332616/article/details/117089708

版权

笛子的JavaWeb总结专栏收录该内容

3 篇文章 0 订阅

订阅专栏

什么是CSS?

基础概念
使用方法
选择器种类（举例说明）
附件（完整测试代）

基础概念

CSS（Cascading Style Sheet），译为层叠样式表，用来与HTML文件结合使用简化HTML中繁琐的样式和属性设置。
它可以预先定义一套颜色、字体大小等属性，HTML的标签就无需重复设置，直接套用CSS中设置好的样式即可。

使用方法

设置位置：网页头< head> < /head>部分
设置方式
（1）方式一：通过< style>标签直接在一个同一个html文件中设置样式，例如：

<style type="text/css">
    在这里进行样式设置
</style>

（2）方式二：通过link标签导入外部的css文件导入外部css文件中的样式（这样的好处是更利于复用），例如：

<link rel="stylesheet" type="text/css" href="./css/CSSTEST.css">

语法格式
这里所谓的选择器有很多种类，可以理解为当前预设样式的"调用入口"或者“样式套装名”。举个例子就是装修风格中给的“简约风”“北欧风”“中国风”，你装修的时候告诉施工队这些名字，他们就知道地板该选择什么材质，墙壁该选择什么颜色了

选择器 {
    样式设置
 }

选择器种类（举例说明）

标签选择器

即以html中的标签名为选择器，为该标签设置默认属性

  div{
      border:2px solid green;
      color: blue;
      font-size: 30px;
    }
    span{
      border:2px dashed saddlebrown;
      color: deeppink;
      font-size: 20px;
    }
    <!-- 下面是在body中的调用-->
    <div>1.通过标签名选择器将div默认格式设置为2像素绿色实线边框，字体颜色设置为蓝色，字体大小设置为30个像素</div><br>
<span>2.通过标签名选择器将span默认格式设置为2像素棕色虚线边框，字体颜色设置为粉色，字体大小设置为20个像素</span>

在这里插入图片描述

id选择器

id顾名思义是一对一的，也就是它只能使用一次，并且每次只能设置一个id

    #id001{
      color: aqua;
      font-size: 35px;
    }
    <!-- 下面是在body中的调用-->
    <div id="id001">3.通过id选择器将div格式设置为字体35像素大小，颜色天蓝色，其他属性继承自默认的div选择器</div><br>
4.测试选择同样的id选择器是否可行，结果报错了<br><br>
<!--<div id="id001">4.测试选择同样的id选择器是否可行，结果报错了</div>-->

在这里插入图片描述

class选择器

不同于id，它可以重复使用，并且一次可以选择多个class组合使用

    .class01{
      color: darkorange;
      font-size: 30px;
    }
    <!-- 下面是在body中的调用-->
    <div class="class01">5.通过class选择器将div格式设置为字体30像素大小，颜色橙色，其他属性继承自默认的div选择器</div><br>
    <!-- class02 是通过link导入的css文件中设置的-->
<span class="class02">6.通过link标签导入外置css文件将scan格式设置为字体40像素大小，颜色黑色，下边框为紫色，其他属性继承自默认的span选择器</span><br>

在这里插入图片描述

附件（完整测试代）

HTML主文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>测试CSS不同选择器的使用方法及效果</title>
  <link rel="stylesheet" type="text/css" href="./css/CSSTEST.css">
  <style type="text/css">
    div{
      border:2px solid green;
      color: blue;
      font-size: 30px;
    }
    span{
      border:2px dashed saddlebrown;
      color: deeppink;
      font-size: 20px;
    }
    #id001{
      color: aqua;
      font-size: 35px;
    }
    .class01{
      color: darkorange;
      font-size: 30px;
    }
  </style>
</head>
<body>
<div>1.通过标签名选择器将div默认格式设置为2像素绿色实线边框，字体颜色设置为蓝色，字体大小设置为30个像素</div><br>
<span>2.通过标签名选择器将span默认格式设置为2像素棕色虚线边框，字体颜色设置为粉色，字体大小设置为20个像素</span>
<br><br>
<div id="id001">3.通过id选择器将div格式设置为字体35像素大小，颜色天蓝色，其他属性继承自默认的div选择器</div><br>
4.测试选择同样的id选择器是否可行，结果报错了<br><br>
<!--<div id="id001">4.测试选择同样的id选择器是否可行，结果报错了</div>-->
<div class="class01">5.通过class选择器将div格式设置为字体30像素大小，颜色橙色，其他属性继承自默认的div选择器</div><br>
<span class="class02">6.通过link标签导入外置css文件将scan格式设置为字体40像素大小，颜色黑色，下边框为紫色，其他属性继承自默认的span选择器</span><br>
</body>
</html>

导入的CSS文件

.class02{
  border-bottom-color: purple;
  font-size: 40px;
  color : black;
}

完整的页面展示

在这里插入图片描述

SOS团团员A

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【笛子的JavaWeb总结】什么是CSS?

什么是CSS?基础概念使用方法选择器种类（举例说明）标签选择器id选择器class选择器附件（完整测试代）基础概念CSS（Cascading Style Sheet），译为层叠样式表，用来与HTML文件结合使用简化HTML中繁琐的样式和属性设置。它可以预先定义一套颜色、字体大小等属性，HTML的标签就无需重复设置，直接套用CSS中设置好的样式即可。使用方法设置位置：网页头< head> < /head>部分设置方式（1）方式一：通过< style>标签直接
复制链接

扫一扫

专栏目录