首页 前端知识 CSS 入门指南(一)CSS 概述

CSS 入门指南(一)CSS 概述

2024-03-07 08:03:51 前端知识 前端哥 940 762 我要收藏

CSS 概述

CSS 介绍

CSS(Cascading Style Sheets)通常称为 CSS 样式或层叠样式表,是一种用来为结构化文档(如 HTML 文档或 XML 应用)添加样式(字体、间距和颜色等)以及版面的布局等外观显示样式的计算机语言,CSS 文件扩展名为 .css

  • 样式:给 HTML 标签添加需要显示的效果。
  • 层叠:使用不同的添加方式,给同一个 HTML 标签添加样式,最后所有的样式都叠加到一起,共同作用于该标签。

CSS 可以使 HTML 页面更好看,CSS 色系的搭配可以让用户更舒服,CSS + DIV 布局更佳灵活,更容易绘制出用户需要的结构。


CSS 样式规则

  • CSS 样式规则需要写在一个 **style(样式)**标签中

  • CSS 样式规则由两个主要的部分构成:选择器,以及一条或多条声明

    • 选择器通常是需要改变样式的 HTML 元素

      选择要添加 CSS 样式的 html 标签的方式:根据标签的名称,标签的 id 属性值,标签的 class 属性值等方式

    • 每条声明由一个属性和一个值组成

      属性(property)是希望给标签设置的样式属性(style attribute),例如大小,颜色等。

      每个属性有一个值。属性和值被冒号分开。

  • 格式:

    <style type="text/css">
        选择器{
            属性名:属性值;
            ...
            属性名:属性值;
        }
    </style>
    

    CSS 声明总是以分号 ; 结束,声明总以大括号 {} 括起来

  • CSS 注释

    注释是用来解释代码,并且可以随意编辑它,浏览器会忽略它。

    CSS注释以 /* 开始, 以 */ 结束,实例如下:

    /*这是个注释*/
    
  • 示例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS样式规则</title>
        <style type="text/css">
            /*使用标签选择器:根据标签名称选择到对应的标签*/
            h1{
                /*给h1标签添加一个字体颜色*/
                color: red;
            }
            h2,div{
                /*字体颜色*/
                color: blue;
                /*字体大小*/
                font-size: 50px;
            }
        </style>
    </head>
    <body>
        <h1>我是一个h1标题标签</h1>
        <h1>我是一个h1标题标签</h1>
        <h1>我是一个h1标题标签</h1>
        <h2>我是一个h2标题标签</h2>
        <div>我是div标签</div>
    </body>
    </html>
    

引入 css 样式的方式

  • 方式1:行内样式:在标签上直接写 style 属性,属性值就是要设置的样式

    格式:

    <标签 style="属性名:属性值;属性名:属性值;属性名:属性值;..属性名:属性值;"></标签>
    

    作用域:只针对当前的标签有效

  • 方式2:内部(内嵌)样式:在页面中创建一个 style 标签,在标签中写 css 的样式规则

    格式:

    <style type="text/css">
        选择器{
            属性名:属性值;
            ...
            属性名:属性值;
        }
    </style>
    

    作用域:在当前页面中,针对选择器选择到的所有标签都有效

  • 方式3:外部(外联)样式:把 css 的样式规则,写在一个以 .css 结尾的文件中

    需要在 html 中使用 link 标签引入外部的 css 文件使用

    格式:

    <link href="外部css文件的路径" type="text/css" rel="stylesheet" />
    
    • href=“外部css文件的路径” :css 文件一般都放在当前项目的 css 文件夹中,所以一般使用相对路径
    • type=“text/css” :说明引入的文件是文本类型的 css 文件(固定写法),可省略
    • rel=“stylesheet” :stylesheet:样式表,说明引入的 css 文件,是 html 文件的一个样式表(固定写法)

    作用域:css 文件可以被多个页面同时引用,哪个页面引用的,对哪个页面中的标签有效

  • 样式的优先级:行内样式 > 内部样式|外部样式(内部和外部写在后边的样式会覆盖前边的样式)

  • 示例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>引入css样式的方式</title>
    </head>
    <!--内部(内嵌)样式-->
    <style>
        /*选择所有的h1标签*/
        h1{
            color: pink;
        }
    </style>
    <!--外部(外联)样式-->
    <link href="css/1.css"  rel="stylesheet"/>
    <body>
        <!--1.行内样式-->
        <div style="color: red;font-size: 20px">我是一个div</div>
        <div style="color: green">我是一个div</div>
        <div style="color:yellow;">我是一个div</div>
        <!--2.内部(内嵌)样式-->
        <h1 style="color: gold">我是h1标题标签</h1>
        <h1>我是h1标题标签</h1>
    </body>
    </html>
    

    1.css文件

    h1{
        color: blue;
        font-size: 50px;
    }
    

CSS 的选择器

使用何种方式选择要添加样式的 html 标签

基本选择器(元素、id、class 选择器)

  • 元素(标签,标记)选择器:根据元素(标签,标记)的名称,选择对应的元素

    格式:元素(标签,标记)的名称{属性名:属性值;...}

    示例:

    <h1></h1>   	选择器: h1{属性名:属性值;...}
    <div></div>   	选择器: div{属性名:属性值;...}
    
  • id 选择器

    id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式

    需要给元素添加一个 id 属性,通过 id 的属性值选择到元素

    格式:#元素id的属性值{属性名:属性值;...}

    示例:

    <h1 id="d001"></h1>
    <div id="d002"></div>
    
    选择器:#d001{属性名:属性值;...}
    

    注:

    • html 标签的 id 属性不要以数字开头,数字开头的 id 在 Mozilla/Firefox 浏览器中不起作用

    • 不可以给多个 html 元素添加相同的 id 属性值,id 在页面中具有唯一性

      如果多个元素的 id 属性值是相同的,JavaScript 可能会出错

  • class(类)选择器

    class 选择器用于描述一组元素的样式,class 选择器有别于 id 选择器,class 可以在多个元素中使用

    需要给元素添加一个 class 属性,通过 class 的属性值选择到元素

    格式:.元素的class属性值{属性名:属性值;...}

    示例:

    <h1 class="c001"></h1>
    <div class="c001"></div>
    
    选择器: .c001{属性名:属性值;...}
    

    注:

    • **类名的第一个字符不能使用数字!**它无法在 Mozilla 或 Firefox 中起作用。

    • 多个 class 选择器可以使用空格分开

    • 可以指定特定的 HTML 元素使用 class

      例如:所有的 p 元素使用 class=“center” 让该元素的文本居中

      p.center {text-align:center;}
      
  • 案例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS的选择器</title>
    </head>
        <style>
            /*1.元素(标签,标记)选择器*/
            h1{
                color: red;
            }
            a{
                color: green;
            }
            /*2.id选择器*/
            #d001{
                color: #880088;
            }
            /*2.class(类)选择器*/
            .c001{
                color: chocolate;
            }
        </style>
    <body>
        <!--元素(标签,标记)选择器-->
        <h1>标题标签</h1>
        <h1>标题标签</h1>
        <a href="#">我是一个超链接标签</a>
        <a href="#">我是一个超链接标签</a>
        <!--id选择器-->
        <div id="d001">我是一个div</div>
        <h2 id="d002">我是一个h2标题标签</h2>
        <!--class(类)选择器-->
        <div class="c001">我是一个div</div>
        <h2 class="c001">我是一个h2标题标签</h2>
    </body>
    </html>
    

扩展选择器(属性、包含、伪类选择器)

  • 属性选择器:在一个标签选择器后面使用中括号标记,是对一组标签进一步过滤

    语法格式:标签选择器[标签属性=’标签属性值’]{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

  • 包含选择器:两个标签之间使用空格,给指定父标签的后代标签设置样式,是对一个标签内部所有后代标签进一步过滤

    格式:父标签选择器 后代标签选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

  • 案例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS的扩展选择器</title>
        <style>
            /*input{
                !*背景色*!
                background-color: green;
            }*/
            /*给type="text"标签添加样式*/
            input[type='text']{
                background-color: green;
            }
            /*给type="password"标签添加样式*/
            input[type='password']{
                background-color: pink;
            }
    
            /*2.包含选择器(子父类选择器)*/
            /*给div中的div添加样式*/
            div div{
                color: yellow;
            }
            #d001 h3{
                color: aqua;
            }
        </style>
    </head>
    <body>
        <!--1.属性选择器-->
        <input type="text" name="username"/>
        <input type="password" name="password"/>
    
        <!--2.包含选择器(子父类选择器)-->
        <div>我是div</div>
        <div id="d001">
            <div>我是div中的div</div>
            <h3>我是div中的h3</h3>
        </div>
    </body>
    </html>
    

伪类选择器

  • 伪类选择器:描述一个元素的特殊状态

    由于状态的变化是非静态的,所以元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它又会失去这个样式。由此可以看出,它的功能和 class 有些类似,但它是基于文档之外的抽象,所以叫伪类。

  • 常用的伪类选择器

    • 动态伪类选择器

      • :link :元素被定义了超链接但并未被访问过
      • :visited :元素被定义了超链接并已被访问过
      • :active :元素被激活
      • :hover :鼠标悬停
      • :focus :元素获取焦点

      注:在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后;a:active 必须被置于 a:hover 之后。所以,a 标签的这四种伪类选择器的顺序为:a:link ,a:visited,a:hover ,a:active。必须严格按照此规则来设置属性,否则无效。

    • UI 元素状态伪类选择器

      • :checked :选中的复选按钮或者单选按钮表单元素
      • :enabled :所有启用的表单元素
      • :disabled :所有禁用的表单元素

      注:UI 元素状态伪类选择器主要是针对 Form 表单元素进行操作,最常见的使用方式如设置 "type=“text” 有 enable 和 disabled 两种状态,enable 为可写状态,disabled 为不可状态。

    • 结构伪类选择器

      • :fisrt-child :父元素的第一个子元素
      • :last-child :父元素的最后一个子元素的元素
      • :root :元素所在文档的根元素。在 HTML 文档中,根元素始终是 html,此时该选择器与 html 类型选择器匹配的内容相同
      • :nth-child(n) :父元素的第 n 个子元素。其中 n 可以是整数(1,2,3)、关键字(even,odd)、也可以是公式(2n+1),而且 n 值起始值为 1,而不是 0。
      • :nth-last-child(n) :父元素的倒数第 n 个子元素。此选择器与 :nth-child(n) 选择器计算顺序刚好相反,但使用方法都是一样的,其中 :nth-last-child(1) 始终匹配最后一个元素,与 last-child 等同。
      • :nth-of-type(n) :父元素内具有指定类型的第 n 个元素
      • :nth-last-of-type(n) :父元素内具有指定类型的倒数第 n 个元素
      • :first-of-type :父元素内具有指定类型的第一个元素,与 nth-of-type(1) 等同
      • :last-of-tye :父元素内具有指定类型的最后一个元素,与 :nth-last-of-type(1) 等同
      • :only-child :父元素只包含一个子元素,且该子元素匹配元素
      • :only-of-type :选择父元素只包含一个同类型子元素,且该子元素匹配选择元素
      • :empty :选择没有子元素的元素,而且该元素也不包含任何文本节点

      注:使用结构伪类选择器的好处是可以根据元素在文档中所处的位置,来动态地选择元素,从而减少 HTML 文档对 id 或类的依赖,有助于保持代码干净整洁。另外需要注意的是,在结构伪类选择器中,子元素的序号是从 1 开始的。

    • 否定伪类选择器

      • E:not(F) :选择所有除元素 F 外的 E 元素
    • 案例:

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>CSS的扩展选择器</title>
          <style>
              /*伪类选择器*/  
              a:link {color: #FF0000}	/* 未访问的链接 */
              a:visited {color: #00FF00}	/* 已访问的链接 */
              a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
              a:active {color: #0000FF}	/* 选定的链接 */
          </style>
      </head>
      <body>
          <a href="http://www.itcast.cn" target="_blank">点击我到传智</a>
      </body>
      </html>
      

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3357.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!