Web前端开发之CSS基础

最新推荐文章于 2024-05-11 09:00:00 发布

似水流年，是谁苍白了等待

最新推荐文章于 2024-05-11 09:00:00 发布

阅读量486

点赞数

CC 4.0 BY-SA版权

分类专栏： —Web前端开发

本文链接：https://blog.youkuaiyun.com/yyp0304Devin/article/details/97523852

—Web前端开发专栏收录该内容

3 篇文章

订阅专栏

本文深入探讨CSS（层叠样式表）与HTML的关系，解析CSS如何弥补HTML的不足，实现网页内容与表现的分离，介绍块级元素与行内元素的区别，以及选择器的运用，包括标签、类别、ID选择器等，还涉及链接样式和CSS盒子模型。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

最近在学习牛腩新闻发布系统的时候接触了CSS和HTML，在接触这些知识之后才对制作网页有了一定的认识，先将遇到的部分知识点总结一下。

一、CSS简介

CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。CSS最早是1996年由W3C审核通过并推荐使用的，CSS目前最新版本为CSS 3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。

二、 HTML与CSS的互补

1.HTML发展到今天存在3个主要缺点：

第一，由于HTML代码不规范、臃肿，需要足够智能和庞大的浏览器才能够正确显示HTML；

第二，数据与表现混杂，当页面要改变显示时就必须重新制作HTML；第三，不利于搜索引擎搜索。

2.HTML也有两个显著的优点：

第一，使用Table的表现方式不需要考虑浏览器兼容问题；

第二，简单易学，易于推广。

3.CSS的产生恰好弥补了HTML的主要缺点，主要表现在以下几个方面。

CSS用于增强或控制网页样式，并允许将样式信息与网页内容分离。

引用样式表的目的是将“网页结构代码”和“网页样式风格代码”分离开，从而使网页设计者可以对网页布局进行更多的控制。

利用样式表，可以将整个站点上所有网页都指向某个CSS文件，设计者只需要修改CSS文件中的某一行，整个网页上对应的样式都会随之发生改变。

三、块级元素和行内元素

在CSS里还有特别重要的一个技术点，就是块级元素和行内元素，看看他们的区别在哪里。

区别：

行内元素与块级函数可以相互转换，通过修改display属性值来切换块级元素和行内元素，行内元素display：inline，块级元素display：block。

行内元素和其他行内元素都会在一条水平线上排列，都是在同一行的；块级元素却总是会在新的一行开始排列，各个块级元素独占一行，垂直向下排列，若想使其水平方向排序，可使用左右浮动（float：left/right）让其水平方向排列。

行内元素不可以设置宽高，宽度高度随文本内容的变化而变化，但是可以设置行高（line-height），同时在设置外边距margin上下无效，左右有效，内填充padding上下无效，左右有效；块级元素可以设置宽高，并且宽度高度以及外边距，内填充都可随意控制。

块级元素可以包含行内元素和块级元素，还可以容纳内联元素和其他元素；行内元素不能包含块级元素，只能容纳文本或者其他行内元素。

四、选择器

１.作用

用选择器规定语法的样式

修改网页直接从公共样式表修改就行，不破坏在html中写的代码。

同一个网页可以多次引用多个样式表文件。

２.类型：

（１）标签选择器

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者 元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。

标签选择器可以把某一类标签全部选择出来 div span

（２）类别选择器

类选择器以一个点号显示：

.center {text-align: center}

在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。

在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则。

<h1 class="center">
This heading will be center-aligned
</h1>

<p class="center">
This paragraph will also be center-aligned.
</p>

.searchbtn { /* 搜索按钮的样式 */

    background-image: url("../Image/search.png");

    background-repeat: no-repeat;

    width: 103px;

    height: 33px;

    border-style: none;

    background-color: #fff;

}

.commonfrm {

    /* 框架公共样式 */

    border: 1px solid #DEDFDE;

    float: left;

    width: 560px;

}

（３）ID选择器

ID选择器以 "#" 来定义。

下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：

#red {color:red;}
#green {color:green;}

 #top img {

    /* 頂部图片样式 */

    float: left;

    border-width: 0;

    }

#footer { 
    /* 尾部样式 */
    text-align: center;

    border-top: 1px solid #D6D7D6;

    padding-top: 10px;

    clear: left;
}

下面的 HTML 代码中，id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

选择器大全链接

https://www.runoob.com/cssref/css-selectors.html

嵌套选择：span

有唯一性，只能被引用一次

(4)全局声明*

* { /* 把默认值都设置为0 */

    margin: 0;

    padding: 0;

}

五、链接

a:link - 正常，未访问过的链接

a:visited - 用户已访问过的链接

a:hover - 当用户鼠标放在链接上时

a:active - 链接被点击的那一刻

a:link, a:visited {

    /* 鼠标未移上去的超链接的样式, 超链接访问后的样式 */

    color: #000;

    text-decoration: none;

}

a:hover {

    /* 鼠标移到超链接上的样式 */

    color: #00f;

    text-decoration: underline;

<a href="http://www.tg029.com" target="_blank"><img src="Image/tg029logo.gif" width="600px" /></a>

六、CSS 盒子模型(Box Model)

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。当我们进入网页的时候按F12就可以看见自己制作的网页的盒子模型，效果图如下。

不同部分的说明：

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