• CSS 使用

    目录

    一、CSS  简介

    二、CSS 使用

    1、 语法规则

    2、CSS和HTML的结合方式

    1）第一种方式

    2）第二种方式

    3）第三种方式

    3、CSS 选择器

    1）标签名选择器

    2）id  选择器

    3）class  选择器（类选择器）

    4）组合选择器

    一、CSS  简介

    CSS 是「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    二、CSS 使用

    1、 语法规则

    • 选择器：浏览器根据“选择器”决定受 CSS 样式影响的 HTML 元素（标签）。
    • 属性：是你要改变的样式名，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明。
    • 多个声明：如果要定义不止一个声明，则需要用分号将每个声明分开。虽然最后一条声明的最后可以不加分号(但尽量在每条声明的末尾都加上分号) 

    2、CSS和HTML的结合方式

    1）第一种方式

    在标签的 style 属性上设置”key:value value;”，修改标签样式。

    1. html> 
    2. <html lang="en"> 
    3. <head>
    4.     <meta charset="UTF-8"> 
    5.     <title>Titletitle>
    6. head> 
    7. <body>
    8.  
    9.     
    10.  
    11.     <div style="border: 1px solid red;">div标签  1div>
    12.     <span style="border: 1px solid red;">span标签  1span> 
    13.  
    14. body> 
    15. html>

    缺点：

    1. 如果标签多了，样式多了，代码量非常庞大。
    2. 可读性非常差。
    3. Css  代码没什么复用性可方言。 

    2）第二种方式

    1. html> 
    2. <html lang="en"> 
    3. <head>
    4.     <meta charset="UTF-8"> 
    5.     <title>Titletitle>
    6.      
    7.     <style type="text/css">
    8.     /*定义div、span标签，分别修改标签的样式为：边框  1个像素，实线，红色。*/ 
    9.         div{
    10.             border: 1px solid red; 
    11.         }
    12.         span{
    13.             border: 1px solid red; 
    14.         }
    15.     style> 
    16. head>
    17. <body>
    18.     <div>div标签 1div> 
    19.     <div>div标签 2div>
    20.     <span>span标签 1span> 
    21.     <span>span标签 2span>
    22. body> 
    23. html>

    缺点：

    1. 只能在同一页面内复用代码，不能在多个页面中复用  css  代码。
    2. 维护起来不方便，实际的项目中会有成千上万的页面，要到每个页面中去修改。工作量太大了。

    3）第三种方式

    把 css 样式写成一个单独的 css 文件，再通过  link  标签引入即可复用。

    1. html> 
    2. <html lang="en"> 
    3. <head>
    4.     <meta charset="UTF-8"> 
    5.     <title>Titletitle>
    6.     
    7.     <link rel="stylesheet" type="text/css" href="1.css"/> 
    8. head>
    9. <body>
    10.     <div>div标签 1div> 
    11.     <div>div标签 2div>
    12.     <span>span标签 1span> 
    13.     <span>span标签 2span>
    14. body> 
    15. html>

    3、CSS 选择器

    1）标签名选择器

    标签名选择器的格式是： 

    1. 标签名{
    2.     属性：值; 
    3. }

    标签名选择器，可以决定哪些标签被动的使用这个样式。

    1. html> 
    2. <html>
    3. <head>
    4.     <meta charset="UTF-8"> 
    5.     <title>CSS选择器title> 
    6.     <style type="text/css">
    7.         div{
    8.             border: 1px solid yellow; 
    9.             color: blue;
    10.             font-size: 30px; 
    11.         }
    12.         span{
    13.             border: 5px dashed blue; 
    14.             color: yellow;
    15.             font-size: 20px; 
    16.         }
    17.     style> 
    18. head> 
    19. <body>
    20.     
    21.     <div>div标签 1div> 
    22.     <div>div标签 2div> 
    23.     <span>span标签  1span> 
    24.     <span>span标签  2span>
    25. body> 
    26. html>

    2）id  选择器

    id  选择器的格式是：

    1. #id 属性值{ 
    2.     属性：值;
    3. }

    id  选择器，可以让我们通过  id  属性选择性的去使用这个样式。

    1. html> 
    2. <html>
    3. <head>
    4.     <meta charset="UTF-8"> 
    5.     <title>ID选择器title> 
    6.     <style type="text/css">
    7.         #id001{
    8.             color: blue; 
    9.             font-size: 30px;
    10.             border: 1px yellow solid;
    11.         }
    12.         #id002{
    13.             color: red;
    14.             font-size: 20px;
    15.             border: 5px blue dotted ; 
    16.         }
    17.     style> 
    18. head> 
    19. <body>
    20.     <div id="id002">div标签 1div> 
    21.     <div id="id001">div标签 2div>
    22. body> 
    23. html>

    3）class  选择器（类选择器）

    class  类型选择器的格式是：

    1. .class 属性值{
    2.     属性：值; 
    3. }

    class  类型选择器，可以通过 class 属性有效的选择性地去使用这个样式。

    1. html> 
    2. <html>
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>class类型选择器title> 
    6.     <style type="text/css">
    7.         .class01{
    8.             color: blue;
    9.             font-size: 30px;
    10.             border: 1px solid yellow; 
    11.         }
    12.         .class02{
    13.             color: grey;
    14.             font-size: 26px; 
    15.             border: 1px solid red;
    16.         }
    17.     style> 
    18. head> 
    19. <body>
    20.     <div class="class02">div标签  class01div> 
    21.     <div class="class02">div标签div>
    22.     <span class="class02">span标签  class01span> 
    23.     <span>span标签  2span>
    24. body> 
    25. html>

    4）组合选择器

    组合选择器的格式是：

    1. 选择器  1，选择器  2，选择器  n{ 
    2.     属性：值;
    3. }

    组合选择器可以让多个选择器共用同一个  css  样式代码。

    1. html> 
    2. <html>
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>class类型选择器title> 
    6.     <style type="text/css">
    7.         .class01 , #id01{ 
    8.             color: blue; 
    9.             font-size: 20px;
    10.             border: 1px yellow solid; 
    11.         }
    12.     style> 
    13. head>
    14. <body>
    15.     <div id="id01">div标签  class01div> <br /> 
    16.     <span>span 标签span> <br />
    17.     <div>div标签div> <br />
    18.     <div>div标签 id01div> <br /> 
    19. body>
    20. html>

  • 相关阅读:
    全连接网络实现回归【房价预测的数据】
    我们来谈谈什么是架构
    大数据Doris（四）：直接编译（CentOS/Ubuntu）准备
    Linux学习之MySQL主键、外键、索引
    Maven 从入门到精通
    软件设计模式白话文系列（十二）组合模式
    Java中如何执行多条shell/bat命令 2023年验证通过
    面试突击34：如何使用线程池执行定时任务？
    9月27日复习
    微信小程序托福考试资料源码系统完整版（带java后台）
  • 原文地址：https://blog.csdn.net/qq_51409098/article/details/126175099