• html 笔记：CSS

    1 什么是CSS

    • CSS 指层叠样式表 (Cascading Style Sheets)
      • 样式定义如何显示 HTML 元素
      • 样式通常存储在样式表中

    1.1 css的语法格式

    1.1.1 选择器种类

    • HTML选择器： 重新定义HTML的某种标签的显示格式
    • id选择器 对于HTML文档中的某个标签，定义它的显示格式
    • class选择器    对于HTML文档中的某类标签，定义它的显示格式

    1.1.2 HTML选择器

    1. html>
    2. <html>
    3.    <head>
    4.       <title> HTML选择器的使用title>
    5.  	    <style>
    6. 		   h1 {
    7. 		      color:red;                 
    8. 		      font-size:15;                
    9. 		      font-family: 微软雅黑;           
    10. 	           }
    11. 	   style>
    12.     head>
    13.     <body>
    14. 	    <h1> HTML选择器的使用h1>
    15.      body>
    16. html>
    17.

    1.1.3 ID选择器

    前面加#

    1. html>
    2. <html>
    3.    <head>
    4.       <title> HTML选择器的使用title>
    5.  	    <style>
    6. 		   #CSSID1 {
    7. 		      color:blue;                 
    8. 		      font-size:35;                
    9. 		      font-family: 楷体;           
    10. 	           }
    11. 	   style>
    12.     head>
    13.     <body>
    14. 	    <h1> 不使用ID选择器h1>
    15. 		<h1 id='CSSID1'> 使用ID选择器h1>
    16.      body>
    17. html>

    1.1.4 class选择器

    前面加.

    1. html>
    2. <html>
    3.    <head>
    4.       <title> HTML选择器的使用title>
    5.  	    <style>
    6. 		   .CSSID1 {
    7. 		      color:blue;                          
    8. 	           }
    9. 			.CSSID2 {                 
    10. 		      font-size:15;                
    11. 		      font-family: 楷体;           
    12. 	           }
    13. 	   style>
    14.     head>
    15.     <body>
    16. 	    <h1> 不使用class选择器h1>
    17. 		<h1 class='CSSID1'> 使用一个class选择器h1>
    18. 		<h1 class='CSSID1 CSSID2'> 使用两个class选择器h1>
    19.      body>
    20. html>
    21.

     

    1.1.5 class选择器与ID选择器的区别（唯一性）

    • 在一个 HTML 文档中，每个 id 的值必须是唯一的。一个元素不能有多个 id，并且在一个页面中每个 id 只能使用一次。
    • class 可以用于多个元素，而且一个元素可以有多个 class。

    2 三种不同的样式表

    2.1 嵌入样式表

    前面1.1.2~1.1.4的内容

    2.2 内联样式表

    写在body里面

    1. html>
    2. <html>
    3.    <head>
    4.       <title> HTML选择器的使用title>
    5.     head>
    6.     <body>
    7. 	    <h1> 不使用CSS内联样式表h1>
    8. 		<h1 style='color:blue;                 
    9. 		      font-size:35;                
    10. 		      font-family: 楷体;'> 使用CSS内联样式表h1>
    11.      body>
    12. html>

    2.3 外联样式表

    首先建立一个外部的css格式的文件（h1.css)，内容和class样式表一致：

    1. html>
    2. <html>
    3.    <head>
    4.       <title> HTML选择器的使用title>
    5. 	  <link rel='stylesheet' href='h1.css'>
    6. 	  
    7.     head>
    8.     <body>
    9. 	    <h1> 不使用class选择器h1>
    10. 		<h1 class='CSSID1'> 使用一个class选择器h1>
    11. 		<h1 class='CSSID1 CSSID2'> 使用两个class选择器h1>
    12.      body>
    13. html>
    • rel 属性的值 "stylesheet" 表示被链接文档是一个样式表，并且它应用于当前的 HTML 文档
    • href指定了被链接文档的位置

  • 相关阅读:
    动态图算法：EvolveGCN——融合GNN和RNN的离散型动态图神经网络
    JavaScript 中创建函数的多种方式
    el-table筛选数据
    unity【动画】操作_角色动画控制器 c#
    【Ubuntu同步系统时间】
    【2023】Jenkins入门与安装
    HADOOP 的 LZO 压缩 hadoop-lzo 编译
    将按键放到输入框内：
    96核的AMD锐龙Threadripper PRO 7995WX性能如何？
    Python： 开始使用工厂模式设计
  • 原文地址：https://blog.csdn.net/qq_40206371/article/details/133640601