初识CSS

DustinWangq

已于 2023-07-27 17:22:43 修改

阅读量63

点赞数

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

于 2023-07-27 17:21:41 首次发布

本文链接：https://blog.csdn.net/Welitsi/article/details/131964839

版权

HTML-CSS 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

CSS是一种样式表语言，用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档的呈现。本文介绍了CSS的起源、发展，以及如何编写和应用CSS样式，包括内联、内部和外部样式表的使用，并强调了学习CSS属性的重要性，同时提到了CSS注释和一些常见的CSS属性，如字体、盒子模型和定位等。

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

一、认识CSS

1.CSS概述

CSS表示层叠样式表（Cascading Style Sheet，简称：CSS，又称为又称串样式列表、级联样式表、串接样式表、阶层式样式表），是为网页添加样式的代码。

◼ CSS是一种语言吗？(知道即可)

MDN解释：CSS 也不是真正的编程语言，甚至不是标记语言。它是一门样式表语言；
维基百科解释：是一种计算机语言，但是不算是一种编程语言；

2.CSS的历史

◼ 早期的网页都是通过HTML来编写的，但是我们希望HTML页面可以更加丰富:

这个时候就增加了很多具备特殊样式的元素：比如i、strong、del等等；
后来也有不同的浏览器实现各自的样式语言，但是没有统一的规划；
1994年，哈肯·维姆·莱和伯特·波斯合作设计CSS，在1996年的时候发布了CSS1；
直到1997年初，W3C组织才专门成立了CSS的工作组，1998年5月发布了CSS2；
在2006~2009非常流行 “DIV+CSS”布局的方式来替代所有的html标签；
从CSS3开始，所有的CSS分成了不同的模块（modules），每一个“modules”都有于CSS2中额外增加的功能，以及向后兼容。
直到2011年6月7日，CSS 3 Color Module终于发布为W3C Recommendation。

◼ 总结：CSS的出现是为了美化HTML的，并且让结构（HTML）与样式（CSS）分离；

美化方式一：为HTML添加各种各样的样式，比如颜色、字体、大小、下划线等等；
美化方式二：对HTML进行布局，按照某种结构显示（CSS进行布局 – 浮动、flex、grid）；

二、编写CSS样式

1.如何编写CSS样式

CSS语法：

在这里插入图片描述

◼ 声明（Declaration）一个单独的CSS规则，如 color: red; 用来指定添加的CSS样式。

属性名（Property name）：要添加的css规则的名称；
属性值（Property value）：要添加的css规则的值；

2.如何将CSS样式应用到元素上？

◼ CSS提供了3种方法，可以将CSS样式应用到元素上：

内联样式（inline style）
内部样式表（internal style sheet）、文档样式表（document style sheet）、内嵌样式表（embed style sheet）
外部样式表（external style sheet）

◼ 疑问：三种方式，学好哪一个呢？

每一个都很重要，目前开发中不同的场景都会用到

3.内联样式

◼ 内联样式（inline style），也有人翻译成行内样式。

内联样式表存在于HTML元素的style属性之中。

<div style="color: red; font-size: 20px;">我是Div元素</div>
<p style="color: green; background-color: red;">我是P元素</p>

◼ CSS样式之间用分号;隔开，建议每条CSS样式后面都加上分号;

◼ 很多资料不推荐这种写法：

1.在原生的HTML编写过程中确实这种写法是不推荐的
2.在Vue的template中某些动态的样式是会使用内联样式的；

◼ 所以，内联样式的写法依然需要掌握。

4.内部样式表

◼ 内部样式表（internal style sheet）

将CSS放在HTML文件<head>元素里的<style>元素之中。

<style>
    div {
        color: red;
        font-size: 24px;
    }
    p {
        color: white;
        background-color: skyblue;
    }
</style>

◼ 在Vue的开发过程中，每个组件也会有一个style元素，和内部样式表非常的相似（原理并不相同）；

5.外部样式表

◼ 外部样式表（external style sheet） 是将css编写一个独立的文件中，并且通过<link>元素引入进来；

◼ 使用外部样式表主要分成两个步骤：

第一步：将css样式在一个独立的css文件中编写（后缀名为.css）；
第二步：通过<link>元素引入进来；

style.css

div {
    color: red;
    font-size: 24px;
}
p {
    color: white;
    background-color: skyblue;
}

index.html

<head>
<!-- 关联外部样式表 -->    
  <link rel="stylesheet" href="./css/style.css">
</head>
<body>
  <div>我是03div元素</div>
  <p>我是03p元素</p>
</body>

◼ link元素的作用，参见番外篇。

6.@import

可以在style元素或者CSS文件中使用@import导入其他的CSS文件

index.css

@import url(./style.css);
@import url(./test.css);
div {
    width: 200px;
}

三、CSS注释

◼ CSS代码也可以添加注释来方便阅读：

CSS的注释和HTML的注释是不一样的；
/* 注释内容 */

/* 这是一段注释 */
div {
    /* 这是一段注释 */
    width: 200px;
}

四、常见的CSS属性

1.字体相关属性

font-family: 设置字体
font-size: 字体大小，要注意绝对大小、相对大小、长度、百分比
font-style: 正常体、斜体、倾斜体
font-weight: 设置粗体
font-variant: 用来将所有字体都变成大写，但是原来大写的字体要比默认的大一些
font: 字体相关的所有属性综合
line-height: 行高
text-align: 对其方式
text-decoration: 设置下划线
text-indent: 缩进
text-shadow: 字体阴影
text-transform: 大小写切换
text-overflow: 文本溢出的解析
white-space: 设置如何处理元素中的空白，常设置属性normal、nowrap
vertical-align: 垂直对齐方式
word-spacing: 单词与单词之间的间距
letter-spacing: 字与字之间的间距
word-break: 文字换行
color: 字体颜色、前景色
opacity: 不透明度

2.盒子相关属性

width: 设置盒子宽度
height: 设置盒子高度
max-width/max-height: 最大宽度、高度
min-width/min-height: 最小宽度、高度
margin: 外边距
padding: 内边距
border: 边框
border-radius: 边框圆角
outline: 边框（不占据空间）
box-shadow: 边框阴影

3.背景相关属性

backgroud: 背景相关属性大融合
backgroud-color: 背景颜色
backgroud-image: 背景图片
backgroud-position: 背景位置
backgroud-size: 背景大小
backgroud-repeat: 重复次数
backgroud-attachment: 背景图片位置是否固定
backgroud-origin: 背景图片属性的相对区域
backgroud-clip: 背景是否延申

4.定位相关属性

position: 定位
left/right/top/bottom: 设置定位位置
z-index: 设定一个定位元素
float: 浮动
clear: 清除浮动
display: 元素的内部、外部显示类型
visibility: 元素显示
overflow: 超出部分的显示

5.必须掌握的CSS属性

◼ 必须掌握的CSS属性

在开发中90+%的时间写的都是这些属性；

◼ 赶紧开始？

◼ 不要小看这几个CSS属性，里面涉及到的概念是非常多的；

◼ 你必须了解CSS的很多特性，才能真正理解里面的每个属性；

◼ 并且在遇到一些问题的时候知道如何去调试

5.1 CSS样式的规则顺序

1.定位和布局

position
top/bottom/left/right
z-index
float/clear
flexbox
- flex-direction
- justify-content
- align-items
- …

2.展示与可见

dispaly
opacity
visibility

3.盒子模型顺序

margin
box-shadow
border
border-radius
width/height
padding

4.背景设置

backgroud

5.字体、文本

font-family/font-size/font-weight/font-style
line-height
text-align/text-transform
color

6.其他属性

overflow
clip
cursor
transform
animation/transition
white-space

6.CSS属性的官方文档

◼ CSS官方文档地址

https://www.w3.org/TR/?tag=css

◼ CSS推荐文档地址：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference#%E5%85%B3%E9%94%AE%E5%AD%97%E7%B4%A2%E5%BC%95

◼ 由于浏览器版本、CSS版本等问题，查询某些CSS是否可用：

可以到https://caniuse.com/查询CSS属性的可用性；
这个网站在后续的browserlist工具中我们再详细说明；

7.目前需要掌握的CSS属性

◼ 要想深刻理解所有常用CSS属性，最好先学会以下几个最基础最常用的CSS属性

font-size：文字大小
color：前景色（文字颜色）
background-color：背景色
width ：宽度
height：高度

7.1 CSS属性 - color

◼ color属性用来设置文本内容的前景色

包括文字、装饰线、边框、外轮廓等的颜色

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      font-size: 36px;
      background-color: #888;
      color: #39ca39;
      width: 300px;
      height: 200px;

      /* 验证color是设置前景色的，这里给文本添加装饰线 */
      /* 装饰线  */
      text-decoration: line-through;
      /* 边框 */
      border: 5px solid;
      /* 外轮廓 */
      outline: solid 5px;
    }
  </style>
</head>
<body>
  <div>我是Div元素</div>
</body>

在这里插入图片描述

可见，装饰线、文本、边框、外轮廓都变成了color属性设置的绿色

五、案例练习

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .item {
      width: 400px;
      display: inline-block;
      vertical-align: top;
      /* float: left; */
      margin-right: 30px;

    }
    .album {
      width: 400px;
    }

    .keyword {
      background-color: orange;
      color: white;
      font-size: 24px;
    }
  </style>
</head>
<body>
  <h1>星球介绍</h1>
  <div class="item">
    <h3>木星</h3>
    <img class="album" src="../images/muxing.jpg" alt="木星">
    <p><span class="keyword">木星(Jupiter)</span>是太阳系八大行星中体积最大，自转最快的行星，从内向外的第五颗行星。它的质量为太阳的干分之一，是太阳系中其它七大行星成量总和的25倍。由于木星与士星、天王星、海王星皆属气体行星，因此四者又合称类木行星(木星和士星合称气态巨行星)。木量是一个气态巨行星，占所有太妇系行星质量的70%，主费由氢组成，占其总质量的75%，其次为氮，占总历量的25%，岩核则含有其他校重的元素。人类所看到的通常是大气中云层的购端，压强比1个大气压略部</p>
  </div>
  <div class="item">
    <h3>地球</h3>
    <img class="album" src="../images/diqiu.jpg" alt="地球">
    <p><span class="keyword">地球 (Earth)</span>是太阳系八大行星之一，按离太阳由近及远的次序排为第三颗，也是太阳系中直径、质量和密度最大的类地行星，距离太阳1.5亿公里。地球自西向东自转，同时围绕太阳公转。现有40~46亿岁，[1] 它有一个天然卫星一月球，二者组成一个天体系统地月系统。46亿年以前起源于原始太阳星云。</p>
  </div>
</body>
</html>