CSS学习笔记

最新推荐文章于 2022-11-10 11:19:11 发布

JackWangCode

最新推荐文章于 2022-11-10 11:19:11 发布

阅读量351

点赞数

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

本文链接：https://blog.youkuaiyun.com/weixin_47441922/article/details/114781279

版权

CSS 专栏收录该内容

1 篇文章

订阅专栏

这篇博客详细介绍了CSS的基础知识，包括技术简介、语法、与HTML的三种结合方式（内联样式、内部样式表、外部样式表）、选择器（标签名、ID和类选择器）以及常用样式。博主探讨了各种结合方式的优缺点，强调了外部样式表的复用性和维护性。此外，还涵盖了W3C标准盒子模型的概念和个人理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS

1.css技术简介

详细情况请见文档css2.0.chm

定义：层叠样式表，cascading style sheet

用途：用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言

2.css语法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l4hdIpSU-1615693576595)(https://i.loli.net/2021/03/13/vdarWHB3hKbyqVu.png)]

选择器：浏览器根据“选择器”决定受 CSS 样式影响的 HTML 元素（标签）。
属性 (property) 是你要改变的样式名，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration），例如：p {color: blue} 多个声明：如果要定义不止一个声明，则需要用分号将每个声明分开。虽然最后一条声明的最后可以不加分号(但尽量在每条声明的末尾都加上分号).注：一般每行只描述一个属性

备注：CSS 注释和java的多行注释相同

3.css和html的3种结合方式

3.1内联样式

在标签的 style 属性上设置”key:value value;”，修改标签样式

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

<!--需求 1：分别定义两个 div、span 标签，分别修改每个 div 标签的样式为：边框 1 个像素，实线，红色。-->
    <div style="border: 1px solid red; height: 100px;width: 100px;background-color: green;text-align: center;" >div 标签 1</div>
    <div style="border: 1px solid red;">div 标签 2</div>
    <span style="border: 1px solid red;">span 标签 1</span>
    <span style="border: 1px solid red;">span 标签 2</span>
</body>
</html>

问题：这种方式的缺点？

如果标签多了。样式多了。代码量非常庞大。
可读性非常差。
Css 代码没什么复用性可方言。

3.2内部样式表

在 head 标签中，使用 style 标签添加css代码

格式如下：

xxx {
Key : value value;
}

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!-- style标签专门用来定义css样式代码-->
    <style type="text/css">
        /*总体设置div和span的样式就行了*/
        div{
            border: 1px solid red;
        }
        span{
            border: 1px solid red;
        }
    </style>
</head>

<body>
<!--需求 1：分别定义两个 div、span 标签，分别修改每个 div 标签的样式为：边框 1 个像素，实线，红色。-->
    <div>div 标签 1</div>
    <div>div 标签 2</div>
    <span>span 标签 1</span>
    <span>span 标签 2</span>
</body>
</html>

缺点：

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

3.3链接外部样式表

把css样式写成一个单独的css文件，再通过head标签下的link标签引入即可复用

模板操作：

<!--link标签是单标签,在idea中可以使用快捷键:link:css + tab基本补全接下来的一行代码-->
<link rel="stylesheet" type="text/css" href="目标css文件" />

3.css文件代码如下：

div{
    border: 1px solid yellow;
}
span{
    border: 1px solid red;
}

3-css.html文件代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--link标签是当前文档专门用来引入外部css样式代码
    rel属性表示relationship,是设置当前的文档与外部文档的关系
    stylesheet:就是样式表-->
    <link rel="stylesheet" type="text/css" href="3.css"/>
</head>
<body>
<!--需求 1：分别定义两个 div、span 标签，分别修改每个 div 标签的样式为：边框 1 个像素，实线，红色。-->
    <div>div 标签 1</div>
    <div>div 标签 2</div>
    <span>span 标签 1</span>
    <span>span 标签 2</span>
</body>
</html>

3.4css与html三种结合方式个人理解

区别：

第一种方式内联样式没有复用性；

第二种方式内部样式运用到css的语法规则，改进了第一种方式，但是只能在一个页面使用，简单教学案例适用

第三种方式外部样式运用到css的语法规则，改进了第二种方式，而且适用于所有页面

优先级不同

同一级别css引入方式不同，优先级不同，内联(行内)样式 > 内部样式表 > 外部样式表

4.css选择器

4.1标签名选择器

作用：决定哪些标签被动地使用这个样式

格式：

标签名{ 
	属性：值; 
}

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>标签名选择器</title>
   <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>    
   
   
   <!-- 
   需求1：在所有div标签上修改字体颜色为蓝色，字体大小30个像素。边框为1像素黄色实线。
   并且修改所有span 标签的字体颜色为黄色，字体大小20个像素。边框为5像素蓝色虚线。
    -->
   <div>div标签1</div>
   <div>div标签2</div>
   <span>span标签1</span>
   <span>span标签2</span>
   
</body>
</html>

4.2id选择器

作用：通过id属性选择性地使用这个样式

格式：

#id属性值{ 
	属性：值; 
}

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>ID选择器</title>
   <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>    
   
   <!-- 
   需求1：分别定义两个 div 标签，
   第一个div 标签定义 id 为 id001 ，然后根据id 属性定义css样式修改字体颜色为蓝色，
   字体大小30个像素。边框为1像素黄色实线。
   
   第二个div 标签定义 id 为 id002 ，然后根据id 属性定义css样式 修改的字体颜色为红色，字体大小20个像素。边框为5像素蓝色点线。
    -->
   
   <div id="id001">div标签1</div>
   <div id="id002">div标签2</div>
   
</body>
</html>

4.3class选择器（类选择器）

作用：通过class属性有效地选择性去使用这个样式

格式：

.class属性值{
	属性：值;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>class类型选择器</title>
   <style type="text/css">
      .class01{
         color: blue;
         font-size: 30px;
         border: 1px yellow solid;
      }
      .class02{
         color: gray;
         font-size: 26px;
         border: 1px red solid;
      }
   </style>
</head>
<body>

   <!-- 
      需求1：修改 class 属性值为 class01的 span 或 div 标签，字体颜色为蓝色，字体大小30个像素。边框为1像素黄色实线。
      需求2：修改 class 属性值为 class02的 div 标签，字体颜色为灰色，字体大小26个像素。边框为1像素红色实线。
    -->

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

</body>
</html>

4.4id选择器和class选择器个人理解

区别：

可不可以重复使用（单个处理和批量处理）;
优先级不同

详情区别：

id选择器只能让一个标签使用，不可重复，否则在idea中会报错,类选择器可以重复设置，可以给许多标签使用
两个选择器同时操作一个标签时，id选择器优先作用

4.5组合选择器

作用：可以让多个选择器共用同一个css样式代码

格式：

选择器 1，选择器 2，选择器 n{
	属性：值;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>class类型选择器</title>
    <style type="text/css">
        #id01,.class01{
            color: blue;
            font-size: 20px;
            border: 1px yellow solid;
        }
    </style>
</head>
<body>

   <!-- 
   需求1：修改 class="class01" 的div 标签 和 id="id01" 所有的span标签，
   字体颜色为蓝色，字体大小20个像素。边框为1像素黄色实线。
    -->

   <div class="class01">div标签class01</div> <br />
   <span id="id01">span 标签</span>  <br /> 
   <div>div标签</div> <br />
   <div>div标签id01</div> <br />

</body>
</html>

4.6常用样式

4.6.1字体颜色

color:red;

颜色可以写颜色名如：black, blue, red, green 等

颜色也可以写 rgb 值和十六进制表示值：如 rgb(255,0,0)，#00F6DE，如果写十六进制值必须加#

4.6.2宽度

width:19px;

宽度可以写像素值：19px；也可以写百分比值：20%；

4.6.3高度

height:20px;

高度可以写像素值：19px；也可以写百分比值：20%；

4.6.4背景颜色

background-color:#0F2D4C

4.6.5字体样式

color：#FF0000； 
font-size：20px;

4.6.6红色 1 像素实线边框

 border：1px solid red;

4.6.7DIV 居中

div:division 块

代码：

margin-left: auto;
margin-right: auto;

4.6.8文本居中：

text-align: center;

4.6.9超连接去下划线

text-decoration: none;

4.6.10表格细线

table { 
	border: 1px solid black; /*设置边框*/ 
	border-collapse: collapse; /*将边框合并*/
} 
td,th { 
	border: 1px solid black; /*设置边框*/ 
}

4.6.11列表去除修饰

 ul { 
 	list-style: none;
 }

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>06-css常用样式.html</title>
    <style type="text/css">
      div{
          color: red;
          border: 1px blue solid;
          width: 300px;
          height: 300px;
          background-color: aliceblue;
          font-size: 20px;
          margin-left: auto;
          margin-right: auto;
          text-align: center;
      }
      a{
          /*这时候text-decoration: none;不能是在div标签里面，应该是在a标签里面*/
          text-decoration: none;
      }
      table{
          border: 1px blue solid;
          /* css合并表格边框是collapse,html合并边框是cellspacing="0" */
          border-collapse: collapse;
      }
      td{
          border: 1px blue solid;
      }
      ul{
          list-style: none;
      }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>1.1</td>
            <td>1.2</td>
        </tr>
    </table>
    <ul>
        <li>1111</li>
        <li>2222</li>
        <li>3333</li>
        <li>4444</li>
    </ul>
    <a href="http://www.baidu.com" target="_blank">戳我，有惊喜</a>
    <div>我是div标签</div>
</body>
</html>