Community Learn Tools Library Leisure

English

Home > List of blog posts > 【CSS入门】CCS基本语法和常用选择器的使用方法

Blogger Information

Blog 10

fans 0

comment 0

visits 9507

Special Recommendation

More>

Related recommendations

一、CSS简介

（1）CSS是层叠样式表（Cascading Style Sheets）的简称。

（2）CSS主要作用：美化网页、布局页面，增加视觉感官。

（3）CSS最大的价值：由HTML专注做结构呈现，样式交给CSS，即结构（HTML）和样式（CSS）相分离。

二、css语法

（1）CSS规则主要由两个主要部分构成：选择器及一条或多条声明。

选择器用于指定CSS样式的HTML标签，花括号内是对该对象设置的的具体样式。
属性是对制定对象设置的样式属性，例如字体大小、文本颜色等。
属性和属性值之间用英文“:”分开。
多个键值对之间用英文“;”进行区分。

三、CSS的三种引用样式

1、行内样式(内联样式)：

直接现在HTML标签中的样式，通过给标签添加style属性来实现行内式

 <h1 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </h1>

语法中style是标签的属性，实际上任何HTML标签都拥有style属性，用来设置行内式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标签及嵌套在其中的子标签起作用。

2、内部样式表

内部样式是将CSS代码集中写在文本的head标签中，并且用style标签定义，其基本语法格式如下

<head>
<style type="text/CSS">
    选择器 {
        属性1:属性值1; 属性2:属性值2;
          }
</style>
</head>

3、外部样式表

外部样式表是将所有的css样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link或@import标签将外部样式表文件链接到HTML文档中

<head>
  <link href="CSS文件的路径" type="text/CSS" rel="stylesheet" />
</head>
或：
<style>
   @import url(“style.css”)
</style>

四、CSS选择器

选择器优先级

id选择器的权值为100>类选择器的权值10>标签选择器的权值1>

1.简单选择器

标签选择器

用HTML标签名作为选择器，按标签名分类，为页面中的某一类标签指定统一的CSS样式。

标签名 {
    属性1: 属性值; 属性2: 属性值2
}

类选择器

为了差异化选择不同的标签，单独选一个或某几个标签，可以使用类选择器。
样式点调用，结构类（class）调用，一个或多个，开发最常用

.类名 {
     属性1: 属性值1; 属性2: 属性值2
}

我们可以给一个标签指定多个类名，或者一个类名绑定多个标签，从而达到更多的选择的目的。这些类名都可以选出这个标签。多类名之间要用空格分隔开。
可以把一些标签元素相同的样式（共同的部分）放到一个类里面。
这些标签都可以调用公共的的类，然后再调用自己独有的类。
从而节省CSS代码，统一修改非常方便。

id选择器

样式#定义，结构id调用，只能用一次

#id名 {
     属性1: 属性值1; 属性2: 属性值2
     ... 
}

类选择器和id选择器区别：

class可以被多次使用，id只能有一个

通配选择器

使用“*”定义，表示选中所有元素（标签）

* {
     属性1: 属性值1; 属性2: 属性值2
     ... 
}

群组选择器

可以同时选择多个不同类型的元素

h1,h2,#id名,.类名{
     属性1: 属性值1; 属性2: 属性值2
}

每个标签之间用,隔开

2.上下文选择器

元素的四种角色

先祖元素

拥有子元素,孙元素等所有层级的后代元素(如html、body)

父级元素

仅拥有子元素层级的元素
如：

<ul>(父级元素)
    <li></li>(子元素)
    <li></li>(子元素)
</ul>

后代元素

与其它层级元素一起拥有共同祖先元素

<html>(祖先元素)
  <body>
    <ul>
        <li></li>(后代元素)
        <li></li>(后代元素)
    </ul>
  </body>
</html>

子元素

与其它同级元素一起拥有共同父级元素

<ul>(父级元素)
    <li></li>(子元素)
    <li></li>(子元素)
</ul>

四种上下文选择器

后代选择器

可以选择父元素里面子元素，外层标签写前面，内层标签写后面，中间用空格分隔。当标签形成嵌套时，内层标签是外层标签后代

(父级)元素1 (元素1的后代)元素2 {
     属性1: 属性值1; 属性2: 属性值2
}

上述语法表示元素1里面的所有元素2（后代元素）。
元素1和元素2中间用空格分隔
元素1是父级，元素2是子级，选中的是元素2
元素2可以是儿子也可以是孙子，只要是元素1的后代即可
元素1和元素2可以是任意基础选择器

子选择器(父子选择器)

只能选择距离父元素 最近一级 的子元素

(父级)元素1>(子级)元素2 {
     属性1: 属性值1; 属性2: 属性值2
}

上述语法表示选中元素1的所有直接后代（子元素）元素2
元素1和元素2用大于号隔开
元素1是父级，元素2是子级，作中选中的是元素2
元素2必须是亲儿子，孙子都不行，也可以理解为亲儿子选择器

同级所有选择器

<style>
        .start~li {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <ul>
        <li>item1</li>
        <li class="start">item2</li>
        <li>item3</li>
        <li>item4</li>
    </ul>
</body>

所有相同父级中，位于某标签之后的同级的某标签享受样式。
相邻兄弟选择器可选择紧接在另一元素后的所有元素，且而者有相同父元素.
例如选择第二个li后面的所有li标签

伪类选择器

伪类选择器以 : 开始

<style>
    a:伪类元素
</style>

链接伪类选择器

:link ==未访问的链接
:visited ==已访问的链接
:hover ==鼠标移动到链接上
:active ==选定的链接

style>
        a {
            font-size: 16px;
            font-weight: 700;
            color: black;
            text-decoration: none;
        }
        a:link {
            /* 未访问的链接 */
            color: gray; /*颜色:灰色*/
        }
        a:visited {
            /* 已访问的链接 鼠标点击过后显示的颜色*/
            color: orange;/*颜色:橙色*/
        }
        a:hover {
            /* 鼠标移动到链接上显示的颜色 */
            color: red;/*颜色:红色*/
        }
        a:active {
            /* 选定的链接 当我们点击别松开鼠标 显示的状态*/
            color: green;/*颜色:绿色*/
        }
    </style>

结构伪类选择器

不分组匹配：

first-child :匹配父元素的第一个子元素
:last-child :匹配父元素的最后一个子元素
:only-child :匹配只有一个子元素的父元素
:nth-child(n) ：匹配父元素的匹配任意位置的子元素
:nth-last-child(n) ：从父元素的倒数第一个子元素开始计算
(n 可以是子元素的排序数字、关键词或着是公式)

<style>
     ul li:first-child { /*  选择第一个子元素 */
                color: pink; 
            }
     ul li:last-child {   /* 选择最后一个子元素 */
                        color: purple;
                        }
     ul li:nth-child(4) {   /* 选择第4个子元素 n 代表 第几个的意思 */                  color: skyblue;
                        }
     li:nth-child(odd) {  /*可以选择所有的 odd奇数 的子元素标签  */                       color: pink;
                        }
     li:nth-child(even) {    /*可以选择所有的 even 偶数 的孩子标签 */                  color: deeppink;
                        } 
     li:nth-child(3n) {   /* n 0 2n  2n是 选择 2.4.6.8..的孩子  3n 3.6.9的孩子元素 */
                color: pink;
                        }
        </style>
    </head>
    <body>
        <ul>/*父元素*/
            <li>第一个子元素</li>
            <li>第二个子元素</li>
            <li>第三个子元素</li>
            <li>第四个子元素</li>
            <li>第五个子元素</li>
            <li>第六个子元素</li>
            <li>第七个子元素</li>
            <li>第八个子元素</li>
        </ul>
    </body>

分组匹配：

.list > li:first-of-type:选取属于其父元素的首个li子元素的指定选择器
.list > li:last-of-type :选取属于其父元素的最后一个li子元素的指定选择器
.list li:nth-of-type(3) ：匹配属于其父元素的第 3 个li子元素，只匹配li元素
ul > li:only-of-type 匹配属于其父元素的唯一子元素的元素

style>
      /* 给类选择器为class的UL下的最后一个li标签添加背景颜色 */
      .list > li:last-of-type {
        background-color: aquamarine;
      }
      /* 给类选择器为class的UL下的第一个li标签添加背景颜色 */
      .list > li:first-of-type {
        background-color: royalblue;
      }
      /* 给类选择器为class的UL下的第三个li标签添加背景颜色 */
      /* 用空格链接后代元素会把样式带给后代元素 */
      .list li:nth-of-type(3) {
        background-color: blueviolet;
      }
      /* 给类选择器为class的UL下的单数li标签添加前景颜色 */
      .list > li:nth-of-type(2n + 1) {
        color: red;
      }
      /* 给类选择器为class的UL下的双数li标签添加前景颜色 */
      .list > li:nth-of-type(2n + 2) {
        color: blue;
      }
      /* 给ul下只存在一个li标签的元素加上边框 */
      ul > li:only-of-type {
        border: solid 2px;
      }
    </style>
  </head>
  <body>
    <ul class="list">
      <li>item1</li>
      <li>item2</li>
      <li>
        item3
        <ul>
          <li>孙子1</li>
          <li>孙子2</li>
        </ul>
      </li>
      <li>item4</li>
      <li>item5</li>
      <li>item6</li>
      <li>item7</li>
      <li>item8</li>
      <li>item9</li>
      <li>item10</li>
    </ul>
    <ul>
      <li>item1</li>
    </ul>

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：作业是写得越来越优秀了

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

markdown与Emmet插件的使用方式

2021-03-20 00:42:10