【web学习2】CSS学习-CSDN博客

本文链接：https://blog.csdn.net/qq_46467126/article/details/125215581

一、什么是CSS

1、CSS简介

CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。
网页的内容是由 HTML的元素构建的，这些元素如何呈现，涉及许多方面，如整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等。

2、CSS实例

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明；
CSS声明总是以分号 ; 结束，声明总以大括号 {} 括起来；
CSS注释以 /* 开始, 以 */ 结束；
属性是我们希望设置的样式属性。每个属性有一个值。属性和值被冒号分开。

在这里插入图片描述
这条规则表明，页面中所有的一级标题都显示为蓝色，字体大小为12像素。

二、选择器

一个界面上元素众多，选择器用于在页面上找到/选择需要应用这个样式的对象。
CSS有三种选择器：元素选择器、id选择器、class选择器

1、元素选择器

最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。
如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：

html {color:black;} 
h1 {color:blue;} 
h2 {color:silver;}

可以将某个样式从一个元素切换到另一个元素。
假设你想将上面的段落文本（而不是 h1 元素）设置为灰色。只需要把 h1 选择器改为 p，如下：

html {color:black;} 
p {color:gray;}
h2 {color:silver;}

2、id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。

注意：ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

#para1 应用于元素属性id="para1"
{
    text-align:center;
    color:red;
}

3、class选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示。

.center {text-align:center;}
# 所有拥有 center 类的 HTML 元素均为居中

三、CSS如何生效

1、外部样式表

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

外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。

如：新建一个mystyle.css的样式表文件

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

若想应用于HTML文件中，则可以在HTML文件<head>中，导入该样式表文件

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

2、内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

3、内联样式

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。

要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。

改变段落的颜色和左外边距：

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

注：内联样式是最不灵活的一种方式，完全将内容和样式合在一起，实际应用中非常少见。

4、级联的优先级

样式的优先级问题，从高到低分别是：

内联样式
内部样式表
外部样式表
浏览器缺省样式
哪个样式定义离元素的距离近，哪个就生效

四、CSS更美观的一些内容

1、颜色

CSS中，颜色值通常以以下方式定义:

十六进制 - 如：“#ff0000”
RGB - 如：“rgb(255,0,0)”
颜色名称 - 如：“red”

举个例子：

h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}

网页选用一种耐看、易用、符合心意的配色是不容易的，尤其在没有专业设计师时。幸好，即使没有美学基础，但有一些已经调配好的配色方案我们可以直接使用。可以利用ColorDrop 网站挑选配色。

2、尺寸

CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。

属性	描述
height	设置元素的高度
line-height	设置的行高
max-height	设置元素的最大高度
max-width	设置元素的最大宽度
min-height	设置元素的最小高度
min-width	设置元素的最小宽度
width	设置元素的宽度

3、字体

font-family 属性设置文本的字体系列

这个属性有三个值：

正常 - 正常显示文本 {font-style:normal;}
斜体 - 以斜体字显示的文字 {font-style:italic;}
倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持） {font-style:oblique;}

如果你不指定一个字体的大小，默认大小和普通文本段落一样，是16像素（16px=1em）

4、绝对大小&相对大小

绝对大小：

设置一个指定大小的文本
不允许用户在所有浏览器中改变文本大小
确定了输出的物理尺寸时绝对大小很有用

相对大小：

相对于周围的元素来设置大小
允许用户在浏览器中改变文字大小

五、盒子模型

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

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

举个例子：
新建以下HTML文件

<html>
  <head>
    <link rel="stylesheet" href="./mycss.css">
  </head>
  <body>
    <div class="box1">我是内容一，外面红色的是我的边框。注意边框的内外都有25px的距离。</div>
    <div class="box2">我是内容二，外面蓝色的是我的边框。注意与上面元素的外边距，发生了叠加，不是50px而是25px。</div>
  </body>
</html>

建立对应CSS文件：

.box1 {
  height: 200px;
  width: 200px;
  background-color:#615200;
  color: aliceblue;
  border: 10px solid red;
  padding: 25px;
  margin: 25px;
}
.box2 {
  height: 300px;
  width: 300px;
  background-color:#004d61;
  color: aliceblue;
  border: 10px solid blue;
  padding: 25px;
  margin: 25px;
}

对应可以在浏览器看到如下效果：
在这里插入图片描述
我们可以通过F12开发者工具，看到如下所示布局：

一个元素真正占据的宽度应该是：
左外边距 + 左边框宽度 + 左内边距 + 内容宽度 + 右内边距 + 右边框宽度 + 右外边距

1、边框与边距

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

CSS边框属性允许你指定一个元素边框的样式和颜色。

border-width 属性为边框指定宽度。
为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值）和 thin。

border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。

举个例子：border-style可以用来定义边框

border-style：属性1，属性2，属性3，属性4 == 上->右->下->左
border-style：属性1，属性2，属性3 == 上->左右->下
border-style：属性1，属性2 == 上下->左右
border-style：属性1 == 上下左右属性相同

在这里插入图片描述

2、外边距margin

margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。
margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。
在这里插入图片描述

值	说明
auto	设置浏览器边距，效果（大小）依赖于浏览器
length	定义一个固定的margin（使用像素）
%	定义一个使用百分比的边距
负值	表示重叠的内容

3、内边距padding

还是借用上面的图示说明实际表达的意义，padding定义元素边框与元素内容之间的空间，即上下左右的内边距。

当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。
单独使用 padding 属性可以改变上下左右的填充。

六、定位

position属性用于对元素进行定位，设置了元素的position属性后，我们才能使用top, bottom, left, right属性，否则定位无效。该属性有以下一些值：

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

1、static静态定位

设置为静态定位position: static;，这是元素的默认定位方式，也即你设置与否，元素都将按正常的页面布局进行。
即：按照元素在 HTML出现的先后顺序从上到下，从左到右进行元素的安排。

2、relative

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

举个例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>nice</title> 
<style>
h2.pos_left
{
	position:relative;
	left:-20px;
}
h2.pos_right
{
	position:relative;
	left:20px;
}
</style>
</head>
<body>
<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
</body>
</html>

在这里插入图片描述

3、fixed固定定位

设置为固定定位position: fixed;，这将使得元素固定不动（即使你上下左右拖动浏览器的滚动条）。
此时元素固定的位置仍由top, bottom, left, right属性确定，但相对的是视口（viewport，就是浏览器的屏幕可见区域）

4、absolute绝对定位

设置为绝对定位position: absolute;，将使元素相对于其最近设置了定位属性（非static）的父元素进行偏移。
如果该元素的所有父元素都没有设置定位属性，那么就相对于<body>这个父元素。

绝对定位此处可能有些混淆，请留意其是仍是相对的，不过是相对最近的父元素。

5、sticky粘性定位

position: sticky; 基于用户的滚动位置来定位。

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

八、溢出

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

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

九、浮动

在一个区域或容器内，我们可以设置float属性让某元素水平方向上向左或右进行移动，其周围的元素也会重新排列。
常用这种样式来使图像和文本进行合理布局。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动元素之后的元素将围绕它。

举个例子，将图片向右浮动

<style>
img 
{
	float:right;
}
</style>

在这里插入图片描述

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

<body>
<h3>图片库</h3>
<p>试着调整窗口,看看当图片没有足够的空间会发生什么。</p>
<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>

在这里插入图片描述
缩小尺寸以后：

在这里插入图片描述
清除浮动clear

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

十、组合选择器

1、后代选择器

后代选择器用于选取某元素的后代元素。

举个例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>nice</title> 
<style>
div p
{
	background-color:yellow;
}
</style>
</head>
<body>

<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div>
<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>
</body>
</html>

效果如图：
在这里插入图片描述
这个例子，选取所有

元素插入到

元素中，也就是对应具有黄色背景的行。

2、子选择器

直接后代选择器，以>作为分隔。与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素直接/一级子元素的元素。

举个例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>nic</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）用于定义元素的某种特定的状态或位置等。

伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。

与伪类针对特殊状态的元素不同的是，伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。

语法如下：

/* 选择器后使用 : 号，再跟上某个伪类/伪元素 */
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); } /* 在每个一级标题后插入该图片 */

十二、导航栏

导航栏=链接列表
作为标准的HTML基础一个导航栏是必须的。

使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单

导航条基本上是一个链接列表，所以使用

和
元素非常有意义。

导航条有多种形式，水平的、竖直的、响应式的等等。

这里以最基本的垂直导航条为例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>nice</title> 
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
}
 
li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}
 
/* 鼠标移动到选项上修改背景颜色 */
li a:hover {
    background-color: #555;
    color: white;
}
</style>
</head>

<body>
<ul>
<li><a href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>
</body>
</html>