css基本语法

Django~溪风

已于 2022-10-31 10:47:25 修改

阅读量427

点赞数 1

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

于 2022-10-12 12:40:13 首次发布

本文链接：https://blog.csdn.net/Django_/article/details/127190613

版权

本文介绍了CSS中的盒模型，包括padding、margin、盒模型的占位计算和box-sizing。详细讲解了如何实现元素的内边距、外边距以及水平居中。还涉及到了display属性对布局的影响，以及不同元素类型的转换。同时涵盖了文本属性、背景属性和选择器的基本用法。

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

注意：
text-align ：center 控制的是文字水平，图片水平居中
margin ：0 auto；控制的是div块级元素水平居中，不是内容，是盒模型居中
transparent：颜色透明

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
     
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>1</li>
    </ul>
  </body>
</html>

文本属性：

文本间距

背景属性

<style>
.a{
     
	background-color:rgba(255,0,0,2)  
	/*a代表的是透明度*/
	设置背景图像透明度
	background-position: left top
	设置背景图像位置
	/* 
	 left center right
	 top center bottom
	 */
	 background-size:contain
	 设置背景图像大小高宽
	 /*
		1、40px 40px
		2、100% 100%
		3、cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域
		4、contain：把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域，铺不满盒子，留白
	*/
}
</style>

fixed：固定，固定在浏览器窗口里面，固定就相当于浏览器窗口，所以会造成视觉差异
只要设置了fixed这个固定值后，背景图相当于整个浏览器的窗口固定住了

浏览器滚动鼠标时，背景不是跟着盒子滚动，是跟着窗口滚动

背景属性的复合写法;

浮动属性：

--------------------------------------------------------------------------------------------------------------------------
css基础写法：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      h1 {
     
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>基础语法，h1标签只能出现一次</h1>
  </body>
</html>

-------------------------------------------------------------------------------------------------------------------------------
css四种引入方式
1、内嵌样式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      h1 {
     
        color: red;
      }
      div{
     
        color: blue;
      }
    </style>
  </head>
  <body>
    <h1>css规则由两个主要的部分构成：选择器，以及一条或者多条声明构成</h1>
    <div>123</div>
  </body>
</html>

2、行内样式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>行内样式，一般不会使用，通常配合js使用</h1>
    <div style="color: red;">行内样式只针对当前这一行起作用</div>
  </body>
</html>

3、外链样式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/basic.css">
    rel：关联
    stylesheet：样式表
    href：路径和文件名
  </head>
  <body>
    <h1>外链样式</h1>
    <div>css写在单独的css页面中，通过link引入，优点：多个 HTML 网页，可以共用一个 CSS 样式表文件</div>
  </body>
</html>

4、导入样式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      @import url(./css/basic.css);
    </style>
  </head>
  <body>
    <h1>导入样式</h1>
    <div>
      <p>导入样式是最不常见的样式表导入方法</p>
      <p>
        使用导入式的样式表，不会等待css文件加载完毕，而是会立即渲染html结构，这样，网页就会呈现出没有css裸奔现象
      </p>
      <p>了解即可，开发不用</p>
    </div>
  </body>
</html>

样式表的优先级：

！important>行内>内部>外部
！important	提升权重 ，它的优先级最大

<style>
  /* 权重 （0,1,2） */
  .list ul li {
     
    color: red;
  }

  /* 权重（0,1,0） */
  /* !important 提升权重，生效 */
  .desc {
     
    color: skyblue !important;
  }
</style>

<body>
  <h2>!important 提升权重</h2>

  <div class="list">
    <ul>
      <li>我是列表项</li>
      <li class="desc">我是列表项</li>
      <li>我是列表项</li>
      <li>我是列表项</li>
    </ul>
  </div>
</body>

总结：

@import 和 link区别？

@import引用的css页面加载出现的更晚，link引用的css样式同时被加载

----------------------------------------------------------------------------------------------------------------------------
css选择器之基础选择器
1、标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    p{
     
      color: blanchedalmond;
    }
    ul{
     
      list-style: none;
    }
  </style>
</head>
<body>
  <h1>标签选择器</h1>
  <p>标签选择器称之为：元素选择器，类型选择器</p>
  <p>他直接使用元素的标签名当做选择器，将选择页面上所有该种标签</p>
  <p>标签选择器将选择页面上所有该种标签，无论标签所处位置的深浅，无论嵌套多少层</p>
  <p>标签选择器的覆盖面非常大，通常用于标签样式的初始化</p>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</body>
</html>

2、id选择器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #doc{
     
      color: aquamarine;
    }
  </style>
</head>
<body>
  <h1>id选择器</h1>
  <div>
    <p id="doc">id选择器使用html元素的id属性来选择特定元素，通常跟js配合使用</p>
    <p>元素的id在页面中是唯一的，因此id选择器用于选择一个唯一的元素</p>
    <p>要选择具有特定的id的元素，style样式中需要添加  #  后跟元素的id</p>
  </div>
</body>
</html>

3、class类选择器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .dox{
     
      color: red;
    }
    .bg{
     
      background-color: blueviolet;
    }
  </style>
</head>
<body>
  <h1>class 类选择器</h1>
  <p class="dox">类选择器在实际开发中非常常见</p>
  <p class="dox  bg">一个元素可以有多个class名，类名间需要用空格隔离</p>
  <p>多个标签可以定义相同的类名</p>
  <p>不同标签的相同样式放在同一类名中，可以减少代码量</p>
</body>
</html>

在同一个类中和同一个css样式表内，类的样式是根据css样的“就近原则”变化的，也就是说css样式中谁写在最下边，就展现出谁的样式，不是类选择器中的类名谁在前展示谁

4、通配符选择器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
     
      color: red;
    }
  </style>
</head>
<body>
  <h1>通配符选择器</h1>
  <p>代表页面当中所有的元素</p>
  <div>基本不用，对性能消耗过大，不过有时候用在页面全局初始化</div>
</body>
</html>

选择器的优先级

id选择器>class选择器>标签选择器>通配符选择器
1、当不同选择器的样式设置有冲突的时候，高权重选择器的样式会覆盖低权重选择器的样式
2、相同权重选择器(选择器的级别相同)，样式遵循就近原则，哪个选择器最后定义，就采用哪个选择器
3、谁的优先级权重高，谁的css样式就会展示出来

复合选择器之后代选择器：

选择器是从右到左的寻找法，先找到所有的子标签然后再找到包裹的父标签

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div p{
     
        color: red;
      }
      span div p{
     
        color: blue;
      }
    </style>
  </head>
  <body>
    <h1>后代选择器</h1>
    <span>
      <div>
        <p>在css中，使用 空格 表示后代</p>
        <p>后代不一定都是儿子，子孙都可以</p>
        <p>后代选择器可以有很多空格，隔开好几代</p>
      </div>
    </span>
  </body>
</html>

-----------------------------------------------------------------------------------------------------------------------------
css字体属性之字体颜色属性
1、color属性：字体颜色

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">