css基础(1)

最新推荐文章于 2023-01-05 16:20:17 发布

zy_lalala

最新推荐文章于 2023-01-05 16:20:17 发布

阅读量712

点赞数 1

分类专栏： CSS 文章标签： css css3

本文链接：https://blog.csdn.net/zy_lalala/article/details/119794051

版权

一、CSS简介

1. 概念

CSS (Cascading Style Sheets) ，通常称为 CSS样式表或层叠样式表（级联样式表）。

它定义了如何显示 HTML 元素。

HTML 标签原本被设计为用于定义文档内容，样式表定义如何显示 HTML 元素。

2. 作用

主要用于设置 HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。
解决内容与表现分离的问题。

二、引入CSS样式表

根据css样式书写的位置可分为以下3类：

1. 行内式 / 内联样式表

是通过标签的style属性来设置元素的样式。（任何HTML标签都拥有style属性）

语法格式：

<html标签 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;">
    显示的内容
</html标签>

案例：

<h2 style="font-size: 30px; color: red; background-color: pink;"> css引入方式1：行内式 / 内联样式（Inline Styles）
</h2>

显示效果如下：

在这里插入图片描述

注意：

style其实就是标签的属性
样式属性和值中间是冒号:
多组属性值之间用分号;隔开。

缺点：

当我们给一个html标记设置很多样式的时候，这个HTML标记就会变得很长，以后修改起来不方便
只能控制当前的标签和以及嵌套在其中的字标签，造成代码冗余
没有实现样式和结构相分离

2. 内嵌式 / 内部样式表

是将CSS代码集中写在HTML文档的head头部标签中，并且用<style>标签定义。

语法格式：

<head>
<style type="text/CSS">
    选择器（选择的标签） {
      
      属性1: 属性值1;
      属性2: 属性值2; 
      属性3: 属性值3;
    }
</style>
</head>

案例：

<head>
  <style>
    .h2 {
     
      font-size: 30px;
      background-color: skyblue;
    }
  </style>
</head>
<body>
  <h2 class="h2">css引入方式2：内嵌式 / 内部样式表</h2>
</body>

显示效果如下：

在这里插入图片描述

注意：

style标签一般位于head标签中，当然理论上他可以放在HTML文档的任何地方。
type=“text/css” 在html5中可以省略。

缺点：

当我们设置的样式很多的时候，会让html网页的头部显得很多
只能控制当前的页面
样式和结构没有彻底分离

3. 外链式 / 外部样式表

是将所有的样式放在一个或多个以 .css 为扩展名的外部样式表文件中，通过<link>标签将外部样式表文件链接到HTML文档中。

具体步骤

在html文件之外建立一个独立的样式表文件【.css】
编辑具体样式代码
在当前的html文件中的head标记中通过link标记将样式表文件【.css】链接进入

语法格式：

<head>
  <link rel="stylesheet" type="text/css" href="css文件路径">
</head>

注意：

link 是个单标签
link标签需要放在head头部标签中，并且指定link标签的三个属性：

rel——定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。

type——定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。可以省略

href——定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。

案例：

<!-- html页面 -->
<head>
  <link rel="stylesheet" type="text/css" href="./test.css">
</head>
<body>
  <h3>css引入方式3：外链式 / 外部样式表</h3>
</body>

/* test.css页面 */
h3 {
   
  font-size: 40px;
  background-color: coral;
}

显示效果如下：

在这里插入图片描述

优点： 这种方式可以做到html与css的分离控制。

三、语法格式

平时我们在html文件中使用CSS，用的最多的方式是内部样式块和链入样式表。

这两种css的操作语法都是一样的，由两个主要的部分构成：选择器和一条或多条声明【具体样式设置】

在这里插入图片描述

选择器用于指定CSS样式作用的HTML标签
花括号内是对该对象设置的具体样式
属性和属性值以“键值对”的形式出现
属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
属性和属性值之间用英文冒号 : 进行连接
多个“键值对”之间用英文分号 ; 进行分隔
为了让CSS可读性更强，尽量每行只描述一个属性

四、CSS注释

注释是用来解释说明你的代码的含义。

语法格式：

/* 这是个注释 */

注意：

CSS的注释不能用来注释html元素，只能作用在css上
注释往往都出现在具体样式属性设置的后面
可以一次性注释多行内容，但是不能嵌套
注释的内容不会被执行，可以用来调试程序

五、CSS选择器

选择器的作用：得到需要被控制的html元素

选择器分为基础选择器和复合选择器

1. CSS基础选择器

1）标签选择器 / 元素选择器

根据html元素的名称得到需要设置样式的html元素。

作用：

标签选择器可以把某一类标签全部选择出来比如所有的div标签和所有的 span标签
优点：

能快速为页面中同类型的标签统一样式
缺点：

不能设计差异化样式

<head>
  <style>
    h2 {
     
      color: red;
    }

    p {
     
      background-color: pink;
    }

    div {
     
      /* 设置字体加粗 */
      font-weight: 700;
    }
  </style>
</head>

<body>
  <h2>标签选择器 / 元素选择器</h2>
  <p>根据html元素的名称得到需要设置样式的html元素</p>
  <p>作用：标签选择器可以把某一类标签全部选择出来，比如所有的div标签和所有的span标签</p>
  <div>优点：能快速为页面中同类型的标签统一样式</div>
  <div>缺点：不能设计差异化样式</div>
</body>

显示效果如下：

在这里插入图片描述

2）id 选择器

根据html元素的id属性值得到需要设置样式的html元素。

需要为html元素设置id属性，

在样式文件中使用#表示id属性，后面紧跟id名。

<head>
  <style>
    h2 {
     
      color: red;
    }

    #p1 {
     
      font-size: 20px;
      font-weight: 700;
    }

    #p2 {
     
      color: blue;
    }

    #p3 {
     
      background-color: pink;
    }
  </style>
</head>

<body>
  <h2>id 选择器</h2>
  <p id="p1">根据html元素的id属性值得到需要设置样式的html元素</p>
  <p id="p2">需要为html元素设置id属性</p>
  <p id="p3">在样式文件中使用#表示id属性，后面紧跟id名。</p>
</body>

显示效果如下：

在这里插入图片描述

3）class 选择器 / 类选择器

根据html元素的class属性值得到需要设置样式的html元素。

需要为html元素设置class属性，

在样式文件中通过.表示class属性，后面紧跟class名。

优点：

可以为元素对象定义单独或相同的样式，可以选择一个或者多个标签
注意：

长名称或词组可以使用中横线-连接来为选择器命名。

不要纯数字、中文等命名，尽量使用英文字母来表示。

<head>
  <style>
    h2 {
     
      color: red;
    }

    .p1 {
     
      font-weight: 700;
      background-color: skyblue;
    }

    .p2 {
     
      font-size: 20px;
    }

    .p3 {
     
      color: blue;
    }

    .p4 {
     
      background-color: pink;
    }
  </style>
</head>

<body>
  <h2>class 选择器 / 类选择器</h2>
  <p class="p1">根据html元素的class属性值得到需要设置样式的html元素。</p>
  <p class="p2">需要为html元素设置class属性，</p>
  <p class="p3">在样式文件中通过 . 表示class属性，后面紧跟class名。</p>
  <p class="p4">优点：可以为元素对象定义单独或相同的样式，可以选择一个或者多个标签</p>

</body>

显示效果如下：

在这里插入图片描述

ps：类选择器特殊用法 - 多类名

我们可以给标签指定多个类名，从而达到更多的选择目的。

各个类名中间用空格隔开。

<head>
   .pink {
      background-color: pink;
    }

    .strong {
      font-weight: 700;
    }

    .big {
      font-size: 30px;
    }
  </style>
</head>

<body>
  <div class="pink strong big">我们可以给标签指定多个类名，从而达到更多的选择目的。</div>
</body>

显示效果如下：

在这里插入图片描述

4）通配符选择器

通配符选择器用*号表示，*就是选择所有的标签，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。

一般用于清除所有HTML标记的默认边距：

* {
   
  margin: 0;     /* 定义外边距 */
  padding: 0;    /* 定义内边距 */
}

2. CSS复合选择器

1）后代选择器 / 包含选择器

得到被父元素包含的所有子元素，包含嵌套在内的所有的子孙后代元素。

其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，先写父亲爷爷，再写儿子孙子。

<head>
  <style>
    .shopping {
     
      width: 300px;
      border: 2px solid #000;
    }

    .shopping .title {
     
      font-weight: 700;
      text-align: center;
      background-color: #ccc;
    }

    .shopping ul {
     
      color: red;
      background-color: lightblue;
    }
  </style>
</head>

<body>
  <div class="shopping">
    <p class="title">购物商城</p>
    <ul>
      <li>家电</li>
      <li>厨卫</li>
      <li>家具
        <ol>
          <li>衣柜
            <ul>
              <li>两开门小衣柜</li>
              <li>八开门大衣柜</li>
            </ul>
          </li>
          <li>床</li>
          <li>沙发</li>
        </ol>
      </li>
    </ul>
    <div>
      <ul>
        <li>休闲食品</li>
        <li>蔬菜</li>
        <li>水果
          <ol>
            <li>苹果</li>
            <li>香蕉</li>
          </ol>
        </li>
      </ul>
    </div>
  </div>
</body>

显示效果如下：

在这里插入图片描述

2）子元素选择器

得到指定父元素的直接子元素，而不是所有子元素。即只能选择作为某元素**子元素(亲儿子)**的元素。

其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接。

<head>
  <style>
    .shopping {
     
      width: 300px;
      border: 2px solid #000;
    }

    .shopping .title {
     
      font-weight: 700;
      text-align: center;
      background-color: #ccc;
    }

    .shopping>ul {
     
      color: red;
      background-color: lightblue;
    }
  </style>
</head>

<body>
  <div class="shopping">
    <p class="title">购物商城</p>
    <ul>
      <li>家电</li>
      <li>厨卫</li>
      <li>家具
        <ol>
          <li>衣柜
            <ul>
              <li>两开门小衣柜</li>
              <li>八开门大衣柜</li>
            </ul>
          </li>
          <li>床</li>
          <li

最低0.47元/天解锁文章

zy_lalala

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css基础(1)

一、CSS简介1. 概念CSS (Cascading Style Sheets) ，通常称为 CSS样式表或层叠样式表（级联样式表）。它定义了如何显示 HTML 元素。HTML 标签原本被设计为用于定义文档内容，样式表定义如何显示 HTML 元素。2. 作用主要用于设置 HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏
复制链接

扫一扫

专栏目录