Web基本之CSS（一）-外链论坛 - Powered by Discuz! Archiver

b1gc8v 发表于 2024-6-30 10:50:28

Web基本之CSS（一）

css功效：初期，依靠HTML元素的属性设置样式，例如：border/align；而每一个元素的属性不尽相同，因此样式设置比较混乱；因此呢，W3C推出了一套标准：运用某种样式声明后，所有的元素通用，即CSS产生，它是对页面的样式进行统一的定义（声明）的。
CSS概念：
+ CSS（Cascading Style Sheets）:层叠样式表，又叫级联样式表，简叫作样式表；
+ 用于HTML文档中元素的定义
+ 实现了将内容与表现分离
+ 加强了代码的可重用性和可守护性
CSS基本语法：
+ 由多个样式规则 构成，每一个样式规则有两个部分: 选取器和声明
—>选取器：决定那些元素运用这些规则
—>声明：由一个或多个属性/值构成，用于设置元素的外观表现；
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic4.zhimg.com/80/v2-63bed4d71c624bff93d4fca0f0c233a3_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
*CSS 运用
一共有三种运用方式：内联样式、内部样式表、外边样式表
*内联样式：定义在单个HTML元素中；不必须定义选取器，亦不必须大括号{}，只必须将分号隔开的一个或多个属性/值对，做为元素的style的值；如：
<div style="color: black; text-align: left; margin-bottom: 10px;"><h1 style=“bac公斤round-color:silver;color:blue”>文本</h1></div>
 * 内部样式表：定义在HTML页的头元素中；位置于头元素的<style>元素内；在文档的<head>元素内添加<style>元素，在<style>中添加样式规则；如：
<div style="color: black; text-align: left; margin-bottom: 10px;"><head><style type="text/css">
 h1{ color:green; }
 </style></head>
 <body><h1>文本</h1></body></div>
[重视：<style>中的属性 <type=“text/css”>可省略；且<style>元素里的注释要用css规定的/**/来注释，而不是HTML里的<!— —>]
* 外边样式表：定义在一个外边的CSS文件中(.css文件)；由HTML页面引用样式表文件； 
—> 一个纯文本文件； 
—> 该文件中只能包括css样式规则； 
—> 文件后缀为.css; 
运用 <link>元素链接必须的外边样式表文件。如: 
<div style="color: black; text-align: left; margin-bottom: 10px;">myStyle.css文件：
 h1{ color:green; }
 p{ bac公斤round-color;silver;color:blue; }
 html文件里的<head>元素：
 <head>
 <link rel="stylesheet" type="text/css" href="myStyle.css" />
 </head></div>
[重视：rel：暗示做什么用；href：暗示引入的文件路径；type：引入文件类型，text/css暗示纯文本的CSS代码]；
** 三种运用方式的区别：
1）内联样式：将样式定义在元素的style属性里；但无重用性。
2）内部样式表：将样式定义在<head>元素里的<style>里；但仅限于当前文档范围重用。
3）外边样式表：将样式表单独定义在.css文件里，有页面引入它；但可守护性可重用性高，同期实现了数据(内容)和表现的分离；
* CSS特征：
—> 继承性：大都数CSS的样式表能够被继承；
—> 层叠性：能够定义多个样式表；不冲突时，多个样式表中的样式可层叠为一个，即不冲突时采用并集方式；
* 优先级：即冲突时采用优先级
 —> 内联 > 内部或 外边；
内部和外边：优先级相同的状况下，采取就近原则，以最后一次定义的优先
（因此，当修改时，不想去找，就在CSS文件中最后的位置重新写新的样式；这亦是CSS文件越来越大的原由）；
[重视：还应重视浏览器的缺省设置]
** CSS

nykek5i 发表于 2024-9-26 00:19:46

在遇到你之前，我对人世间是否有真正的圣人是怀疑的。

nykek5i 发表于 2024-10-5 12:41:00

感谢楼主的分享！我学到了很多。

页: [1]

外链论坛's Archiver

Web基本之CSS（一）