html&CSS-----CSS介绍与样式书写

最新推荐文章于 2024-09-29 11:03:43 发布

Fitz&

最新推荐文章于 2024-09-29 11:03:43 发布

阅读量756

点赞数 2

分类专栏： html和css框架文章标签： html 前端 css css3

本文链接：https://blog.csdn.net/m0_73633088/article/details/130996945

版权

html和css框架专栏收录该内容

14 篇文章 2 订阅

订阅专栏

本文介绍了CSS的基本概念，包括它作为网页装饰者的作用，以及三种书写样式：行内样式通过`style`属性直接设置，内部样式在HTML的`<style>`标签中定义，外部样式通过`<link>`标签引入独立的.css文件。每种样式的优缺点也进行了比较，行内样式权重高但不易维护，外部样式实现样式与结构分离利于重用。

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

前言：

前面我们学习了HTML的相关标签和框架写法，那我们在了解这些标签用法了之后就要学会怎么去通过相关方法来使得界面美化处理，这里就要学到CSS去进一步对这些标签进行加工处理，下面我就简单介绍css以及其相关写法

1. CSS是什么

CSS是Cascading Style Sheet的缩写，中文意思为"层叠样式表"，它是网页的装饰者，用来修饰各标签排版（大小、边距、背景、位置等）、改变字体的样式（字体大小、字体颜色、对齐方式等）、设置图片（宽高、位置等）等。

2. CSS书写样式

css代码分为内部样式、外部样式、行内样式三种写法。

(1)行内样式

借助了所有标签都有的属性style，为当前的元素添加样式声明。

写法：

<标签名 style="样式声明">

CSS样式声明: 由CSS属性和值组成

CSS属性：你希望给HTML标签设置的样式名字

值：使用值来控制某个属性显示的效果

style="css属性名:值;css属性名:值;"

(2)内部样式

借助于style标签，在HTML文档中嵌入CSS样式代码，可以实现CSS样式与HTML标签之间的分离。同时需借助于CSS选择器到HTML 中匹配元素并应用样式。写在HTML文档的style标签中，style通常放置于头部，格式如下：

<head>
  <style>
    /*这里写css代码*/
  </style>
</head>

style标签可以加上type="text/css"这条属性，用于告诉浏览器这里是什么格式的代码，但是在HTML5规范中可以不用写。

示例：

<html>
    <head>
        <meta charset="UTF-8">
        <title>我的网页</title>
        <style>
            #fu{
                box-shadow: 0 0 10px 10px rebeccapurple;
            }
            #look{
                background-color: aqua;
            }
        </style>
    </head>
    <body>
        <div id="fu"></div>
        <div id="look">hello</div>
    </body>
</html>

效果：

3.外部样式

创建外部样式表文件后缀使用.css，在HTML文件中使用<link>标签引入外部样式表。其实思路类似于导入一个自定义模块的写法。写法如下：

<!-- rel：引入文件资源类型    href：引入文件资源的路径  -->
<link rel="stylesheet" href="外部样式表的地址">

stylesheet是表示连接两个文件，href后面写进行连接的文件地址

示例：

html文件代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 创建连接 -->
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <a href="https://blog.csdn.net/m0_73633088/article/details/130973039?spm=1001.2014.3001.5501" target="_blank" id="fuc">这是一个链接，点开</a>
    <div id="shit">555</div>
</body>
</html>

css文件代码

#fuc{
    height: 200px;
    background-color: aqua;
    font-family: 幼圆;
    text-decoration: none;
    /* 去除下划线 */
}
#shit{
    width: 200px;
    /* 背景颜色 */
    background-color:aquamarine;
    /* 颜色 */
    color: brown;
    /* 字体大小 */
    font-size: 50px;
}

效果:

4.三者之间的比较

样式表	优点	缺点	使用情况	使用场景
行内样式表	书写方便，权重高	没有实现结构与样式分离，不便于维护，不可以重复利用	极少	某个标签需要单独的样式设置时使用
内嵌样式表	部分结构与样式分离，较便于维护	没有彻底实现结构与样式分离，不可以重复利用	一般	css代码量不多，且和当前页面联系紧密不需要复用时使用
外链样式表	完全实现结构与样式分离，可重复利用	如果代码量较少情况下，引入法更麻烦	最多，推荐	css代码量大时，或者需要重复利用时使用