CSS入门

两年1
149 阅读6分钟

一，CSS是什么？

  1. 定义：CSS全称是层叠样式表；
  2. 作用：为页面内容设置好看的模样，在整个页面中，CSS就像是人的外表一样重要；
  3. 语法规范：CSS由选择器，属性，值组成，其中属性和值用大括号包裹，以分号结尾。 例如：h1{ color: red; }; 其中h1是选择器，color是属性，red是值；
  4. CSS注释：CSS的注释格式是：/* 注释的语句 */;被注释的语句不会生效；

二，CSS引入方式的介绍（3种）

  • 内联样式：在标签内使用style属性引入（不推荐），例： <h1 style='color: red;'>666666</h1>
  • 内部样式：在< style >标签内书写样式（不推荐），例：

内部样式

  • 外部样式：在HTML文档外创建.css文件，并通过<link>标签或者@import引入： 1.<link>标签引入（推荐用法），<link>标签引入.css文件时最好写在<head>标签内，例：

link引入外部样式
2.@import引入（不推荐）：在<style>标签内部进行引入，如下：

import引入样式
此外，import引入方式还可运用在CSS文件中，如下：

import使用在CSS文件中

★：<link>标签引入和<@import>引入方式的不同点
  • link是HTML标签，@import是CSS语法，同时，link标签还可用于载入其它资源而@import不能；
  • link引入的样式文件可以进行异步加载，而@import引入需要页面加载内容完成才加载，这样有可能因为加载失败导致白屏问题；
  • link是HTML标签，不存在兼容性问题，而@import是CSS样式，在低版本IE不能用；
  • link支持JS控制DOM改变样式，而@import不支持； 综上所述，不推荐使用@import引入CSS样式

三，开发者工具和浏览器默认样式

  • 开发者工具：开发者工具可以在页面单击右键点检查选项打开，下图是它的模样：

谷歌浏览器开发者工具
在Elements中可以看到该网页的HTML和CSS样式。

  • 浏览器默认样式 浏览器默认样式是指在未设定样式是，浏览器默认自带的样式，每个浏览器的默认样式都有可能不同，并且在默认样式旁边都会带有user agent stylesheet字样标明，浏览器默认样式不能更改，但是可以覆盖，如下图：

谷歌浏览器h1标签默认样式

四，关于文件路径

  • 绝对路径（不推荐使用）：指的是文件所在的完整路径，如果文件上传到服务器因为路径改变有可能会导致文件错误，所以不推荐使用，如下：

文件完整路径

  • 网络路径：网站路径指的是服务器存放网页源代码的路径，通常见到的都是url（统一资源定位符） 例如：

url

  • ★ 相对路径：推荐使用，即使该路径放上服务器也不会出错 1.css/XXX.css 指当前目录下文件夹css中的XXX.css； 2../css/XXX.css 同上，但不同的是，该写法是严格模式写法； 3.XXX.css 指当前文件夹下的XXX.css文件； 4.../imgs/XXX.png 指上级文件夹下的imgs文件夹里的XXX.png文件；

五，CSS书写规范

  • 统一小写；
  • 不要使用内联的style属性去定义样式，错误范例：

错误

  • 标签的id或者class使用有意义的词语，不要像下面这样：

错误写法

  • 尽可能用缩写，如下代码：

缩写

  • 块内容缩进，如下图，箭头所指就是缩进：

缩进

★六，关于CSS选择器

  • 总概：一共有五中选择器：1.基础选择器；2.组合选择器；3.属性选择器；4.伪类选择器；5.伪元素选择器 下面就一一来介绍他们的用法：
  • 基础选择器： 1.*：通用选择器：适用于页面所有标签的样式，范围太广所以很少使用；

通用选择器
2.#id：id选择器：匹配特定的id元素；

id选择器
3..class：类选择器：匹配特定的class元素；

类选择器
4.element：标签选择器：直接使用标签名称进行样式设定；

标签选择器

  • 组合选择器 1.E,F：多元素选择器：可同时设置多个元素的相同样式:

多元素选择器
2.E F：后代选择器：可设置E元素包裹下所有F元素的样式：

后代选择器
3.E>F：子元素选择器：设置E元素包裹下的直接后代F，孙后代不能被选中：

子元素选择器
4.E+F：直接相邻选择器：该选择器匹配E元素之后的相邻同级元素F：

直接相邻选择器

5.E~F：普通相邻选择器：匹配E元素之后的同级元素F（无论相邻与否）：

普通相邻选择器

  • 伪类选择器 ★1.a标签的四种状态： ①：a:link（未被访问状态），②：a:visited（访问后的状态），③：a:hover（鼠标悬停状态），④：a:active（正被点击状态）； 2.顺序排列：link，visited，hover，active， 3.顺序排列的原因： 就近原则的原因，因为CSS加载的顺序是从上到下的，所以写在后面的优先级相同的选择器样式会覆盖前面的样式，而link是未被访问状态，visited是访问过后状态，hover鼠标悬停状态，active正在被点击状态。在鼠标未点击时，a链接是处于link状态，采用link样式，而点击后是visited和link状态，此时采用的应该是visited状态，所以link写在visited前面。同理，鼠标悬停在a链接时是hover，link和visited状态，而hover如果写在link和visited前面的话，hover的样式就会被覆盖，所以hover要写在link，visited后面。而点击时，a链接处于hover，active，link，visited状态，active写在前面就会被其它三种覆盖，所以active写在最后。

2.E:enabled和E:disabled:匹配表单中可用（enabled）和禁用（disabled）的元素； PS：禁用表单元素可以用disabled属性设定，没有这个属性的都是enabled元素，如下：

表单禁用

3.E:checked：匹配表单中的radio或者checkbox元素；

4.★E:nth-of-type(n)：匹配父元素的第n个子元素，但只匹配使用同种标签的元素；

E:nth-of-type(n)

5.★E:nth-chile(n)：与E:nth-of-type(n)类似；

E:nth-chile(n)
6.E:first-of-type：匹配父元素下使用同种标签的的第一个子元素；

E:first-of-type

7.E:last-of-type：匹配父元素下使用同种标签的的最后一个子元素；

E:last-of-type

  • 伪元素选择器 1.E::first-line：匹配E元素内容的第一行；

E::first-line
2.E::first-letter：匹配E元素内容的第一个字符；

E::first-letter
3.★E::before：在E元素前插入生成的内容；

E::before
4.★E::after：在E元素后面插入生成的内容；

Paste_Image.png

  • 属性选择器（因为不常用，只在这里说一下大体语法格式） 格式：E[abcd]：匹配所有有属性abcd的元素；

属性选择器

七，选择器优先级

  • 由高到低排列： 1.属性后+！importangt 2.内联样式：style='color: red'; 3.id选择器： #id 4.类选择器： .class 5.伪类选择器：a:link 6.属性选择器：h1{} 7.标签选择器：p[XXX] 8.通用选择器：*

  • 选择器优先级的计算 1.先设定初始值为万位数：0，0，0，0，0； 2.加了!important，在第一位0加上1（1，0，0，0，0）； 3.内联样式在第二位0加上1（0，1，0，0，0）； 4.id选择器在第三位0加上1（0，0，1，0，0）； 5.类选择器在第四位0加上1（0，0，0，1，0）； 6.伪类和属性选择器与类选择器一样； 7.标签选择器在第五位0加上1（0，0，0，0，1）； PS：上述所有选择器，每有一个就给它相应位置的0加上1，也就是说当有两个时，它的权值是相应位置的0加上2

avatar
文章
阅读
粉丝