CSS知识点总结（一）

最新推荐文章于 2024-06-03 17:26:06 发布

sakula`

最新推荐文章于 2024-06-03 17:26:06 发布

阅读量930

点赞数 5

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

本文链接：https://blog.csdn.net/weixin_45455923/article/details/109549301

版权

本文详细介绍了CSS的基本概念，包括CSS与HTML的区别、语法规范和代码风格。深入探讨了基础选择器，如标签、类、ID和通配符选择器。接着讲解了字体属性，包括字体系列、大小、粗细和文本样式。还介绍了文本属性、CSS引入方式、复合选择器、元素显示模式以及背景属性。内容全面，适合CSS初学者学习。

摘要由CSDN通过智能技术生成

1.CSS简介

1.1CSS与HTML区别

HTML 主要做结构,显示元素内容.
CSS 美化 HTML ,布局网页.
CSS 最大价值: 由 HTML 专注去做结构呈现，样式交给 CSS，即结构 ( HTML ) 与样式( CSS ) 相分离。

1.2语法规范

CSS 规则由两个主要的部分构成：选择器以及一条或多条声明。
 选择器是用于指定 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式
 属性和属性值以“键值对”的形式出现
 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
 属性和属性值之间用英文“:”分开
 多个“键值对”之间用英文“;”进行区分

// 所有的样式，都包含在 <style> 标签内，表示是样式表。<style> 一般写到 </head> 上方
<head>
 <style>
 h4 {
   
 color: blue;
 font-size: 100px;
 }
 </style>
</head>

1.3CSS代码风格

样式格式书写
紧凑格式

h3 {
    color: deeppink;font-size: 20px;}

展开格式

h3 {
   
 color: pink;
 font-size: 20px; 
}

强烈推荐第二种格式，因为更直观。
样式大小写

h3 {
   
 color: pink;
}

H3 {
   
 COLOR: PINK; 
}

强烈推荐样式选择器，属性名，属性值关键字全部使用小写字母，特殊情况除外。
空格规范

h3 {
   
color: pink; 
}

① 属性值前面，冒号后面，保留一个空格
② 选择器（标签）和大括号中间保留空格

2.CSS基础选择器

CSS 选择器的作用：选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用。简单来说，就是选择标签用的。
选择器分类
选择器分为基础选择器和复合选择器两个大类，我们这里先讲解一下基础选择器。
 基础选择器是由单个选择器组成的
 基础选择器又包括：标签选择器、类选择器、id 选择器和通配符选择器

2.1标签选择器

标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。

 <style>
    /* 标签选择器 : 写上标签名 */
    p {
   
        color: green;
    }
    div {
   
        color: pink;
    }
    </style>

2.2 类选择器

  <style>
        /* 类选择器口诀: 样式点定义  结构类(class)调用  一个或多个 开发最常用*/
      .red {
   
          color: red;
      }
      .star-sing {
   
        color: green;
      }
      .memeda {
     
         color: pink;
      }
    </style>

利用类画三个颜色的盒子

    <style>
        .red {
   
            width: 100px;
            height: 100px;
            /* 背景颜色 */
            background-color: red;
        }
        .green {
   
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>

类选择器多类名的使用（与上图比较）

 <style>
        .box {
   
            width: 150px;
            height: 100px;
            font-size: 30px;
        }
        .red {
   
        
            /* 背景颜色 */
            background-color