当前位置: 首页 > news >正文

web前端之CSS

文章目录

  • 一、CSS简介
      • 1.1 CSS语法规则
  • 二、CSS的引用方法
    • 2.1 定义行内样式表
    • 2.2定义内部样式表
    • 2.3链入外部样式表
    • 2.4导入外部样式表
  • 三、CSS选择符
    • 3.1 基本选择符
      • 3.1.1 标签选择符
      • 3.1.2 class类选择符
      • 3.1.3 id选择符
    • 3.2 复合选择符
      • 3.2.1 交集选择符(合并选择器)
      • 3.2.2 并集选择符
      • 3.2.3 后代选择符
    • 3.3 通配符选择符
    • 3.4 特殊选择符
      • 3.4.1伪类选择符
      • 3.4.2 伪元素
    • 3.5 选择器的优先级
  • 四、CSS属性单位
    • 4.1 字体属性
      • 4.1.1 color
      • 4.1.2 font-size
      • 4.1.3 font-weight (设置文本粗细)
      • 4.1.4 font-style(指定文本字体样式)
      • 4.1.5 font-family(指定一个元素的字体)
    • 4.2 背景属性
      • 4.2.1 background-color(设置背景颜色)
      • 4.2.2 background-image(设置背景图片)
      • 4.2.3 background-repeat(设置如何平铺背景图像)
      • 4.2.4 background-size(设置背景图像大小)
      • 4.2.5 background-position(设置背景图像起始位置,默认值0% 0%)
    • 4.3 文本属性
      • 4.3.1 text-align(指定元素对齐方式)
      • 4.3.2 text-decoration(添加文本的修饰)
      • 4.3.3 text-transform(控制文本的大小写)
      • 4.3.4 text-indent(规定文本块中首行文本的缩进)
    • 4.4 表格属性
      • 4.4.1 border(表格边框)
      • 4.4.2 border-collapse(折叠边框)
      • 4.4.3 text-align(表格文字对齐)
      • 4.4.4 表格填充
      • 4.4.5 表格颜色
  • 五、CSS盒子模型
    • 5.1 盒子模型
    • 5.2 弹性盒子模型
      • 5.2.1 flex-direction属性
      • 5.2.2 justify-content(内容对齐)
      • 5.2.3 align-items 对齐方式
  • 六、浮动
  • 七、定位及CSS新特性
    • 7.1 relative(相对定位)
    • 7.2 absolute(绝对定位)
    • 7.3 fixed(固定定位)
    • 7.4 z-index(设置元素堆叠顺序)
    • 7.5 border-radius(圆角)
    • 7.6 shadow(阴影)
  • 八、动画
    • 8.1 @keyframes创建动画
    • 8.2 animation执行动画
  • 九、媒体查询
    • 9.1 meta标签
  • 十、雪碧图


一、CSS简介

CSS,层叠样式表单,又称级联样式表,简称样式表,用于html文档中元素样式的定义。
CSS文件后缀名.css
注释:/* …*/

1.1 CSS语法规则

主要由2个部分构成,选择器以及一条或多条声明。
在这里插入图片描述
每条声明由一个属性或一个值组成。
属性是希望设置的样式属性,每个属性有一个值,属性和值被冒号分开。

<style>h1{color: blue;font-size:12px;}
</style>

以上代码中,h1是选择器,表明选择的元素。

二、CSS的引用方法

2.1 定义行内样式表

定义行内样式就是通过直接设置各个元素的style属性,从而达到设置样式的目的。需要在相关标签内使用style属性,style属性可以包含任何css属性。

<body><p style="font-size:18px;color:red">此行文字被style定义为红色显示</p><p>此行文字没有被style属性定义</p>
</body>

2.2定义内部样式表

指的是样式表的定义处于html文件一个单独的区域,若单个文档需要特殊的样式时,就应该使用内部样式表,可以用《style》标签定义在文档的头部。
注意:内部样式表处于页面的《head》《/head》之间

<head><style>p{color:red;font-size:18px;}</style>
</head>
<body><p >此行文字被style定义为红色显示</p><p>此行文字被style属性定义</p>
</body>

2.3链入外部样式表

外部样式表通过在某个html页面中添加链接的方式生效。
外部样式表把声明的样式放在样式文件中,页面需要修改样式时,通过link标签链接外部样式表文件。

<link rel="stylesheet" type="text/css" href="xxx.css">

样式表文件的格式
样式表文件的内容是定义的样式表,不包含html标签。

2.4导入外部样式表

指在内部样式表的

<style type="text/css">
<!--@import url("外部样式表的文件名1.css");
-->
</style>

链入外样式表与导入外部样式表的本质区别:

导入方式实在浏览器下载HTML文件时将样式表文件的全部内容复制到@import关键字位置,以替换该关键字。
链入方式尽在HTML文件需要引用CSS样式文件中的某个样式时,浏览器才链接样式表文件读取需要的内容,但是并不进行替换。

三、CSS选择符

3.1 基本选择符

3.1.1 标签选择符

以文档对象模型作为选择符,即选择某个html标签为对象,设置其样式规则,所有的标签都可以作为选择符,样式如下:

E{/*CSS代码*/
}

E表示网页元素。
具体例子:

body{font-size:13px;}
div{border:3px double #f00;width:300px;}

3.1.2 class类选择符

class类选择符的名称可以由用户自定义,使用时必须使用英文.(点)进行标识。

.blue{color: #00f;
}
p{border:2px dashed #f00;width:28px;
}

应用class类选择符的代码如下:

<h3 class="blue">标题可以应用样式,蓝色</h3>
<p class="blue">段落可以应用样式,蓝色</h3>

同一个标签可以使用多个类选择器,用空格隔开,代码如下:

<h3 class="content size"> 这是一个标题</h3>

3.1.3 id选择符

针对某一个特定标签,一次只能使用一次。
css中定义id选择符时要在id名称前加上一个#号。

#id 是定义的id选择符名称,该选择符名称在一个文档中是唯一的,不能以数字开头,只对页面中唯一元素进行样式定义。

#top{line-height:20px;font-size:24px;color: #f00;
}

应用id选择符的代码如下:

<div id="top">尝试一下</div>

3.2 复合选择符

3.2.1 交集选择符(合并选择器)

由两个选择符直接连接构成,其结果是选中两者各自元素范围的交集。第一个选择符必须是标签选择符,第二个选择符必须是class类选择符或id选择符。

.p,.class {Color:red;font-size:16px;}

p是标签,class是类选择符。

3.2.2 并集选择符

同时选中各个基本选择符所选择的范围,任何形式的基本选择符都可以作为并集选择符的一部分。

h1 span {Color:red;font-size:16px;}

h1 和 span均为标签

3.2.3 后代选择符

选择所有被h1元素包含的span元素,中间用空格隔开

h1 span {Color:red;font-size:16px;}

外层标签是h1,内层标签是span,span标签成为h1标签的后代。

3.3 通配符选择符

*表示定义所有元素的样式
格式如下:

*{CSS代码}

例如:

*{	/*    *表示全局变量     */margin:1px;	/*外边距设置为1*/padding:2px; /*内边距设置为2*/
}

3.4 特殊选择符

3.4.1伪类选择符

a:link{color:#ff0000;}	/*未访问的超链接状态*/
a:visited{color:#00ff00;} /*已访问链接状态*/
a:hover{color:#ff00ff;} /*鼠标悬停在超链接上的状态*/
a:active{color:#0000ff;} /*被激活的超链接状态*/

注意要把active样式写到hover样式后面,否则active样式是不生效的。

3.4.2 伪元素

语法格式:

选择符:伪元素{属性:属性值}
  • :first-letter 将特殊样式添加到文本的首字母
  • :first-line 将特殊样式添加到文本的首行
  • :before 在某元素之前插入内容
  • :after 在某元素之后插入内容

3.5 选择器的优先级

CSS中,权重用数字衡量。

优先级从高到低:行内样式1000>ID选择器100>类选择器10>元素选择器1

四、CSS属性单位

4.1 字体属性

4.1.1 color

<p>学习字体属性</p>
p{ color: red;		/*红色*/}
p{ color: #ff0000;	/*红色*/}
p{ color: rgb(0,0,0);  /*黑色*/}

4.1.2 font-size

<p>学习字体属性</p>
p{font-size:14px; }

4.1.3 font-weight (设置文本粗细)

在这里插入图片描述

4.1.4 font-style(指定文本字体样式)

在这里插入图片描述

4.1.5 font-family(指定一个元素的字体)

每个值用逗号分开
如果字体包含空格,它必须加上引号。

font-family:"Simsun","SimHei";

4.2 背景属性

4.2.1 background-color(设置背景颜色)

.box1{width:400px;height:400px;background-color:#f00000;}

4.2.2 background-image(设置背景图片)

.box1{width:400px;height:400px;background-image: url(路径);}

4.2.3 background-repeat(设置如何平铺背景图像)

在这里插入图片描述

.box1{width:400px;height:400px;background-image: url(路径);background-repeat: repeat-y;}

4.2.4 background-size(设置背景图像大小)

在这里插入图片描述

.box1{width:400px;height:400px;background-image: url(路径);background-repeat: repeat-y;background-size: 100% 100%;}

4.2.5 background-position(设置背景图像起始位置,默认值0% 0%)

在这里插入图片描述

4.3 文本属性

4.3.1 text-align(指定元素对齐方式)

在这里插入图片描述

h1 {text-align: left;}

4.3.2 text-decoration(添加文本的修饰)

text-decoration

h1{text-decoration:overline;}

4.3.3 text-transform(控制文本的大小写)

在这里插入图片描述

h1{text-transform:uppercase;}

4.3.4 text-indent(规定文本块中首行文本的缩进)

p{text-indent:50px;
}

4.4 表格属性

4.4.1 border(表格边框)

table,td{border:1px solid black;}

4.4.2 border-collapse(折叠边框)

设置表格的边框是否被折叠成一个单一的边框或隔开

table{border-collapse:collapse;}

4.4.3 text-align(表格文字对齐)

设置水平对齐方式,向左、右、中心

td{text-align:right;}

设置垂直对齐属性

td{height:50px;vertial-align:bottom;}

4.4.4 表格填充

如果在表的内容中控制空格之间的边框,应使用td和th元素的填充属性

td{padding:15px;}

4.4.5 表格颜色

下面指定边框的颜色和th元素的文本和颜色

table,td,th{ border:1px solid green;}
td{background-color:green;color:white;}

五、CSS盒子模型

5.1 盒子模型

概念
所有html元素可以看作盒子,css盒子模型本质上是一个盒子,封装周围的html元素,它包括外边距(margin),边框(border),内边距(padding),实际内容(content)。
在这里插入图片描述

  • Margin(外边距)- 清除边框外的区域,外边距是透明的,第一个值代表上下,第二个值代表左右
  • Border(边框)-围绕在内边距和内容外的边框
  • Padding(内边距)- 清除内容周围的区域,第一个值代表上下,第二个值代表左右
  • Content(内容)-盒子的内容,显示文本和图像

5.2 弹性盒子模型

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成.
弹性容器通过设置 display 属性的值为 flex 将其定义为弹性容器
弹性容器内包含了一个或多个弹性子元素

5.2.1 flex-direction属性

定义:指定了弹性子元素在父容器中的位置
语法:

flex-direction:row;
  • row:横向从左到右排列左对产)默认的排列方式
  • row-reverse:反转横向排列(右对齐,从后往前排,最后一项排在最前面
  • column:纵向排列
  • column-reverse:反转纵向排列,从后往前排,最后一项排在最上面

5.2.2 justify-content(内容对齐)

  • flex-stat 弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线,而后续弹性项依次平齐摆放
  • flex-end 弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线,而后续弹性项依次平产摆放
  • center弹性项目居中紧挨着填充(如果剩余的自由空间是负的,则弹性项目将在两个方向上同时溢出)

5.2.3 align-items 对齐方式

在这里插入图片描述

六、浮动

float属性定义元素在哪儿个方向浮动,任何元素都可以浮动。
在这里插入图片描述
浮动的原理:

  • 浮动以后使元素脱离了文档流
  • 浮动只有左右浮动,没有上下浮动
    元素向左浮动
    在这里插入图片描述
    元素向右浮动
    在这里插入图片描述
    当容器不足时
    在这里插入图片描述

七、定位及CSS新特性

7.1 relative(相对定位)

不脱离文档流

<div class="box"></div>
.box{width:100px;height:100px;background-color:red;position:relative;left:100px;}

7.2 absolute(绝对定位)

脱离文档流

<div class="box1"></div>
<div class="box2"></div>
.box1{width:100px;height:100px;background-color:red;position:absolute;left:100px;}
.box2{width:200px;height:200px;background-color:red;}

7.3 fixed(固定定位)

脱离文档流

<div class="box"></div>
.box{width:100px;height:100px;background-color:red;position:fixed;left:100px;}

7.4 z-index(设置元素堆叠顺序)

<div class="box1"></div>
<div class="box2"></div>
.box1{width:100px;height:100px;background-color:red;position:absolute;left:100px;z-index:100;}
.box2{width:200px;height:200px;background-color:red;z-index:10;}

7.5 border-radius(圆角)

<div class="box"></div>
.box{width:100px;height:100px;background-color:red;border-radius:10px;}

使用规则:
在这里插入图片描述

7.6 shadow(阴影)

box-shadow:h-shadow或v-shadow或blur或color;

在这里插入图片描述

八、动画

8.1 @keyframes创建动画

@keyframes name{from|0%{CSS样式}percent{CSS样式}to|100%{CSS样式}}

name:为动画名称,开发人员自己命名
percent:为百分比值,可以添加多个百分比值
例如:在这里插入图片描述

8.2 animation执行动画

animation: name duration timing-function delay iteration-count direction;

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
切换背景颜色

<div class="animation"></div>
.animation{width:100px;height:100px;background-color:red;animation:anima 5s linear 5s infinite;}
.animation:hover{animation-play-state:paused;}
@keyframes anima{0%{background-color:red;}50%{background-color:green;}100%{background-color:blueviolet;}}

九、媒体查询

9.1 meta标签

使用设备的宽度作为视图宽度并禁止初始的缩放,在标签里加入这个meta标签。

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

加入以上代码就会按设置的宽度不变,如果不加则会按比例缩放。
参数解释

在这里插入图片描述

十、雪碧图

CSS Sprite也叫CSS精灵图,CSS雪碧图,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一个大图中去。
优点

  • 减少图片的字节
  • 减少网页的http请求,从而大大提高页面的性能

原理

  • 通过background-image引入背景图片
  • 通过background-position把背景图片移动到自己需要的位置
http://www.lryc.cn/news/112416.html

相关文章:

  • HarmonyOS元服务开发实践:桌面卡片字典
  • xLua学习
  • ​Web3到底是个啥?
  • pycharm、idea、golang等JetBrains其他IDE修改行分隔符(换行符)
  • ThinkPHP函数深度解析
  • 【java】【maven】【高级】MAVEN聚合继承属性等
  • LeetCode150道面试经典题-合并两个有序数组(简单)
  • 记录 运维三剑客一件部署的的docker-compose,yml文件
  • Xposed框架开发
  • 2.13 Android ebpf非网络相关帮助函数API汇总(十二 本章完)
  • 关于游戏的笔记
  • vue diff 前后缀+最长递增子序列算法
  • 【Python】Locust持续优化:InfluxDB与Grafana实现数据持久化与可视化分析
  • 数组模拟循环链表
  • 第三章 图论 No.5最小生成树之虚拟源点,完全图与次小生成树
  • RESTful API的讲解以及用PHP实现RESTful API
  • Spring中@Component和@Bean的区别
  • 【问题解决】mysql 数据库字符串分割之后多行输出方法
  • flutter开发实战-时间显示刚刚几分钟前几小时前
  • 导出LLaMA等LLM模型为onnx
  • 回顾 OWASP 机器学习十大风险
  • ENSP软件的基本使用命令(第三十一课)
  • 五、FreeRTOS数据类型和编程规范
  • 码出高效_第二章 | 面向对象_上
  • 大学生课设实训|基于springboot的在线拍卖系统
  • 论文阅读 - Social bot detection in the age of ChatGPT: Challenges and opportunities
  • FPGA优质开源项目 - UDP RGMII千兆以太网
  • 学C的第三十二天【动态内存管理】
  • 聊聊elasticsearch的data-streams
  • unreal engine c++ 创建tcp server, tcp client