Web前端（CSS篇）

什么是CSS？

css(Cascading Style Sheets)是层叠样式表或级联样式表，是一组设置规则，用于控制web页面外观。

为什么使用CSS?

CSS 用于定义网页的样式，包括针对不同设备和屏幕尺寸的设计和布局。

CSS 实例

body {background-color: lightblue;
}h1 {color: white;text-align: center;
}p {font-family: verdana;font-size: 20px;
}

CSS的特点：

css规则是由两部分组成：选择器和一条声明或多条声明。

什么是选择器：

选择器通常指你需要改变的HTML元素的标签名、类名或ID名。

什么是声明？

每一组声明都有一个属性和值组成，属性是你希望改变的样式名。

<head><meta charset="utf-8"><title></title><style type="text/css">/*  *（通配符）选择器选中所有元素 */*{color: #ff4100;width: 100px;}/*  选中#dis下所有的元素 */#dis *{color: blue;width: 100px;}</style>
</head>
<body><div id="dis" class="dec"><p>#dis下的p标签</p><h2>#dis下的h2标签</h2>... ...</div>
</body>

CSS 的引入方式

css常用引入方式：标签内（内联）头部引入外部引入

CSS是和html结合使用
根据定义CSS的位置不同，分为标签内（内联）、头部样式和外部样式。

头部引入

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>css的引入方式</title><!-- 头部引入 --><style type="text/css">h1{color: yellow;}</style></head><body><h1>你好，世界！！！</h1></body>
</html>

内联（标签内）引入

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>css的引入方式</title></head><body><!-- 标签内（内联） --><p style="color: red;">熊大最帅！！！</p></body>
</html>

外部引入

/* index.css */
/* css外部文件 */
li{color: green;
}
.ps{color: pink;
}

@import 引入

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>css的引入方式</title><!-- 外部引入-方法1 --><style type="text/css">@import url("./css/index.css");/*这里不予许在写任何样式*/</style> </head><body><h1 class="ps">你好，世界！！！</h1><ul><li>你好，前端！！！</li></ul></body>
</html>

link引入

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>css的引入方式</title><!-- 外部引入-方法二 --><link rel="stylesheet" type="text/css" href="./css/02cssyinru.css"/></head><body><h1 class="ps">你好，世界！！！</h1><ul><li>你好，前端！！！</li></ul></body>
</html>

引入方式的优先级及语法

优先级（就近原理）

标签内（内联） ==> 头部引入 ==> 外部引入

<!-- 优先级演示 -->
<p class="ps" style="color: red;">最终的效果</p>

语法及优缺点

标签内（内联）

语法：<p style="属性:值;..."></p> 优点：优先级高缺点：冗余代码过多，不利于维护适用场景：个别特殊样式适用。

头部引入

语法：

 <head>
        <style>
            p{
                属性:值;
                属性:值;
                ...
            }
        </style>
    </head>

优点：速度快，没有服务器请求压力。

缺点：不易改版，代码可读性差，不易于前后台沟通。

适用场景：单页面适用。

外部引入

语法：

1、<style>
		@import url("外部css文件");
   </style>2、<link rel="stylesheet" href="外部css文件">

优点：一个文件可以控制多个页面样式，利于维护，利于前后台沟通。

缺点：冗余代码过多，有服务器请求压力。

适用场景：各大企业官网。

link与@import的区别

区别1：

link是XHTML标签，除了加载css外还可以加载RSS等其他事务 @import是属于css范畴，只能加载css 。

区别2：

link是XHTML标签，无兼容性问题 @import是在css2.1提出的，低版本浏览器不支持

区别3：

link引入css时，在页面加载时同时加载css @import需要HTML页面完全载入后再加载css 。

区别4：

link支持使用javascript控制DOM改变样式 @import不支持使用javascript控制DOM改变样式。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/901649.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！