CSS总结

最新推荐文章于 2024-10-04 06:11:34 发布
最新推荐文章于 2024-10-04 06:11:34 发布
阅读量128 收藏
点赞数
文章标签： html css web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Tgmmmmmmmm/article/details/118016452
版权

CSS总结

CSS是级联样式表（Cascading Style Sheets）的缩写。

CSS的核心概念

css的核心概念是对html的元素进行装饰，即对同样的元素进行同样的装饰。

此处的装饰包括对页面的布局，元素的距离，大小，颜色，显示方式，透明度，倾斜等等

CSS语法

CSS的基础使用规则是由两个部分组成，即 对什么操作什么

或者用成体系一点的说法叫

选择器+{声明}

  • 选择器，即需要改变样式的对象
  • 声明是包含在大括号内的一条或多条属性：值,多条用；隔开

选择器

选择器也有所分类，id or class

id选择器id选择器前面有#号

#man{
	color:red;
}

这句话是指让id为man的元素变为红色

class选择器class选择器前有`.`号

.center{
	text-align:center;
}
.red{
	color:red;
}

示意，只要某元素的class符合条件，即执行装饰规则

CSS使用方法

外部样式表

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

在html文件中的<head>部分中进行导入，此处导入的链接在href后的mycss.css中，表示为使用与html同级目录下的mycss.css文件中的外部样式表进行html中元素的包装。

内部样式表

<style>
    h1 {
      color: red;
    }
    p {
      text-align: center;
    }
</style>

在html文件中的<head>部分中进行插入，此处利用<style>标签，将内部样式表插入在html中，使得对此html中的元素进行装饰。

内联样式

<h1 style="color:blue;">I am blue</h1>

内联样式比之前两种最不灵活，只针对具体某处进行样式制定，可复用性低下。

样式优先级

  1. 内联样式
  2. 内部样式表或外部样式表
  3. 浏览器缺省样式

颜色

颜色在网页中起到基垫作用，一个好的网页配色可以让网页变得高端大气上档次。

我们在给元素设置颜色时，可以使用

  1. 颜色名称
  2. 颜色RGB16进制
  3. 颜色RGBA（红绿蓝透明度）

以上三种方式来设置前景色或者背景色

<!-- 颜色名称 -->
<h3 style="background-color:gray">gray</h3>
<h3 style="background-color:green">green</h3>
<!-- 颜色值 #xx(red)xx(green)xx(blue)三个分量0~255 -->
<h3 style="background-color:#0000ff">#0000ff</h3>
<h3 style="background-color:#0099ff">#0000ff</h3>
<!-- RGBA -->
<h3 style="background-color:rgba(0,0,255,0.5)">rgba(0,0,255,0.5)</h3>
<h3 style="background-color:rgba(0,0,255,0.3)">rgba(0,0,255,0.3)</h3>
<!-- 加上文字颜色 -->
<!-- RGBA -->
<h3 style="background-color:rgba(20,255,20,0.3);color:rgba(255,255,255,0.9)">背景：rgba(20,255,20,0.3)<br>字：rgba(255,255,255,0.9)</h3>

在这里插入图片描述

尺寸

元素大小使用height和width分别设置元素的长和宽。

常用单位为px和百分比

例如：

<h3 style="background-color:rgba(0,0,255,0.5);width: 100%;
  height: 200px;text-align: center">rgba(0,0,255,0.5)</h3>
<h3 style="background-color:rgba(0,0,255,0.3); height: 100px;
  width: 500px;">rgba(0,0,255,0.3)</h3>

在这里插入图片描述

对齐

通常对不同方向的对齐采用不同方案

文本横对齐: text-align: center

left、center、right

盒子模型

html元素可以看作一个盒子，他的样式可以在各层进行加工，包括

  • Content 内容（文本、图片等）
  • Padding 内边距（内容与边框的距离）
  • Border 边框（默认无大小）
  • Margin 外边距（边框外到其他元素距离）

在这里插入图片描述

选择该元素真实占用的宽度为

左外边距 + 左边框宽度 + 左内边距 + 内容宽度 + 右内边距 + 右边框宽度 + 右外边距

故width属性设置宽度只修改了内容部分宽度

其中，padding和margin都是完全透明的没有背景颜色，

border可以增加颜色并改变其样式

边距与边框

无论边框、内边距还是外边距，它们都有上下左右四个方向。

所以设置上来说都可以使用

  • xxx-top
  • xxx-bottom
  • xxx-right
  • xxx-left

来对应设置其边距

同时，border还可以设置样式，包括其

  • 宽度
  • 线条样式
  • 颜色
<div style="border:5px dotted green;background-color:rgba(0,0,255,0.2);color:gray">边框</div>

在这里插入图片描述

定位

position用于对元素定位，它可以

  • static 静态
  • relative 相对
  • fixed 固定
  • absolute 绝对

static 静态

默认定位方式，先上后下，从左到右的方式排布出现的元素

relative 相对

这是对其原本静态位置偏移一部分

<div style="position: relative;
  left: 60px;
  top: 40px;
  background-color: rgb(173, 241, 241);">我偏移了正常显示的位置。去掉我的样式对比看看？</div>

在这里插入图片描述

fixed 固定

此处的固定指的是相对浏览器可以看见的部分，也就是说，会固定在某个位置，无论你怎么拖动滚动条

absolute 绝对定位

设置absolute属性后，该元素对最近的非static父元素偏移，最早可以追溯到<body>

<div style=" position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid rgb(87, 33, 173);">这是父元素，有 relative 定位属性
  <div style="position: absolute;
  top: 80px;
  right: 5px;
  width: 200px;
  height: 100px;
  border: 3px solid rgb(218, 73, 16);">
    这是子元素，有 absolute 定位属性
  </div>
</div>

<div style=" position: relative;
  width: 400px;
  height: 200px;
  left:100px;
  border: 3px solid rgb(87, 33, 173);">这是父元素，有 relative 定位属性
  <div style="position: absolute;
  top: 80px;
  right: 5px;
  width: 200px;
  height: 100px;
  border: 3px solid rgb(218, 73, 16);">
    这是子元素，有 absolute 定位属性
  </div>
</div>

在这里插入图片描述

溢出

当元素内容过多，所指定区域不够排布，通过overflow属性处理，其有以下属性：

  • visible 默认值，溢出部分不被裁剪，在区域外面显示
  • hidden 裁剪溢出部分且不可见
  • scroll 裁剪溢出部分，但提供上下和左右滚动条供显示
  • auto 裁剪溢出部分，视情况提供滚动条

同时我们还可以单独对上下或左右进行设置，即使用属性

overflow-y、overflow-x分别制定上下和左右的溢出处理

浮动

浮动即将一个元素进行偏好设置，希望他能够出现在哪里，将剩下的元素围绕着偏好的进行标准排布。

使用float属性来进行设置。例如 float:right;

不透明度

前面在颜色的地方使用了rgba来调颜色，其中a就是控制不透明的。

而对所有元素的透明度进行调节又专门的属性opacity

常用于图片，值在[0.0~1.0]之间，越低越透明

进阶——组合选择器

后代选择器

.tgm p {
      background-color: yellow;
    }

即以空格分隔的组合选择器，.tgm p代表在具有.tgm类的元素下的所有p都有此修饰。

子选择器

.tgm > p {
      background-color: yellow;
    }

也称为直接后代选择器，以>作为分隔，如：.tgm > p 代表在有.tgm类的元素内的直接<p>元素才有修饰。

并行选择器

此处不是组合选择器，只是当有多种类型或者多个类具有同样的属性，可以使用,分割，让多个类拥有同样的属性。

伪类和伪元素

主要是对元素变化的特定状态或位置进行操作，此处我们采用了老师的案例进行解释，笔者仅使用过链接访问前后样式改变。

比如某些情况：

  • 鼠标移到某元素上变换背景颜色
  • 超链接访问前后访问后样式不同
  • 离开必须填写的输入框时出现红色的外框进行警示
  • 保证段落的第一行加粗，其它正常
  • …

语法

/* 选择器后使用 : 号，再跟上某个伪类/伪元素 */
selector:pseudo-class/pseudo-element {
  property:value;
}

举例

a:link {color:#FF0000;}     /* 未访问的链接 */
a:visited {color:#00FF00;}  /* 已访问的链接 */
a:hover {color:#FF00FF;}    /* 鼠标划过链接 */
/* 鼠标移到段落则改变背景颜色 */
p:hover {background-color: rgb(226, 43, 144);}
p:first-line{color:blue;}   /* 段落的第一行显示蓝色 */
p:first-letter{font-size: xx-large;}   /* 段落的第一个字超大 */

h1:before { content:url(smiley.gif); } /* 在每个一级标题前插入该图片 */
h1:after { content:url(smiley.gif); } /* 在每个一级标题后插入该图片 */

在这里 before和after属性使用可能会有独特的效果。

Tgmmmmmmmm
关注
简单CSS 总结
孙叫兽的博客
07-23 916
目录 CSS 总结 你已经学习了CSS,下一步学习什么呢? CSS 总结 本教程已向你讲解了如何创建样式表来同时控制多重页面的样式和布局。 你已经学会如何使用 CSS 来添加背景、格式化文本、以及格式化边框，并定义元素的填充和边距。 同时，你也学会了如何定位元素、控制元素的可见性和尺寸、设置元素的形状、将一个元素置于另一个之后，以及向某些选择器添加特殊的效果，比如链接。 你已经学习了CSS,下一步学习什么呢? 下一步应该学习 JavaScript 。 JavaScript Java.
CSS知识点总结
weixin_48494427的博客
03-16 2220
CSS知识点总结
CSS 总结
weixin_56732056的博客
06-23 1277
一条CSS样式由选择器和两部分构成，在中包含了一条或多条声明。 内联样式 级联的优先级 CSS 基础知识总结 颜色，尺寸，对齐 颜色 尺寸 对齐 盒子模型 边框和边距 边框 边距 定位 static 静态 relative 相对 fixed 固定 absolute 绝对 溢出 浮动 不透明度 组合选择器 后代选择器 子选择器 伪类和伪元素 语法： 常用的伪类/伪元素的简单使用：...
CSS基础知识总结
Lotus_fragrance的博客
04-29 4058
一、基础认识 css的中文又叫做：层叠样式表。 语法：选择器 + {属性名： 属性值}、 css引入方式：1.内嵌式，写在style标签中。通常放在head中。2.行内式：写在style标签中，写在标签中。3.外联式：单独写一个css文件，通过link把该文件引入。 二、选择器 选择器 在html中写法 在css中写法 标签选择器 就是标签本身 div{ } 类选择器 class= "banner" .banner { }.
CSS基础 知识点总结
星星之火的语言c学习
08-18 2820
① CSS指的是层叠样式表，用来控制网页外观的一门技术② CSS发展至今，经历过CSS1.0 CSS2.0 CSS2.1 CSS3.0这几个版本，CSS3.0是CSS最新版本① 选择器就是选中你想要的元素，就是指用一种方式把你想要的那个元素选中，只有把这个元素选中，你才能为它添加样式② 五种常用的选择器元素选择器id选择器class选择器后代选择器群组选择器③ 语法选择器属性1：取值1；属性2: 取值2；...属性n: 属性n;① 元素选择器。
CSS知识总结
m0_63600776的博客
01-23 2428
CSS基础知识总结CSS引入方式选择器 CSS引入方式 一、内嵌式：CSS写在style标签中 作用范围：当前页面 使用场景：小案例 二、外联式：CSS写在单独的CSS文件中,通过link标签引入 作用范围：多个页面 使用场景：项目中 三、行内式：CSS写在标签的style属性中 作用范围：当前标签 使用场景：配合js使用 选择器 一、标签选择器 结构：标签名(css属性名：属性值) 作用：通过标签名，找到页面中所有这类标签，设置样式 注意点： 1、标签选择器选择的是一类标签，而不是单独的某一个 2、标签选
CSS总结——瀑布流布局
热门推荐
qq_53008257的博客
05-07 4万+
瀑布流布局 瀑布流布局是一种新型的布局方式，可以将大小不一的图片完整的显示在页面上，并且在杂乱的布局中保持着一定的美感，今天学习了一下如何使用瀑布流布局，总结了有以下三种方式。（瀑布流还可以使用grid布局实现，还没有学习过这种方式） 瀑布流的实现方法可以用纯CSS，也可以用JS实现，如何选取决于需求,这几种方法各有优略，如何选取取决于需求。以下案例均采用如下的html代码 <div class="container" id="con"> <div class="item
css总结
技术点滴记录
09-27 1370
一、概括、 1.1、CSS(Cascading Style Sheets)层叠样式表，起到描述web文档格式的作用，有了CSS就可以把web文档的内容和样式分开，有利于web内容的检索等处理。 1.2、CSS有可能存在于web文档的内部和外部，优先级如下： 内联CSS  >
HTML和CSS总结
m0_46275263的博客
06-15 3313
前端三剑客之二：HTML和CSS的初步了解
HTML+CSS总结.doc
11-17
"HTML+CSS总结" HTML（HyperText Mark-up Language）是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML 文本是由 HTML 命令组成的描述性文本，HTML 命令可以说明文字、图形、动画、声音、表格、...
css总结1
08-03
在“css总结1”中，我们探讨了几种引入CSS样式的方法以及一些基本的CSS属性。 首先，让我们来看一下CSS样式的组成。一个CSS规则通常由两部分构成：选择器和声明。选择器指向你想要应用样式的HTML元素，如`h3`或`p`...
css-common:常用的css总结
03-22
常用的css总结 CSS整块文本溢出省略方案 < style > .wrap { width : 200 px ; white - space : normal ; overflow : hidden ; text - overflow : ellipsis ; display : - webkit - box ; - webkit - ...
关于图片显示问题的CSS总结
04-08
本文将基于“关于图片显示问题的CSS总结”这一主题，深入探讨CSS在处理图片显示时的关键知识点，以帮助开发者更好地理解和解决图片相关的问题。 首先，我们来看CSS中的`background-image`属性，它用于设置元素的...
html中的文本标签(含标签的实现案例)
2301_76862031的博客
10-01 902
html中常用的标签h,p,hn,hr,br,font,time,mark,cite,特殊字符标签，图像标签
复习HTML(基础）
m0_74124657的博客
10-01 1134
目录HTML含义 HTML作用HTML的常用元素元素的特点元素的分类1 是否嵌套关系2 是否独占一行块元素：独占一行 行内元素：共享一行 行内元素与块级元素的转换3是否有结束标签 常用标签1 标题标签：有六级 我们用h1 ~h6 表示2 段落标签：内容3 图像标签:< img src=" 图片路径" > 是为了添加图片使用的4 视频标签： 添加视频使用5 列表5.1 无序列表5.2 有序列表6 超链接 ： 内容 1 访问同目录下的网页2 访问外部 网页3 访问本地网页7 标签 ， 8 表
【前端开发入门】html快速入门
qbbmnnnnnn的博客
09-29 1162
本篇介绍html的相关内容，包含文档流的概念以及块级元素和行内元素等。同时强调了有关代码编写习惯性问题。
XHTML 简介
最新发布
wjs2024的博客
10-04 364
XHTML作为一种严格的、基于XML的标记语言，为网页设计和开发提供了良好的可读性、可维护性和扩展性。尽管HTML5已成为当前主流的网页标记语言，但XHTML在特定领域仍然具有广泛的应用价值。
HTML+CSS基础总结与特性解析
CSS则用于布局和美化，如设置元素的边距、浮动等，使网页具有更好的视觉效果。" HTML是一种标记语言，其主要功能是定义网页的结构和内容。HTML文本由一系列的HTML命令组成，这些命令描述了页面上的各种元素，例如...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值