CSS基础

帘珑璇璇

已于 2024-04-10 17:07:20 修改

阅读量350

点赞数 15

文章标签： css 前端

于 2024-03-27 16:20:59 首次发布

本文链接：https://blog.csdn.net/m0_56405922/article/details/137023378

版权

CSS（层叠样式表）是一种用于定义网页样式和布局的语言。

1 CSS的基本语法

选择器：选择器用于选择要应用样式的HTML元素。常见的选择器包括标签选择器（如 p、h1、div）、类选择器（如 .classname）和ID选择器（如 #idname）。
属性：属性定义了要应用的样式的具体设置，如颜色、字体大小、边框等。每个属性都有一个对应的值，如 color: red、font-size: 16px。
声明块：属性和值一起组成了声明块，每个声明块用大括号{}包裹。多个声明块可以放在同一个选择器下，用分号分隔。
样式规则：样式规则由选择器和声明块组成，如下所示：

selector {
  property1: value1;
  property2: value2;
}

5.注释：注释可以在CSS文件中添加以提高代码可读性，注释以 /* 开头，以 */ 结尾。

/* 这是一个注释 */

6.引入样式表：可以将CSS样式表直接写在HTML文件的<style>标签中，也可以将样式表保存为外部CSS文件，并在HTML文件中使用<link>标签引入。

<!-- 内部样式表 -->
<style>
  body {
    background-color: lightblue;
  }
</style>

<!-- 外部样式表 -->
<link rel="stylesheet" href="styles.css">

这是CSS的基本语法，通过合理的选择器和属性设置，可以实现对网页样式的完全控制。

2 css载入方式

在网页中加载CSS样式表有三种方式：

内部样式表（Internal Style Sheet）
将CSS样式表直接写在HTML文件的<style>标签中。这种方式适合针对单个页面添加样式。

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: lightblue;
    }
  </style>
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>

外部样式表（External Style Sheet）
将CSS样式表保存为独立的外部文件，并在HTML文件中使用<link>标签引入。这种方式适合多个页面共享相同样式。

在styles.css中：

body {
  background-color: lightblue;
}

在HTML文件中：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>

内联样式（Inline Style）
将样式直接写在HTML标签的style属性中。这种方式适合对单个元素添加特定样式。

<!DOCTYPE html>
<html>
<body>
  <h1 style="color: blue;">Hello, World!</h1>
</body>
</html>

以上是加载CSS样式表的三种方式，根据实际情况选择合适的方式来管理和应用样式。

3 选择器

1.标签选择器（Tag Selector）：通过HTML元素的标签名来选择元素。

p {
  color: red;
}

2.类选择器（Class Selector）：通过类名来选择元素。类选择器以.开头。

.myclass {
  font-size: 16px;
}

<p class="myclass">This is a paragraph with the class "myclass".</p>

3.ID选择器（ID Selector）：通过元素的ID属性来选择元素。ID选择器以#开头。

#myid {
  background-color: lightblue;
}

<div id="myid">This is a div with the ID "myid".</div>

4.元素选择器（Universal Selector）：选择所有元素。

* {
  margin: 0;
  padding: 0;
}

5.后代选择器（Descendant Selector）：选择某个元素的后代元素。

div p {
  color: blue;
}

6.直接子元素选择器（Child Selector）：选择某个元素的直接子元素。

ul > li {
  list-style-type: none;
}

7.伪类选择器（Pseudo-class Selector）：用于选择元素的特殊状态，如:hover、:first-child等。

a:hover {
  text-decoration: underline;
}

4 CSS字体样式

属性	值	作用
color	color : red; color : #ff0000; color : rgb(255,0,0); color : rgba(255,0,0,.5);	规定文本的颜色
font-size	font-size : 12px; (Chrome浏览器接受最小字体是12px)	设置文本的大小
font-weight	bold（粗体） bolder（更粗） lighter（更细） 100~900（由细到粗，400等同默认，而700等同于bold）	设置文本的粗细
font-style	normal（默认值） italic（斜体）	指定文本的字体样式
font-family	每个值用逗号分开如果字体名称包含空格，它必须加上引号	指定字体（宋体、黑体）

5 CSS背景属性

属性	值	描述
background-color		设置背景颜色
background-image	url（“ ”）	设置背景图片
background-position	left top left center left bottom right top right center right bottom center top center center center bottom x% y%（第一个是水平位置，第二个是垂直位置，左上角是0% 0%，右下角是100% 100%） xpos ypos	设置背景图片显示位置
background-repeat	repeat（默认值） repeat-x（只向水平方向平铺） repeat-y（只向垂直方向平铺） no-repeat（不平铺）	设置背景图片如何填充
background-size	length（第一个值宽度，第二个值高度） percentage（计算相对位置区域的百分比，宽高） cover（保持图片纵横比并将图片缩放成完全覆盖背景区域的最小大小） contain（保持图片纵横比并将图像缩放成适合背景定位区域的最大大小）	设置背景图片大小属性

6 CSS文本属性

属性	值	描述
text-align	left（默认值） right center	文本的水平对齐方式
text-decoration	underline（下划线） overline（上划线） line-through（删除线）	规定添加到文本的修饰
text-transform	captialize（每个单词开头大写） uppercase（全部大写字母） lowercase（全部小写字母）	文本的大小写
text-indent	像素（负值是允许的。如果值是负数，将第一行左缩进）	首行文本缩进

7 CSS表格属性

属性	值	描述
border	大小样式颜色	表格边框
border-collapse	collapse	折叠边框
width		宽度
height		高度
text-align	left center right	水平对齐方式
vertical-align	top center bottom	垂直对齐方式
padding	像素值	填充单元格，上下左右空白

8 关系选择器

分类	定义	语法
后代选择器	选择所有被E元素包含的F元素中间用空格隔开	E F{ }
子代选择器	选择所有作为E元素的直接子元素F 用>表示	E>F{ }
相邻兄弟选择器	选择紧跟E元素后的F元素，即相邻的第一个兄弟元素用+表示（只能向下选择）	E+F{ }
通用兄弟选择器	选择E元素之后的所有兄弟元素F，作用于多个元素用~隔开（只能向下选择）	E~F{ }

9 盒子模型

div{
        width : 100px;
        height : 30px;
        padding : 10px;//padding-left/padding-right/padding-top/padding-bottom
        border : 3px solid red;
        margin : 30px 49px;
}

10 弹性盒模型（flex box）

父元素上的属性
display	flex（子元素默认水平排列）	开启弹性盒
flex-direction	row（左对齐，默认） row-reverse（反转后右对齐，最后一项在前面） column（纵向排列） column-reverse（反转后纵向排列）	指定弹性子元素在父容器中的位置
justify-content	flex-start（左） flex-end（右） center（居中）	内容对齐（水平方向）
align-items	flex-start（上） flex-end（下） center（居中）	盒子元素在垂直方向的对齐方式
子元素上的属性
flex	盒子1：3（权重）盒子2：1 盒子3：1	根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间

11 文档流

文档流（Document Flow）是指 HTML 文档中元素按照其在 HTML 中出现的顺序依次排列的现象。在网页布局中，文档流是指元素在页面中按照默认的排列方式依次排列，不会脱离文档流的元素会按照其在 HTML 中的顺序依次排列。

文档流分为两种：

块级元素（Block-level Elements）：块级元素会独占一行，从上至下垂直排列，各个元素会按照其在 HTML 中的顺序依次排列。常见的块级元素有 <div>、<p>、<h1> 等。
行内元素（Inline Elements）：行内元素不会独占一行，会在同一行内水平排列，各个元素会按照其在 HTML 中的顺序依次排列。常见的行内元素有 <span>、<a>、<strong> 等。

文档流的特点包括：

元素按照其在 HTML 中的顺序依次排列。
块级元素独占一行，从上至下垂直排列。
行内元素在同一行内水平排列。
元素在文档流中的位置受到父元素和兄弟元素的影响。

12 脱离文档流

浮动

属性	值	描述
float	left（元素向左浮动） right（元素向右浮动）	1浮动以后使元素脱离了文档流（两层） 2.浮动只有左右浮动，没有上下浮动 3.当所有元素同时浮动的时候，会变成水平摆放 4.当容器不足以横向摆放内容的时候，会在下一行摆放

属性

值

描述

float

left（元素向左浮动）

right（元素向右浮动）

1浮动以后使元素脱离了文档流（两层）

2.浮动只有左右浮动，没有上下浮动

3.当所有元素同时浮动的时候，会变成水平摆放

4.当容器不足以横向摆放内容的时候，会在下一行摆放

清除浮动

浮动会造成父元素高度塌陷，后续元素会受到影响

解决方案	属性	针对
父元素设置高度		父元素
受影响的元素增加clear属性	clear(left/right/both)	同级元素
overflow清除浮动	父级元素增加overflow：hidden和clear：both	父元素
伪对象方式	父元素名：：after{ content : ""; display：block; clear : both; }	父元素

定位

position属性指定了元素的定位类型

值	描述		位置
relative	相对定位	-	整个文档
absolute	绝对定位	脱离文档流	父元素
fixed	固定定位	脱离文档流	固定不变

设置定位后，可以使用四个方向值进行调整位置：left、top、right、bottom

z-index属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素前面。

14 CSS3新属性

圆角

阴影

动画

在CSS3中，可以使用@keyframes规则来创建动画。@keyframes规则定义了动画的关键帧，即动画从开始到结束的过程中的各个阶段。其基本语法如下

@keyframes animation-name {
  0% {
    /* 初始状态 */
  }
  50% {
    /* 中间状态 */
  }
  100% {
    /* 结束状态 */
  }
}

然后，可以通过animation属性将动画应用到元素上，如下所示：

.element {
  animation: animation-name 2s infinite;
}

其中，animation属性包括动画名称、动画持续时间、动画播放次数等参数。通过这种方式，可以在元素上应用之前定义的动画效果。

animation的参数（从前往后）
属性	可能的取值	含义
name	动画名称	定义动画的名称
duration	时间值（如1s、0.5s）	定义动画的持续时间
timing-function	linear（匀速） ease（逐渐变慢，默认） ease-in（加速） ease-out（减速） ease-in-out（先加速后减速）	设置动画效果的速率
delay	时间值（如1s、0.5s）	定义动画开始之前的延迟时间
iteration-count	数值（整数、infinite）	定义动画的播放次数，可以设置为具体次数或无限循环播放
direction	normal, reverse, alternate, alternate-reverse	定义动画的播放方向，normal表示正常播放，reverse表示反向播放，alternate交替播放
fill-mode	none, forwards, backwards, both	定义动画在播放前和播放后如何应用样式，none表示不应用样式，forwards表示保持最后一帧样式，backwards表示应用第一帧样式，both表示同时应用第一帧和最后一帧样式
play-state	running, paused	定义动画的播放状态，running表示播放中，paused表示暂停播放

15 媒体查询

媒体查询能使页面在不同终端设备下达到不同的效果。

媒体查询会根据设备的大小自动识别加载不同样式。

媒体查询的语法如下：

@media mediatype and (media feature) {
  /* CSS样式 */
}

@media：表示一个媒体查询规则的开始
mediatype：指定要应用样式的媒体类型，如screen、print、all等
media feature：指定查询条件，如屏幕宽度、设备方向等
CSS样式：在媒体查询条件满足时应用的样式

媒体类型和查询条件之间使用and连接，可以同时指定多个条件。可以根据需要使用不同的媒体类型和查询条件来定义不同的样式规则。

例如，下面是一个结合媒体类型和查询条件的示例：

@media screen and (max-width: 600px) {
  /* 在屏幕宽度小于600px时应用样式 */
}

@media print and (color) {
  /* 在打印时应用样式 */
}

16 雪碧图（sprite）

雪碧图（CSS Sprites）是一种将多个图像合并到一个图像文件中，然后通过CSS来控制显示不同部分的技术，可以减少页面加载时的HTTP请求数量，提高页面加载性能。

雪碧图的语法如下：

创建合并后的图像文件：
首先，将多个小图标或图片合并到一个大图像文件中，通常使用工具来自动完成这个过程。
在CSS中定义每个小图标的位置和大小：
使用background-image属性指定合并后的图像文件，使用background-position属性指定要显示的小图标在合并图像中的位置，使用width和height属性指定小图标的实际大小。

例如：
```
.icon1 {
  background-image: url('sprites.png');
  background-position: 0 0;
  width: 20px;
  height: 20px;
}

.icon2 {
  background-image: url('sprites.png');
  background-position: -20px 0;
  width: 30px;
  height: 30px;
}
```
在HTML中使用对应的类名来显示小图标：
在HTML元素中添加对应的类名，通过CSS样式将合并图像中的指定部分显示在页面上。

例如：
```
<div class="icon1"></div>
<div class="icon2"></div>
```

通过使用雪碧图，可以减少HTTP请求，提高页面加载速度，同时也可以优化页面性能和用户体验。

17 字体图标

字体图标（Font Icons）是一种使用字体文件来显示图标的技术，通过将图标设计为字体字符，可以通过CSS样式来控制图标的大小、颜色等属性，从而实现在网页中灵活显示图标。

使用字体图标的步骤如下：

引入字体图标库：
首先，需要引入包含字体图标的字体文件，通常是通过CSS链接引入。常见的字体图标库包括Font Awesome、Material Icons等。
使用字体图标：
在HTML中使用对应的类名来显示字体图标，通常是通过在元素中添加对应的类名来显示图标。

例如，使用Font Awesome库中的图标：
```
<i class="fas fa-heart"></i>
```
样式控制：
可以通过CSS样式来控制字体图标的大小、颜色、对齐方式等属性，例如：
```
.fa-heart {
  font-size: 24px;
  color: red;
}
```

通过使用字体图标，可以方便地在网页中添加各种图标，而无需使用图片文件，减少了页面加载时间，同时也可以轻松地在样式中控制图标的外观。

帘珑璇璇

关注

15
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
CSS基础

14 CSS3新属性CSS（层叠样式表）是一种用于定义网页样式和布局的语言。1 CSS的基本语法选择器：选择器用于选择要应用样式的HTML元素。常见的选择器包括标签选择器（如 p、h1、div）、类选择器（如 .classname）和ID选择器（如 #idname）。属性：属性定义了要应用的样式的具体设置，如颜色、字体大小、边框等。每个属性都有一个对应的值，如 color: red、font-size: 16px。声明块：属性和值一起组成了声明块，每个声明块用大括号{}包裹。
复制链接

扫一扫