LZ-Says:风平浪静之后,还会存在什么?
前言
前端好玩的有很多,不同的属性,不同的组合,生成 666 的页面。
But,LZ 还是有很多都是属于知其然而不知其所以然。
Today,简单回顾有关 CSS 那点事儿~
一、CSS 简述
伪前段一枚,如有不正,欢迎指正。
- 总说 CSS ,CSS,那么什么是 CSS 呢?
CSS(Cascading Style Sheets) 层叠样式表,它用来描述网页的行为、表现,也就是最终用户所见到网页的样子。
在 CSS 中,主要分为如下几种样式:
- 内部样式(行内样式): 将 CSS 样式直接写到 style 中且当前 Settings 只对当前元素起作用。此方式不方便复用,耦合度太高。
<p style="color:red;"></p>
- 内部样式: 将 CSS 样式写到头部中的 style 标签内。
<head>
<style type="text/css"> <!-- 说明此文本是 css -->
/**
* CSS 注释
*/
</style>
</head>
- 外部样式: 将共有 CSS 样式提取一个 css 文件中,随后在使用的页面中通过 link 进行引入即可,这样可以使结构和表现分离,并且可以通过浏览器的缓存加快用户访问,提升用户访问体验性。
<link rel="stylesheet" type="text/css" href="CSS 地址(相对地址)" />
二、CSS 语法
CSS 语法相对来说比较简单,主要由俩部分构成:
- 选择器: 通过选择器器可以选中⻚页⾯面中指定的元素,并且将声明块中的样式应⽤用到选择器器对应的元素上。
- 声明块: 声明块紧跟选择器器后⾯面,内部主要为 n 组值对结构,⽤用来描述当前样式;多个声明间使用 ; 隔开且声明样式名以及样式值之间使⽤用 : 来连接。
简单举个例子:
div p {
color:#666;
}
这里简单提起下有关元素的内容:
- 块级元素例如: p、h1~6。特点:独占⼀行;
- div 属于默认块元素,且没有默认值;
- 内联元素(⾏内元素),只占⽤自身⼤大⼩小的元素,例如:a、img、span;span 同样没有默认值,一般用来设置某种状态;
- 块元素主要⽤于⻚面中的布局,⽽内联元素则主要⽤于显示内部内容;
- a 元素可以包含任意元素,但是不能包含自身;
- p 元素不不能放置任何的块元素。
而关于元素之间的层级,这里简单说下:
<div>
<p>
<span></span>
</p>
<p>
<span></span>
</p>
<span></span>
<div>
以上述代码段为例,我们可以简单知晓其具有如下几类元素:
- 父、子元素;
- 祖先、后代元素;
- 兄弟元素
其次,来简短说明他们之间的关系:
- 父元素: 直接包含⼦元素的元素;
- 子元素: 直接被⽗元素包含的元素;
- 祖先元素: 直接或间接包含后代元素的元素,父元素也是祖先元素;
- 后代元素: 直接或间接被祖先元素包含的元素,子元素也是后代元素;
- 兄弟元素: 拥有相同⽗元素的元素。
最后我们来描述下代码段中的元素关系:
- body 算 div 的父元素,div 算 p 的父元素;
- span 算 p 的子元素,p 算 div 的子元素;
- div 算 span 的祖先元素,body 算 span 的祖先元素;
- span 算 div 的后代元素,p 算 div 的后代元素;
- span 算 p 的兄弟元素。
三、元素选择器
下面开始列举有意义的事儿咯。
- 通配选择器: 为当前页面所有元素设置样式。
- 元素选择器: 通过元素选择器选中该⻚面中所有指定元素设置样式。
- ID 选择器: 通过元素 ID 属性选中唯一的一个元素设置样式。
- 类选择器: 为相同 class 属性值的元素设置样式。
- 并集选择器: 可以同时选中多个选择器对应的元素并设置样式。
- 交集选择器(复合选择器): 可以同时选中满足多个选择器的元素并设置样式。例如设置 p 标签且 class 为 test 的元素样式,如下。
- 后代元素选择器: 选中指定元素的指定后代元素。
选中 ID 为 name 的元素且后代 id 为 id 的元素并设置样式。
- 子元素选择器: 为指定父元素下的指定子元素设置样式(注意:IE 6 及以下不支持子元素选择器)
- 兄弟选择器: 选择某个元素的兄弟选择器。
- 伪类元素选择器: 表示元素的某种状态,例如已访问、未访问等。
/**
* 默认样式
*/
a:link{
color:blue;
}
/**
* 访问过的样式,只能设置字体颜色,原因涉及到用户隐私
*/
a:visited{
color:blue;
}
/**
* 表示鼠标移上的样式 (IE 6 不支持超链接以外内容使用)
*/
a:hover{
color:blue;
}
/**
* 激活时样式 表示当前超链接被点击(点击中) (IE 6 不支持超链接以外内容使用)
*/
a:active{
color:blue;
}
/**
* 获取焦点时样式
*/
input:focus{
color:blue;
}
/**
* 选中文本时样式
*/
p::selection{
...
}
/**
* 设置第一个字样式
*/
p:first-letter{
}
/**
* 设置第一行样式
*/
p:first-line{
...
}
/**
* 元素最前边样式
*/
p:before{
...
}
/**
* 元素最后面样式
*/
p:after{
...
}
- 否定伪类选择器: 从已选中的元素中剔除某些元素。
/**
* 为除了 className = "" or id = "" 的 p 元素设置某种样式
*/
p:not(className/ID){
...
}
- 选择指定属性元素
- 选取指定属性的元素
当然还包含其他类型属性,如下:
<style>
/**
* 选中第一个子元素
*/
p:first-child {
...
}
/**
* 选中最一个子元素
*/
p:last-child {
...
}
/**
* 选中任意一个子元素
*/
p:nth-child(选中位置/even 表示偶数位置的子元素/odd 表示奇数的子元素)) {
...
}
/**
* 选中第一个子元素
*/
p:first-of-type {
...
}
/**
* 选中最一个子元素
*/
p:last-of-type {
...
}
/**
* 选中任意一个子元素
*/
p:nth-of-type {
...
}
</style>
type 和 child 区别在于
child 在所有子元素中查找,而 type 则在当前类型的子元素排列
- 列举特殊的属性: title 可为任意标签指定
样式的继承
例如页面中所有文字均为 30 px,则只需要简单设置如下:
body{
font-size=30px;
}
也就是说在 CSS 中,父类元素的样式会被子元素继承,背景定位等样式不会被继承。
选择器优先级
按照数字划分级别,如下所示:
- 内联样式优先级 1000
- ID 选择器优先级 100
- 类和伪类优先级 10
- 元素选择器优先级 1
- 通配优先级 优先级 0
- 继承的样式 无优先级
个人公众号
不定期发布博文,最近有点忙,感谢老铁理解,欢迎关注~