1.5 CSS概述，CSS语法&四种存在方式

最新推荐文章于 2024-05-23 09:01:29 发布

小脆筒style

最新推荐文章于 2024-05-23 09:01:29 发布

阅读量356

点赞数 1

分类专栏： html + css 文章标签： css

本文链接：https://blog.csdn.net/weixin_46672830/article/details/118970889

版权

html + css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、 CSS概述

HTML标记及原本用于定义文档内容和结构，但随着浏览器开发商对HTML标签和属性的不断扩展，致使HTML文档内容和表现混杂在一起，大大降低了网页界面设计和内容更改的效率，为此W3C制定了CSS（Cascading Style Sheets，层叠样式表），其目标用CSS取代HTML表格式布局设计，框架和其他的控制标记，与HTML网页结构和内容分离，实现内容与表现分离，使网站的构建和维护更加容易。

使用CSS好处

提高网站制作效率。如果没使用CSS时，想要更新整个站点中所有文字样式和版式，就必须一页一页修改，而使用CSS链接到站点的所有网页时，仅更新CSS文档就能同时改变站点中所有页面的布局和外观；
CSS能简化网页的格式化代码，网页文件更小，网页传输更快，达到网页减肥效果；
保持网页在大多数浏览器效果一致性；
实现了内容和表现的分离。回归了HTML定义网页的结构，CSS定义表现形式，提供了对布局和图文排版的精细控制。

二、CSS语法

CSS 语法包括选择器、样式属性和属性值三部分，基本语法：

Selector{property: value; property: value; …property: value}

Selector选择器可以是HTML标记、id、class和复合样式等，property是样式属性，value是样式属性值，样式属性和属性值用冒号（:）分开。
定义多个属性时用分号（;）将各属性分开，最后一条样式属性和属性值也加分号。

三、CSS存在方式

链接式
内嵌式
行内样式
导入式

1. 链接式

链接式样式是使用频率最高，最为实用的方法。链接式样式的最大优势在于CSS代码与HTML代码完全分离，并且同一个CSS文件可以被不同的HTML所链接使用。
当需要引用外部样式文件时，在<head>标签通过<link>标签来链接外部样式表。在HTML文档中使用link元素定义页面包含的外部CSS文件，link元素位于head元素中，是空元素，无结束标签。
用法格式：

 <link rel="stylesheet" type="text/css" href="https://blog.csdn.net/weixin_46672830?spm=1000.2115.3001.5343">

href属性指定CSS文件路径（一般位于CSS或者styles）和文件名，type指定页面所链接文档的类型，属性值为text/css，rel表明HTML页面与被链接文件的关系，链接到一个CSS文件时值为stylesheet

2.内嵌式

内嵌式样式表就是将CSS写在HTML文件的头部的<head></head>之间，并且以<style>开始，以</style>结束。
基本语法:

<head>
    <style type="text/css">
        p {
            color: #FF00FF;
            font-size: 14px;
        }
    </style>
</head>

<style>标记用来说明所要定义的样式。Type=”text/css”声明是样式表代码，<! – -->用于防止将样式表代码显示在不支持样式的浏览器窗口。
内部样式表将所有的样式表信息都列于HTML文件的头部的同一区域，方便后期的维护，页面本身也大大瘦身。内嵌式仅适用与对单个网页需要特殊的样式时适用。

3.行内样式

行内样式时所有样式方法中最为直接的一种，直接对HTML标记使用style属性，然后将CSS代码直接写在其中
基本语法：

<p style="font-size:34px;line-height:18px;">文本段落</p>

利用这种方法定义的样式，其效果只能控制某个标记。只在一个网页一两个地方用到的CSS才选用行内样式。

4.导入式

采用import方式导入的样式表，在HTML文件初始化时，会被导入到HTML文件内，作为文件的一部分，类似于内嵌式的效果，而链式表样式表则是在HTML的标记需要格式时才以链接的方式引入。
导入样式最大的用处是可以让一个HTML文件导入很多的样式表。导入样式表在内部样式表的<style>里用@import导入一个外部样式表。@import声明可以一般放在<head>标记内
基本语法：

<head>
    <style type="text/css">
        @import url(style.css);
    </style>
</head>

@import语句后面的“；”不能省略，外部样式表文件的扩展名必须是.css，样式表地址可以是绝对地址，也可以是相对地址。

如果觉得本文写得不错顺手点个赞感谢老铁！

小脆筒style

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
1.5 CSS概述，CSS语法&四种存在方式

CSS概述HTML标记及原本用于定义文档内容和结构，但随着浏览器开发商对HTML标签和属性的不断扩展，致使HTML文档内容和表现混杂在一起，大大降低了网页界面设计和内容更改的效率，为此W3C制定了CSS（Cascading Style Sheets，层叠样式表），其目标用CSS取代HTML表格式布局设计，框架和其他的控制标记，与HTML网页结构和内容分离，实现内容与表现分离，使网站的构建和维护更加容易。使用CSS好处提高网站制作效率。如果没使用CSS时，想要更新整个站点中所有文字样式和版式，就必须一
复制链接

扫一扫