文章目录

系列文章目录
前言
一、css层叠样式表
- 1.css组成
- 2.css引入方式
- 3.文字样式
- 4.文本属性
二、选择器
- 1.基本选择器
- 2.最高样式引入
- 3.伪链接选择器
- 4.伪结构选择器
- 5.特定元素选择器
- 6.目标伪类选择器
- 7.复合选择器
- 8.兄弟选择器
- 9.后代选择器
- 10.属性选择器
- 11.伪元素选择器
总结

前言

CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等。而且还可以针对不同的浏览器设置不同的样式。

一、css层叠样式表

1.css组成

CSS主要有两个部分构成:选择器和声明(一条或多条)

css的书写：

选择器（变量名）{

样式（键值对）

a:值

：值a

}

选择器用于指定css样式作用的HTML对象，花括号内是对该对象设置的具体样式。

属性和属性值之间以“键值对”的形式出现。

属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。

属性和属性值之间用英文“：”连接。

多个键值对之间使用英文“；”区分。

2.css引入方式

优先级：

1、行内样式表 > 内部样式表 = 外部样式表

2、当内部样式表和外部样式表同时存在时，采用 就近原则 来使用样式

1、行内样式引入（增加style属性）

<!--在标签内部再嵌套一个内嵌标签来设置样式-->
<span style="color: red;">行内样式表</span>

2、内联样式引入（style标签）

/*内部定义的style样式*/
<style type="text/css">div {background-color: pink;}
</style>

3、外联引入样式（文件引入，以link方式作为关联）

定义在外部的css文件中，需要在head中引入相应的css文件

/*关联外部的css样式文件*/
<link type="text/css" rel="stylesheet" href="../css/test.css" />

type:定义链接文档的类型，在这里需要指定为"text/css",表示链接的外部文件为css样式表。
rel：定义当前文档与被链接文档之间的关系，在这里需要指定为"stylesheet"，表示被链接的文档是一个样式表文件。
href：定义所链接外部样式表文件的url，可以是相对路径，也可以是绝对路径。

3.文字样式

font-size: 14px; 字号大小，浏览器不支持12px以下文字大小，1em=16px

font-family: Arial, Helvetica, sans-serif; 字体，多个属性用逗号隔开，依次匹配，多个单词用'' "

font-weight: lighter;字体粗细b,strong，以100作为倍数,或者字母400normal,700bold,boldter,lighter

font-style: italic; 字体风格i,em,属性值normal,italic,oblique

font: font-style font-weight font-size/line-height font-family; 综合设置,必须保留font-size、font-family属性，否则font属性将不起作用。

4.文本属性

1）文本颜色

color:red;

color-name;名称

hex-number十六进制颜色(常用)

rgba(opacity)(0,255,0-255,0-1)

hsla(0-360/100)

2）文本对齐方式

text-align: center;left;right;justify;(两端对齐)

justify; /*分散对齐，主要针对英文段落中出现空格时，由于两边对齐，空格的大小会有变化*/

一定要注意元素的性质是否为独占一行（非独占一行会失效）

3)文本装饰

text-decoration: none：/*默认*/

text-decoration: underline; /* 下划线 */

text-decoration: overline;/* 上划线*/

text-decoration: line-through blue; /* 删除线 */

4)文本转换

text-transform: none：默认
text-transform: capitalize：文本中每个单词以大写字母开头
text-transform: uppercase：所有单词字母都大写
text-transform: lowercase：所有单词字母都小写

5）文本间距

letter-spacing: -10px; /* 文字间距 */

word-spacing: 10px; /*字母间距 */

6）行高

width: 250px;

height: 250px;

background-color: red;

line-height: 220px;

/* 一行文字上下，使用单行文本，当值等于盒子的高度，就会达到垂直居中 */

7）文本方向

direction: ltr; /* ltr默认的从左到右，rtl从右到左 */

8）文本缩进

text-indent: 2em; 文本首行缩进，首行缩进2字符

9）文本阴影

text-shadow: h-shadow v-shadow blur color;

h-shadow：必需。水平阴影的位置。允许负值。horizontal， X轴往右是正值
v-shadow：必需。垂直阴影的位置。允许负值。 vertical，Y轴向下是正值
blur：可选。模糊的距离。
color：可选。阴影的颜色。

二、选择器

1.基本选择器

行内样式选择器：style

id选择器：id

类选择器：class

元素选择器：当前页面所有特定元素

通配符选择器：* 作用：清除浏览器，默认样式，增加运行时间,减少重复的代码，会影响页面加载速度

权重对比：

行内样式选择器>id选择器>class选择器>元素选择器（tag选择器）>*通配符选择器

唯一性特点：class可以有多个，id不能有多个

css允许使用多个id或重复使用，但是在js阶段会报错

2.最高样式引入

！important 只要给定该元素，该元素的样式就会按照给定的css来，该元素应该整个页面的权重结构

3.伪链接选择器:

执行顺序：

a:link       /*未访问的链接*/
a:visited   /*已访问的链接*/
a:hover       /*鼠标滑动到链接*/
a:active   /*鼠标点击的链接*/

4.(位置)结构伪类选择器

:first-child 获取第一个子元素
:last-child 获取最后一个子元素。注意：IE8不支持X:last-child。
:nth-child(n) 获取某个元素的第n个子元素。关键字（even偶数、odd奇数）。
:nth-last-child(n) 获取某个元素的最后第n个子元素。关键字（even偶数、odd奇数）。

:first-of-type 选择特定元素的第一个子元素
:last-of-type 选择特定元素的最后一个子元素
:nth-of-type(n) 只计算父元素中指定的某种类型的子元素
:nth-last-of-type(n) 只计算父元素中指定的某种类型的子元素，从这个元素的最后一个元素开始获取
:nth-child先找到第n个孩子，然后匹配
:nth-of-type先去匹配，然后再找第n个孩子

5.特定元素选择器

:only-child 匹配没有任何兄弟元素的元素

:only-of-type 匹配同类型只有一个孩子的元素

:empty 元素里面没有任何的内容或子节点

:root 匹配文档的根节点

6.目标伪类选择器target

    <style>/* 返回顶部 */p:target {color: blue;}</style>

<a href="#one">情人节</a>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<p id="one">跳转！</p>

7.复合选择器

1)交集选择器

由两个选择器构成，其中第一个为标签选择器，第二个为class选择器或者id选择器，两个选择器之间不能有空格。

p.one类名既是.one 且是段落标签

p#two.one id名,类名既是.one 且是段落标签

2)并集选择器

由各个选择器通过逗号连接而成的，任何形式的选择器，都可以作为并集选择器的一部分。

p,div 和

8.兄弟选择器

"+"以自己为出发点，跟它最接近的弟弟，只选择一个。

"~"选择除了它以外它所有的弟弟。

9.后代选择器

div>p子代

div p后代

10.属性选择器

[one]	存在one属性即可
[one=val]	属性值完全等于val
*[one=val]**	属性值里包含val字符并且在“任意”位置
[one^=val]	属性值里包含val字符并且在“开始”位置
[one$=val]	属性值里包含val字符并且在“结束”位置

11.伪元素选择器

::first-letter 块级文本的第一个单词或字
::first-line 文本的第一行
::selection 滑动选择文本
::before {

content: "行内元素";

}
::after {

content: "行内元素";

}

ctrl+f 查找，替换

总结

以上就是今天要讲的内容，本文仅仅简单介绍了选择器的使用。

css层叠样式表、基本选择器相关推荐

CSS层叠样式表之选择器
一.四大基本选择器 1.统配选择器 *{ } 匹配页面所有元素,一般用于页面样式初始化 2.标记选择器 tagName{ } 匹配页面指定的某种特定元素,如p.h1等,一般用在特定元素的初始化样式 3 ...
CSS层叠样式表--三大特性
一.继承性有些属性,如果父元素中已经设置过,其子元素无需重新设置.(可以节省代码) ★★★继承性失效的情况 1.继承的优先级没有浏览器的默认样式高. 二.层叠性 1.多个选择器可以同时作用于同一个标 ...
CSS层叠样式表-选择器
一.css层叠样式表的三种形式 1.行内样式表 2.内部样式表 3.外部样式表二.CSS选择器 1.标签选择器例: <html lang="en"> <hea ...
CSS(层叠样式表cascading style sheet)——CSS样式、基础选择器
一.CSS作用对页面的外观进行美化统一网站页面的风格实现内容和样式的分离,适合团队开发二.CSS语法规范三.CSS引入方式 CSS的3种样式表书写位置的不同分为:行内样式表(行内式) ...
CSS样式----标记选择器
一,概念 CSS(Cascading Style Sheet),中文译为层叠样式表,是用于控制网页样式并允许将样式信息与网页信息内容分离的一种标记性语言. 二,标记选择器 <style> ...
java基础57 css样式、选择器和css定位（网页知识）
本文知识点(目录): 1.CSS样式 2.选择器 3.CSS定位 1.CSS样式 1.html 在一个网页中负责的是一个页面的结构 2.css(层叠样式表)在一个页面中负责了一 ...
前端基础-CSS的各种选择器的特点以及CSS的三大特性
一. 基本选择器二. 后代选择器.子元素选择器三. 兄弟选择器四. 交集选择器与并集选择器五. 序列选择器六. 属性选择器七. 伪类选择器八. 伪元素选择器九. CSS三大特性一. ...
CSS学习笔记--CSS语法与选择器
导语 Css用于控制网页的样式和布局,指层叠样式表(Cascading Style Sheets),定义如何显示HTML的元素,这个样式通常存储在样式表中.在工作中通常使用的外部样式表,外部样式表 ...
Css 分类属性选择器
Css 层叠样式表美化页面的小工具分类: 内联 (行内)在标签内部以属性的形式呈现,属性名style 内嵌 head标签内以标签形式呈现,标签名style 外部 head标签内加link标签引 ...

css层叠样式表、基本选择器