Web从入门到放弃-CSS的学习(五)

最新推荐文章于 2024-07-24 14:20:14 发布

OnionQueen

最新推荐文章于 2024-07-24 14:20:14 发布

阅读量169

点赞数 1

文章标签： css 前端学习

本文链接：https://blog.csdn.net/OnionQueen/article/details/127886362

版权

一、CSS的简单介绍(要想知道复杂的，百度一搜一看一了解)

HTML本质作用就是把数据呈现到网页上而已(数据展示的一个载体)
当下看到花里胡哨的网页都是在HTML的基础上通过CSS和CSS3实现的
web的组成：HTML+CSS+JS
- 实际开发时推荐(建议必须)：结构表现行为分离(全部单独成文件，使用外部导入方式进行关联)
CSS：层叠样式表
- 特性：属性是忽略大小写的，但是选择器严格区分大小写
- 注释：/**/

二、CSS基本语法

CSS 规则由两个主要的部分构成：选择器以及一条或多条声明。

选择器是用于指定 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式
属性和属性值以“键值对”的形式出现
属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
属性和属性值之间用英文“:”分开
多个“键值对”之间用英文“;”进行区分
定义选择器的规范：
- 必须是字母开头，不能数字开头
- 不能是单纯的数字定义
- 可以是字母+数字组合(例如：box1，txt_2)
- 定义的选择器具有语义化(见名知意)

三、基本选择器

3.1标签选择器(元素选择器)：标签本身就拥有的名称，通过元素名称查找同名的所有元素(找到的是一个元素集合，会找到很多个)

标签名 { 属性1: 属性值1; }
a{属性1:属性值1;属性2:属性值2;属性3:属性值3;.....}
img{属性1:属性值1;属性2:属性值2;属性3:属性值3;.....}

标签选择器的作用是为页面中某一类标签指定统一的CSS样式
优点是能快速为页面中同类型的标签统一设置样式
缺点是不能设计差异化样式，只能选择全部的当前标签
规范：
- 属性值前面，冒号后面，保留一个空格
- 标签名和大括号中间保留空格

3.2类选择器：如果想要差异化选择不同的标签，单独选一个或者几个标签，可以使用类选择器，就相当于起了个别名，查找到同类名的所有元素(找到的是一个元素集合)

定义类名：<p class="txt"></p>    通过关键字class在标签内部定义
使用类名：.txt{属性1:属性值1;属性2:属性值2;属性3:属性值3;.....}   
    通过符号".+类名"调用

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。
类选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点“.”号显示。
类选择器使用“.”（英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的）。

类选择器多类名
- 可以给一个标签指定多个类名，简单理解就是一个标签有多个名字

<div class="red font20">Onion</div>

可以在同一个标签的class 属性中写多个类名
多个类名中间必须用空格分开
这个标签就可以分别具有这些类名的样式
多类名开发中使用场景：
- 可以把一些标签元素相同的样式(公共的部分)放到一个类里面
- 这些标签都可以调用这个公共的类，然后再调用自己独有的类
- 从而节省CSS代码，统一修改也方便

3.3id选择器：就相当于申请了一个身份证号，通过id选择器，只能找到符合id的唯一一个元素，具有唯一性，不可复用，不可重复

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式
HTML 元素以 id属性来设置 id 选择器，CSS中 id 选择器以 “#” 来定义

定义id名：<p id="txt"></p>    通过关键字id在标签内部定义
使用id名：#txt{属性1:属性值1;属性2:属性值2;属性3:属性值3;.....}    
    通过符号"#+id名"调用

类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。
id 选择器好比人的身份证号码，全中国是唯一的，不得重复。
id 选择器和类选择器最大的不同在于使用次数上。
类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用。

3.4.通配符：作用于网页上所有的标签，查找全部标签

* { 属性1：属性值1; .... }
* { margin: 0; padding: 0; }

通配符选择器不需要调用，自动就给所有的元素使用样式
一般是用于清楚元素标签的内外边距

说明：

通配符虽然能够作用于所有的标签，但是不会直接拿来定义普通的属性，只用来初始化边距等属性(既是规范也是开发时的要求)
id选择器大多情况下使用在JS当中，因为具有唯一性，且权重值比较高
实际开发时，写css时，大模块的地方可使用id，其他模块都通过class来修改样式

3.5选择器的权重值

!important = 正无穷大(但是在实际开发时不会直接添加该关键词，因为一旦加上后期将无法在修改)一般情况下只是用来检测权重值受否偏小(如果加上该属性样式显示，说明权重值偏小，否则就是代码编写错误)
id = 100
class = 10
el = 1
选择器之间的优先级：!important > id > class > el

3.6CSS基本选择器总结

基本选择器	作用	特点	使用频率	语法
标签(元素)选择器	选出同名的所有元素	不能差异化选择	较多，大多结合标签选择器关系一起使用	p{color:red;}
类选择器	选出同类名的所有元素	可根据需求筛选	非常多，强烈建议使用	定义：class="box" 使用：.box{color:red;}
id选择器	一次只能选择一个元素	只能在每个HTML中选择唯一一个元素	一般结合JS使用较多	定义：id ="txt" 使用：#txt{color:red;}
通配符	选择所有的标签	选择的太多，有部分不需要	一般使用在初始化样式时	*{color:red;}

四、CSS导入方式

4.1.行间样式(行内样式)：使用style属性将样式放到标签内部，实际开发不推荐使用(结构表现的分离，便于维护和代码阅读)，这种方式不适用选择器

<div style="width:300px;height:300px;background-color:red;"></div>

缺点：HTML页面不纯净,不利于更改

4.2.内嵌样式(内联样式)：使用<style></style>标签放在<head></head>中(使用选择器)

<head>
   <style>
        #txt{color:red;}
   </style>
</head>
<body>
    <p id="txt">今天吃点啥呢？</p>
</body>

优缺点：无法提取多个页面的公共css。有些低版本的浏览器不能识别style标记，这意味着低版本的浏览器会忽略style标记里的内容，并把style标记里的内容以文本直接显示到页面上。为了避免这样的情况发生，我们用加HTML注释的方式（）隐藏内容而不让它显示 ,但目前低版本浏览器用的少之又少，大可不必担心，随如此淡漠夜不建议使用哦。

4.3.外部链接式：使用<link rel="stylesheet" href="xxx.css" />标签放在<head></head>中(实际开发推荐使用)

rel="stylesheet"属性极其的重要，特别的重要，相当的重要，告诉浏览器，我是一个样式表
href="xxx.css"属性引入一个外部的css样式表

<link type="text/css" rel="stylesheet" href="style.css" />

优缺点：实现了页面框架代码与表现CSS代码的完全分离，使得前期制作和后期维护都十分方便,会先加载css，会在装载页面主体部分之前装载css文件，这样显示出来的网页从一开始就是带有样式效果的。

4.4导入式：使用@import url() 放在<style></style>标签中然后放在<head></head>中

@import在html中使用，如下： 
<head>
    <style>
        @import url();
    </style>
 </head>
@import在CSS中使用，如下：
@import url(style.css);

导入样式和链接样式比较相似，采用@import样式导入CSS样式表，在HTML初始化时，会被导入到HTML或者CSS文件中，成为文件的一部分，类似第二种内嵌样式。会在加载html文档后在加载样式所以有时会出现没有样式的情况(很短暂)，然后就有样式了
如果需要引入多个css文件链接式需要写多句，可以写一个总的css，在里面用导入式导入其他的css，然后再用链接式在html中链接总的css

4.5link和@import引入CSS主要有以下区别：

link是HTML标签，@import是css提供的。
link引入的样式页面加载时同时加载，@import引入的样式需等页面加载完成后再加载。
link没有兼容性问题，@import不兼容ie5以下。
link可以通过js操作DOM动态引入样式表改变样式，而@import不可以。

4.6.如果同时使用所有的导入方式(不包括import)，那么优先执行哪一个呢？

答：行间 > 内嵌 > 外部链接(就近原则--这个答案不是绝对的，除了行间，内嵌和外链那个近走那个)

基本选择器和导入方式，暂时这么多，对于CSS的学习，我并不是按照传统API的顺序写的，所以后续的知识点稍有跳跃，但也是综合练习总结下来学习最快的一种方式，祝大家好运啦！！！

陆续更新中，如果有帮助到您，谢谢点赞，谢谢收藏，谢谢关注，谢谢支持，总之就是谢谢啦各位...........

OnionQueen

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Web从入门到放弃-CSS的学习(五)

Web从入门到放弃
复制链接

扫一扫