CSS学习总结

最新推荐文章于 2023-06-25 00:35:48 发布

手可摘星辰c

最新推荐文章于 2023-06-25 00:35:48 发布

阅读量180

点赞数

文章标签： css 学习 css3

本文链接：https://blog.csdn.net/qq_40959458/article/details/125545040

版权

一、CSS简介

何为CSS？CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。
通俗来说，HTML是盖房子的，而CSS就是装修的，我们或多或少都在网上看过不少炫酷的网页，感觉非常高级，如何实现的？下面来进行CSS的简单学习。

二、CSS语法

一条CSS样式规则由两个主要的部分构成：选择器，以{ }包裹的一条或多条声明
其中声明又包括属性+值，属性就是你需要的样式的属性，值就是该属性对应的大小
除了元素选择器，还有id和class选择器
id选择器：适用范围只有一个元素

/* 注意：id选择器前有 # 号。 */
#sky{
  color: blue;
}

class选择器：元素的class值可以为多个

/* 注意：class选择器前有 . 号。 */
.center{
  text-align: center;
}
.large{
  font-size: 30px;
}
.red{
  color: red;
}

在这里插入图片描述
如图就是一个简单的class语句

三、CSS如何生效

方法一：外部样式表
直接在html文件的目录下新建文件，文件后缀为css，如下图所示

这样做的好处是结构比较清晰，多个页面一起用，查找起来也比较方便。
方法二：内部样式表
所谓内部就是将CSS语句与html混合在一起，浏览器也是能够进行识别的，如果网页的样式比较单一，CSS语句较少的时候为了方便，省力可以这样做，一般是不推荐这样的（我从来没有使用过）
示例如下：

 <!-- 注意下面这个语句，将导入外部的 mycss.css 样式表文件 -->
  <link rel="stylesheet" type="text/css" href="mycss.css">

方法三：内联样式
内联就更简单了，直接把样式规则写到元素里，但是比较死板，把内容与样式结合起来了，在实际运用当中更少见
示例如下：

 <h3 style="color:green;">I am a heading</h3>

级联优先级
假如三种级联方式都对某一个元素设置了不同样式，那么哪一个会生效了，这就引入了级联的优先级问题了。
级联的优先级如下：1.内联样式 2.内部样式表或外部样式表 3.浏览器缺省样式
其实原理就是哪一个样式的定义和元素接近就生效（就近原则）

四、外观设计

颜色
颜色一般可以采用颜色名称或使用颜色RGB16进制值，来设定前景或背景的颜色

 .box{
	height: 650px;
	background-repeat:x;
	font-size: 30px;
	color:#1CF01A;
	width:55%;
	margin: 2px 20% 0 20%;
	float:left;
}

在这里插入图片描述

尺寸
元素的大小尺寸一般就是用width和height设置，常用单位有px（像素）和%（百分比）

百分比表示：

.hezi{
			height:100%;
			width: 100%;
			margin-top:15;
		}

像素表示：

svg {
  position: absolute;
  z-index: 1;
  width: 681px;
  height: 384px;
}

对齐

五、盒子模型

盒子模型就是指html元素可以看做一个层层嵌套的盒子，像套娃一样，这个盒子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的，如下图所示：
在这里插入图片描述
Content 盒子的内容，如文本、图片等
Padding 填充，也叫内边距，即内容和边框之间的区域
Border 边框，默认不显示
Margin 外边距，边框以外与其它元素的区域‘

那么知道这个有什么用呢？我们在用width对元素尺寸进行设置时，其实只是对其内容尺寸进行了设置，如果你需要调整或修改该元素的位置时，可能就需要对其他的值进行设置
在这里插入图片描述

六、边框、边距

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

边框
其实就是为文字加上一个边框的特效效果如下
边距
设置边距对你的页面的排版和布局很重要

七、定位

position属性用于对元素进行定位。该属性有以下一些值：

static 静态：元素默认的定位方式
relative 相对：将元素相对于静态（默认）位置进行偏移
fixed 固定：使元素设置为固定不动，即始终显示在你浏览器的可视界面中
absolute 绝对：使元素相对于其设置了定位属性的父元素进行偏移，如果没有那就找到<body>
这个父元素进行偏移

八、溢出

当元素超出其指定范围后，对超出的部分通过溢出属性overflow属性来处理
溢出属性有下列值：
visible ：默认值，溢出部分不被裁剪，在区域外面显示
hidden ：裁剪溢出部分且不可见
scroll ：裁剪溢出部分，但提供上下和左右滚动条供显示
auto ：裁剪溢出部分，视情况提供滚动条

九、浮动

在一个区域或容器内，我们可以设置float属性让某元素水平方向上向左或右进行移动，其周围的元素也会重新排列

 .example-float-right {
      float: right;
    }

十、不透明度

我们可以用opacity对任何元素（不过常用于图片）设置不透明度。
值在[0.0～1.0]之间，值越低，透明度越高，
示例代码：在这里插入图片描述
效果展示：

十一、组合选择器

CSS的选择器种类有：元素选择器，id，class；但是我们能够将其进行组合

后代选择器
以空格作为分隔，如：.haha p 代表在div元素内有.haha这种类的所有元素
子选择器
也称为直接后代选择器，以>作为分隔，如：.haha > p 代表在有.haha类的元素内的直接
元素

十二、伪类和伪元素

伪类（pseudo-class）或伪元素（pseudo-element）用于定义元素的某种特定的状态或位置等。
当我们对页面有以下需求时：
鼠标移到某元素上变换背景颜色
超链接访问前后访问后样式不同
离开必须填写的输入框时出现红色的外框进行警示
保证段落的第一行加粗，其它正常
以及其他
就需要使用到
伪类/伪元素语法如下：

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

总结

通过对CSS的学习，我发现与HTML相比CSS是比较复杂的，而且内容比较多，在对网页设计时我们可能有许多不同的需求，以及要对页面进行相应的调整，这样对需要我们对CSS的语句语法有一定的理解和知道如何运用。CSS相当于房子的装修工作，如何将页面装饰好，其实就是看你CSS的技巧如何，如果想将你的页面设计得炫酷，样式多，用户体验好，CSS的学习是非常有必要的。