CSS 认识一下-外链论坛 - Powered by Discuz! Archiver

6257rv7 发表于 2024-6-30 11:08:03

CSS 认识一下

CSS 认识一下。
<h2 style="color: black; text-align: left; margin-bottom: 10px;">1、CSS 的哪些事</h2>
CSS（Cascading Style Sheets）译「层叠样式表」，我的理解是：各样样式叠加的表。
一个网页，倘若无 CSS，便是穿着“国王的新衣”，在裸奔！CSS 的要紧性不问可知！
做为 HTML 的衣服，CSS 为 HTML 元素供给了一种样式描述，定义其表示方式，TA 能够对网页中元素进行像素级精确掌控。
CSS 的历史不做太多赘述，先认识几种引入方式以及其区别。
<h2 style="color: black; text-align: left; margin-bottom: 10px;">2、外边样式</h2>
外边样式指的是单独创立一个扩展名为 .css 的样式表，在 head 标签中采用 link 方式引入，亦能够运用 import 方式引入：
<div style="color: black; text-align: left; margin-bottom: 10px;">// link 引入
 <link rel="stylesheet" type="text/css" href="css/style.css" />
 // @import 引入
 <style type="text/css">
 @import url("css/style.css");
 </style>
</div>
引入外边样式的好处便是，一个样式表能够在多个页面中复用，墙裂建议运用 link 方式引入，import 新手慎用。
<h2 style="color: black; text-align: left; margin-bottom: 10px;">3、内嵌样式</h2>
内嵌样式重点经过 <style> 标签在页面中编辑样式：
<div style="color: black; text-align: left; margin-bottom: 10px;"><style>
 .title {
 color: red
 }
 </style>
</div>
该办法编写的样式仅在当前页面有效，没法用于其他页面，<style>标签能够放在任意位置，意见放在 head 中。
<h2 style="color: black; text-align: left; margin-bottom: 10px;">4、行内样式</h2>
行内样式是在 HTML 页面中的某个元素上直接对其直接定义，以 p 元素为例：
<div style="color: black; text-align: left; margin-bottom: 10px;"><p style="color: red"></p></div>
行内样式只对其所在的标签生效，实质上写页面时意见少用或不消。
引用样式最好是采用第1种 link 方式引入，分离 HTML 页面代码与 CSS 样式，方便项目的守护管理，以及加强 CSS 样式的复用性。
其他两种办法少用或不消，尽可能降低页面的的繁杂性。
<h2 style="color: black; text-align: left; margin-bottom: 10px;">5、CSS 选取器</h2>
HTML 页面中的元素样式大大都是经过 CSS 选取器进行掌控的。
想要用 CSS 对 HTML 页面中的元素实现一对一，一对多或多对一的掌控，离不开 CSS 选取器。
CSS 的选取器大概有这些：通用选取器标签选取器class 选取器（类选取器）id 选取器后代选取器子代选取器组合选取器相邻兄弟选取器伪类选取器媒介查找（姑且亦算吧）还有有些可能漏掉了，欢迎留言弥补，先复盘有些平常选取器。
 5.1 通用选取器
通用选取器用 * 开头，后面直接跟上样式，功效于所有标签，暗示通用定义。
就好比定义所有正一般人：一个头、两只手、两条腿。
例：
<div style="color: black; text-align: left; margin-bottom: 10px;">* {
 font-size: 18px;
 color: red
 }
</div>
这儿暗示所有标签中的字体体积为 18px，颜色为红色。
 5.2 标签选取器
标签选取器能够选中所有的同类标签元素，标签后面直接跟上样式。
好比规定学生穿校服，区别工厂的工人有对应的工服。
例：
<div style="color: black; text-align: left; margin-bottom: 10px;">p {
 font-size: 16px;
 color: blue
 }
</div>
这儿暗示所有 p 标签中的字体体积为 16px，颜色为蓝色。
5.3 class 选取器（类选取器）
class 选取器能够选中带有特定类名的标签进行样式定义，亦便是一对多，书写时以 . 开头，跟上 class 名叫作，而后编写样式，在对应的标签中用 class="" 引用。
好比分配一个班级的班干部，给予她们同一类属性。
例：
<div style="color: black; text-align: left; margin-bottom: 10px;">// css 样式
 .title{
 bac公斤round-color: red
 }
 // html 页面
 <div class="title">语文课表率</div>
 <div class="title">数学课表率</div>
</div>
这儿就能把两个课表率的背景颜色都设置成红色，一对多设置。
5.4 id 选取器
id 选取器以 # 开头，后面跟上 id 名，而后书写样式。在对应的标签中运用 id="" 引用，其 id 名拥有独一性。
以一个学校为例，定义校长的属性，一个学校仅有一个校长。
例：
<div style="color: black; text-align: left; margin-bottom: 10px;">// css 样式
 #title{
 bac公斤round-col</div>

j8typz 发表于 3 天前

认真阅读了楼主的帖子，非常有益。

页: [1]

外链论坛's Archiver

CSS 认识一下