CSS学习笔记-CSDN博客

本文链接：https://blog.csdn.net/wlzany/article/details/115409556

本文详细介绍了CSS的基础知识，包括选择器、语法、生效方式、颜色尺寸设置、盒子模型、边框与边距、定位、浮动和不透明度。CSS通过分离内容与样式，简化了网页设计和维护。内容涵盖内部样式表、外部样式表和内联样式的使用，以及position属性的四种定位类型。此外，还讨论了浮动元素如何影响布局，以及如何使用opacity调整元素的透明度。

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

CSS学习笔记

一、CSS简介
二、CSS的语法
三、CSS生效方式
四、颜色尺寸等美化
五、盒子模型
六、边框及边距
七、定位
八、浮动
九、不透明度

一、CSS简介

CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。
它包含了如：整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等。
内容HTML和表现CSS的分离在代码的撰写与维护过程中，内容如果和修饰分离，便于维护。

二、CSS的语法

基本语法及解释
一条CSS样式规则由两个主要的部分构成：选择器，以{}包裹的一条或多条声明:

h1 {color:blue;front-size:12px}

h1是选择器
color；front-size：为属性
blue；12-px：值

这条规则表明，页面中所有的一级标题都显示为蓝色，字体大小为12像数。
选择器是您需要改变样式的对象（上图的规则就一级标题生效）。
每条声明由一个属性和一个值组成。（无论是一条或多条声明，都需要用{}包裹，且声明用;分割）
属性）是您希望设置的样式属性。每个属性有一个值。属性和值被冒号分开。
/*。。。。*/为注释，其注释跟C语言中的注释一样，不同于HTML的注释

对于color，可以如上面所示选取颜色，当然也可以通过RGB来组件自己的颜色比如#ffffff，没两位代表一个颜色
分别是红绿蓝，可以设置16进制rgb来给颜色
对于font-size：分为像素点大小和%大小，一般对我们来说采取百分比更好一点，方便我们对图片的整体浏览。
对于默认的像素点来说是16px

选择器
有两种id和class，一般来说class用得更多一点儿(我在这里调试了class选择器)
id选择器是以#开头

id选择器适用范围只有一个元素

class选择器是以.开头

/*线路规划与排队状态 */
.state{
    background: chocolate;
    color: cyan;

}
.line{
    background-color: crimson;
    color:gold;

}

上面的代码给了背景和字体颜色
如下所示的页面：

  <div class="state"><a href="#" target="_blank">各项目等待人数与等待时</a></div>
  <div class='line'><a href="#" target="_blank">路线规划</a></div>>

三、CSS生效方式

（1）插入样式表的方法有三种:外部样式表、内部样式表、内联样式。
（2）外部样式表说明：
页面使用标签链接到样式表。
在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观，使用较为广泛。
（3）内部样式表说明：
单个文档需要特殊的样式时，就应该使用内部样式表，即直接放在htnl文件中，一般情况不使用。
（4）内联样式说明：
直接把样式规则直接写到要应用的元素中。
（5）级联的优先级：内联样式>内部样式表或外部样式表>浏览器默认样式

四、颜色尺寸等美化

（1）文本或背景颜色：可以使用16进制值、RGB值或者名称表示。
（2）尺寸：用 height 和 width 设定元素内容占据的尺寸。常见的尺寸单位有：像数 px，百分比 %。
（3）对齐：元素中的文本，可以根据需求设置text-align属性为left, center, right。

五、盒子模型

盒子模型指的是一个 HTML 元素可以看作一个盒子。从内到外，这个盒子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的。
结构图：
在这里插入图片描述
说明：

Content 盒子的内容，如文本、图片等
Padding 填充，也叫内边距，即内容和边框之间的区域
Border 边框，默认不显示
Margin 外边距，边框以外与其它元素的区域

计算公式：
总宽度计算公式：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
总高度最终计算公式：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

六、边框及边距

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

.example-1 {
  border: 1px dotted black; /* 上下左右都相同 */
}
.example-2 {
  border-bottom: 1px solid blue; /* 只设置底部边框 */
}
.example-3 {
  border: 1px solid grey;
  border-radius: 15px; /* 边框圆角 */
}
.example-4 {
  border-left: 5px solid purple;
}

边距
下面样式说明了内边距的设置：

padding: 20px; /* 上下左右都相同 */
padding-top: 20px;
padding-bottom: 100px;
padding-right: 50px;
padding-left: 80px;
padding: 25px 50px 75px 100px; /* 简写形式，按上，右，下，左顺序设置 */
padding: 25px 10px; /* 简写形式，上下为25px，左右为10px */

注：CSS边框属性允许指定一个元素边框的样式和颜色。
在这里插入图片描述

七、定位

（1）position属性用于对元素进行定位：
static 静态
relative 相对
fixed 固定
absolute 绝对
（2）static：
设置为静态定位position: static;
按照元素在 HTML出现的先后顺序从上到下，从左到右进行元素的安排。
（3）relative：
设置为相对定位position: relative;
元素相对于他的静态（正常）位置进行偏移。
（4）fixed：
设置为固定定位position: fixed;
元素固定不动
（5）absolute：
设置为绝对定位position: absolute;
元素相对于其最近设置了定位属性（非static）的父元素进行偏移。

八、浮动

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
.thumbnail 
{
	float:left;
	width:110px;
	height:90px;
	margin:5px;
}
</style>
</head>

<body>
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
</body>
</html>