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

文章目录

• 系列文章目录
• 前言
• 一、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

    }

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

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

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

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

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

 

 

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.伪元素选择器

1. ::first-letter 块级文本的第一个单词或字

2. ::first-line 文本的第一行

3. ::selection 滑动选择文本

4. ::before {

               content: "行内元素";

           }

5. ::after {

               content: "行内元素";

           }

ctrl+f 查找，替换

---

总结

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