【CSS操作指南----上】

芃仔

已于 2022-04-19 22:39:16 修改

阅读量589

点赞数 5

分类专栏：前端三剑客文章标签： css

于 2022-04-19 20:16:53 首次发布

本文链接：https://blog.csdn.net/weixin_54161577/article/details/124273075

版权

前端三剑客专栏收录该内容

4 篇文章 1 订阅

订阅专栏

一、CSS的基本了解

CSS代码，主要由两部分构成：

选择器{

属性：值；

}

选择器：决定针对哪些元素进行修改

属性和值都是针对被选中的元素进行的。

举个例子：

style标签里面就可以放置CSS代码，一个html文件中可以把style放到任意位置，但是一般习惯上放到head标签中，并且style可以存在多份~

二、CSS的另外两种使用规则

1.行内样式表-内联样式表

通过标签的style 属性来设置的样式，不需要写选择器（只是针对当前标签生效）

注意：行内样式的优先级高于上面所说的内部样式（即使用选择器），如果两边同时尝试设置不同的属性值时，行内样式会覆盖内部样式~

可以看到，内部样式和行内样式同时针对p标签的颜色、字体大小进行了设置，但此时在页面中起到作用的是行内样式~

2.外部样式表

当CSS进一步的复杂了之后，就可以把CSS单独放到一个文件中，然后再html中单独引入~

此时在html中引入TEST1.CSS，TEST1.CSS就称为外部样式表，通过实验link标签来引入一个外部的CSS，href属性就描述了css的位置，rel属性表示引入的文件类型，stylesheet就表示“样式表”。此时就说明了引入了一个名叫TEST1.CSS的外部样式表。我们可以看到，在压面中div标签中的内容就是通过这个TEST1.CSS中的内容来设置的~

注意：外部样式写的代码，如果代码修改了，不一定为立即生效！！！（受限于游览器缓存的影响）

原因是：当浏览器首次访问网站的时候，就会下载这下css到本地，后面第二次再访问的时候，这些css就不必再重新下载（浏览器缓存），存在的意义就是为了提高访问速度~

解决措施：强制让浏览器刷新就OK，强制浏览器从服务器重新下载CSS（ctrl + F5）~

有没有什么措施能够避免这种情况呢？当然有，对于小白来说，可能并不知道这里的强制刷新操作，那么在实际开发中，采取的思路就是，如果CSS文件修改了，就改一下css文件的名字，此时当浏览器在加载css的时候发现这个新的css文件之前没有缓存过，就会自动去重新加载CSS，这样就能保证新版本的CSS一定会被浏览器加载！

三、CSS选择器

1.基础选择器

（1）.标签选择器

选中一类标签，就会让当前页面的所有这类标签都被选中~选择器部分直接写标签名~

此时可以看到所有的p标签都按照CSS中的标签选择器所修改~

（2）.类选择器

在标签选择器中，范围太大了，有的时候，希望只修改其中的一个元素，其他的元素不修改，因此，就需要使用类选择器~这里的类仅仅是一个分类的效果。

在CSS中创建“类”通过这个类来手动指定哪些元素要遵守该样式~

.开头表示的是类，.后面的部分是类的名字。

在具体要应用选择器的元素上，通过class属性来引入，引入的时候不需要加点

类选择器一般就是有一些元素都需要使用相同样式的时候使用，就可以给多个元素都引用同一个类~

应当注意的是：一个类可以被多个标签使用，一个标签也可以使用多个类~

此时我们可以看见，“明天见”这个p标签，不仅使用了green类，还使用了font类！类和类之间通过空格来分割，类名不可以是数字、中文开头，也不能是标签名！