前端三剑客之一 CSS~

一、认识CSS

CSS，即层叠样式表，是 Web 开发中的核心技术之一。它的主要作用是控制 HTML 文档的外观和布局

核心作用：

样式与结构分离
CSS 的诞生是为了将页面的内容结构 (HTML) 和视觉样式 (CSS) 分离。这使得 HTML 文档保持简洁，专注于语义，而样式可以独立管理和修改
外观控制
CSS 可以精确控制 HTML 元素的一切视觉表现，包括颜色，字体，大小，边距，布局和位置等等
层叠性
这是 CSS 最重要的特性。当多个样式规则应用于同一个元素时，CSS 会根据优先级、特殊性和源头等规则，决定最终应用哪个样式

二、基本语法规范

在选择器和 { 之间保留一个空格
在属性名和 : 之间不留空格
在 : 和属性值之间保留一个空格

三、引入方式

行内样式

html 复制代码

<div style="color: blue;">我是一个div111</div>

内部样式表

css 复制代码

<style>
        p {
            color: red;
        }
    </style>

外部样式表

css 复制代码

div {
    color: purple;
    font-size: 90px;
    border: ridge;
}

html 复制代码

<link rel="stylesheet" href="test.css">
<p>一个段落</p>
    <div>我是一个div333</div>
    <a href="#" class="red">超链接1</a>
    <a href="#" class="red">超链接2</a>
    <a href="#">超链接3</a>
    <div>
        <span id="span1">111</span>
        <span>222</span>
        <span>333</span>
    </div>
    <div>我是一个div222</div>

四、CSS选择器

1. 标签选择器

css 复制代码

	  a {
	      color: green;
	  }

2.类选择器

css 复制代码

.red {
            color: red;
        }

3.ID选择器

css 复制代码

#span1 {
            color: blue;
        }

4.通配符选择器

css 复制代码

* {
            color: red;
         }

5.复合选择器

css 复制代码

div #span1 {
            color: green;
        }

五、常用CSS

color
color: 设置字体颜色

css 复制代码

a {
      color: green;
  }

font-size
font-size: 设置字体大小

css 复制代码

div #span1 {
            font-size: 200px;
        }

border
border: 边框
边框是一个复合属性, 可以同时设置多个样式, 不分前后顺序, 浏览器会根据设置的值自动判断，通常四个值表示上，右，下，左，3个值表示上，左和右，下，两个值表示上下，左右，一个值表示上下左右
注意：虽然border-width、border-style和 border-color 简写属性接受最多 4 个参数来为不同的边设置宽度、风格和颜色，但 border 属性只接受三个参数，分别是宽度、风格和颜色，所以这样会使得四条边的边框相同

css 复制代码

p {
      border: solid 10px red;
   }

width/height
width: 设置宽度
height: 设置高度
只有块级元素可以设置宽高
使用 display 属性可以修改元素的显示模式
display: block 改成块级元素
display: inline 改成行内元素

css 复制代码

div {
      width: 200px;
      height: 200px;
   }

padding和margin
padding: 内边距, 设置内容和边框之间的距离
margin: 外边距, 设置元素和元素之间的距离

css 复制代码

#span1 {
            padding: 200px;
            margin: 200px;
        }

本期内容到此为止，喜欢的话请点个赞，谢谢观看！！！