CSS学习总结

最新推荐文章于 2024-08-24 11:15:50 发布

钟离轩痕

最新推荐文章于 2024-08-24 11:15:50 发布

阅读量119

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/f974453900/article/details/115917170

版权

一、CSS简介

什么是CSS
CSS是级联样式表（Cascading Style Sheets）的缩写。HTML决定了网页显示的内容，而CSS能决定内容显示的样式，比如元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等。

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个

二、CSS语法

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

选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
CSS声明总是以分号(;)结束，声明总以大括号({})括起来:
例：p { color:red; text-align:center; }

CSS注释

CSS注释以 /* 开始, 以 */ 结束, 实例如下:

/* 这是CSS的注释 */
/* 建议每条申明占一行 */
p{
  color:red; /*文本颜色：红色*/
  text-align:center;  /* 文本居中 */
}

选择器

id选择器

已知HTML元素有id属性，CSS能为指定id的元素设置特点的样式，如下例：

#para1
{
    text-align:center;
    color:red;
}

该样式将应用于id为”paral“的元素指定样式，该样式会显示为红色并文本居中。

ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
id选择器的id前一定要有#

tips：HTML中元素的id必须唯一，所以id选择器适用范围只有一个元素

class选择器

id选择器只适用于一个元素，效率很低。但class选择器能将同一类的元素指定同样的样式，于是同样的样式能适用于多个元素。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：

.center {text-align:center;}

如该例将作用于 class=”center"的元素

你也可以指定特定的HTML元素使用class。
在以下实例中, 所有的 p 元素使用 class=“center” 让该元素的文本居中:

p.center {text-align:center;}

三、CSS创建

如何让插入样式表使其生效？
我们一般有三种方法插入样式表：

外部样式表(External style sheet)
内部样式表(Internal style sheet)
内联样式(Inline style)

1.外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部：
建立一个HTML文档：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <!-- 注意下面这个语句，将导入外部的 mycss.css 样式表文件 -->
  <link rel="stylesheet" type="text/css" href="mycss.css">
  <title>页面标题</title>
</head>
<body>
  <h1>我是有样式的</h1>
  <hr>
  <p class="haha">还是有点丑：)</p>
</body>
</html>

浏览器会从文件 mycss.css 中读到样式声明，并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。
样式表应该以 .css 扩展名进行保存
在同一目录新建一个样式表文件mycss.css（注意后缀名为css）如下：

body {
  background-color: linen;
  text-align: center;
}
h1 {
  color: red;
}
.haha {
  margin-top: 100px;
  color: chocolate;
  font-size: 50px;
}

2.内部样式表

我们也可以将样式放在 HTML 文件中，这称为内部样式表。
如下：将样式放入<head>中的<style>标签中

<html>
<head>
 <meta charset="utf-8">
 <!-- 注意下面这个语句，将导入外部的 mycss.css 样式表文件 -->
 <link rel="stylesheet" type="text/css" href="mycss.css">
 <title>页面标题</title>
 <style>
   body {
     background-color: linen;
     text-align: center;
   }
   h1 {
     color: red;
   }
   .haha {
     margin-top: 100px;
     color: chocolate;
     font-size: 50px;
   }
 </style>
</head>
<body>
 <h1>我是有样式的</h1>
 <hr>
 <p class="haha">还是有点丑：)</p>
</body>
</html>

3.内联样式

内联样式，就是直接把样式规则直接写到要应用的元素中，如：
<h3 style="color:green;">I am a heading</h3>

提示：当三种方式同时使用时，他们的优先级是：
内联>内部>外部>浏览器缺省样式

四、盒子模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。从内到外，这个盒子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的，如下图所示：
在这里插入图片描述

不同部分的说明：

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

五、边框与边距

边框

CSS边框属性允许你指定一个元素边框的样式和颜色。比如边框是否显示、圆角、直角，颜色和宽度等。
border-style属性用来定义边框的样式

border-style 有下列取值:

none: 默认无边框
dotted: 定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框
double:定义两个边框。两个边框的宽度和
border-width 的值相同
groove: 定义3D沟槽边框。效果取决于边框的颜色值
ridge: 定义3D脊边框。效果取决于边框的颜色值
inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
outset:定义一个3D突出边框。效果取决于边框的颜色值

边距

CSS margin(外边距)属性定义元素周围的空间。
margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。
margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。

Margin - 单边外边距属性
在CSS中，它可以指定不同的侧面不同的边距：

margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

上述代码分别指定了边距四个方向的大小

六、定位

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

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

设置了元素的position属性后，我们才能使用top, bottom, left, right属性，否则定位无效。

static 定位

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
静态定位的元素不会受到 top, bottom, left, right影响。

relative 相对

相对定位元素的定位是相对其正常位置。
设置为相对定位position: relative;，这将把元素相对于他的静态（正常）位置进行偏移
例：

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

移动相对定位元素，但它原本所占的空间不会改变。
相对定位元素经常被用来作为绝对定位元素的容器块。

fixed 固定

元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动，此时元素固定的位置仍由top, bottom, left, right属性确定，但相对的是视口（viewport，就是浏览器的屏幕可见区域）
如下的代码将会在浏览器右下角固定放置一个按钮元素：

<!-- HTML -->
<div class="broad">占位区域。请将浏览器窗口改变大小，看看右下角的按钮发生了什么？</div>
<div class="example-fixed">这个按钮是固定的</div>
<!-- CSS -->
.example-fixed {
  position: fixed;
  bottom: 40px;
  right: 10px;
  padding: 6px 24px;
  border-radius: 4px;
  color: #fff;
  background-color: #9d0f0f;
  cursor: pointer;
  box-shadow: 0 3px 3px 0 rgba(0,0,0,0.3), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
}
.broad {
  height: 5000px;
  width: 5000px;
  padding: 20px;
  background-color: darkkhaki;
}

absolute 绝对

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于:

h2
{
    position:absolute;
    left:100px;
    top:150px;
}

七、溢出

当元素内容超过其指定的区域时，我们通过溢出overflow属性来处理这些溢出的部分。
溢出属性有一下几个值：

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

八、Float(浮动)

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

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
如果图像是右浮动，下面的文本流将环绕在它左边：

img{	float:right;	}

如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。

清除浮动
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。
clear 属性指定元素两侧不能出现浮动元素。

九、（不）透明度

我们可以用opacity对任何元素（不过常用于图片）设置不透明度。
值在[0.0～1.0]之间，值越低，透明度越高。
例如：

<img class="opacity-2" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(87).jpg">
<img class="opacity-5" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(87).jpg">
<img class="opacity-10" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(87).jpg">

同一图片将会如下不同透明度显示
在这里插入图片描述

十、组合选择器

前面我们学习了 CSS有三种选择器：元素、id 和 class 。但我们也可以进行组合，以得到简洁精确的选择。

后代选择器

以空格作为分隔，后代选择器用于选取某元素的后代元素。
以下实例选取所有 <p> 元素插入到 <div> 元素中:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
div p
{
	background-color:gray;
}
</style>
</head>
<body>
<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div>
<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>
</body>
</html>

在这里插入图片描述

子选择器

也称为直接后代选择器，以>作为分隔，与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素直接/一级子元素的元素。
以下实例选择了<div>元素中所有直接子元素 <p> ：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
div>p
{
	background-color:yellow;
}
</style>
</head>

<body>
<h1>Welcome to My Homepage</h1>
<div>
<h2>My name is Donald</h2>
<p>I live in Duckburg.</p>
</div>

<div>
<span><p>I will not be styled.</p></span>
</div>

<p>My best friend is Mickey.</p>
</body>
</html>

在这里插入图片描述

十一、伪类和伪元素

伪类（pseudo-class）或伪元素（pseudo-element）用于定义元素的某种特定的状态或位置等。

伪类

CSS伪类是用来添加一些选择器的特殊效果。
语法
伪类的语法：
selector:pseudo-class {property:value;}
CSS类也可以使用伪类：
selector.class:pseudo-class {property:value;}

伪元素

CSS伪元素是用来添加一些选择器的特殊效果。
语法
伪元素的语法：
selector:pseudo-element {property:value;}
CSS类也可以使用伪元素：
selector.class:pseudo-element {property:value;}

一些伪类和伪元素的应用：

a:link {color:#FF0000;}     /* 未访问的链接显示为FF0000色 */  
a:visited {color:#00FF00;}  /* 已访问的链接先显示为00FF00色 */
a:hover {color:#FF00FF;}    /* 鼠标划过链接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); } /* 在每个一级标题后插入该图片 */

参考资料：
https://qige.io/
https://www.runoob.com/

钟离轩痕

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习总结

CSS学习总结一、CSS简介二、CSS语法CSS注释选择器id选择器class选择器三、CSS创建1.外部样式表一、CSS简介什么是CSSCSS是级联样式表（Cascading Style Sheets）的缩写。HTML决定了网页显示的内容，而CSS能决定内容显示的样式，比如元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等。CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中
复制链接

扫一扫