• css的概念+书写位置+CSS样式规则与应用案例

    css的概念

    CSS是层叠样式表（Cascading Style Sheets）的缩写。它是一种用于描述网页样式的语言，包含了文本、布局、颜色、字体、图像等方面的样式。通过CSS，可以将网页的表现和内容分离开来，从而使网页更容易进行维护和修改。

    CSS包括以下几个主要概念：

    1. 选择器：用于选择要应用样式的HTML元素。可以根据元素的标签名、类名、ID等属性来进行选择。

    2. 样式规则：包括一个选择器和一组属性-值对，用于描述要应用的样式。例如，可以使用样式规则来定义元素的字体、颜色、边框等属性。

    3. 层叠和继承：CSS中的样式可以通过层叠和继承来影响一个元素的最终样式。层叠是指当有多个样式规则应用到同一个元素时，如何决定最终的样式；继承是指某些样式属性可以被子元素继承，因此可以减少样式规则的数量。

    4. 盒子模型：CSS中的每个元素都是一个矩形盒子，包含内容、内边距、边框和外边距。可以使用CSS来控制这些盒子的大小、位置和样式。

    5. 布局：CSS可以用于控制页面的布局，包括块级元素和行内元素的排列方式、浮动、定位等。

    这些概念组合在一起，可以帮助开发人员设计出漂亮、可维护和易于使用的网页。

    CSS 代码书写位置

    CSS 代码可以书写在 HTML 文档的 <head> 标签中的 <style> 标签内，也可以将 CSS 代码写在外部的 CSS 文件中，然后在 HTML 中通过 <link> 标签引用该文件。

    在 <head> 标签内的 <style> 标签中书写 CSS 代码的示例：

    1. html>
    2. <html>
    3. <head>
    4. 	<title>My Websitetitle>
    5. 	<style>
    6. 		body {
    7. 			background-color: #f2f2f2;
    8. 			font-family: Arial, sans-serif;
    9. 		}
    10.  
    11. 		h1 {
    12. 			color: blue;
    13. 			font-size: 36px;
    14. 		}
    15.  
    16. 		p {
    17. 			color: green;
    18. 			font-size: 18px;
    19. 		}
    20. 	style>
    21. head>
    22. <body>
    23. 	<h1>Welcome to My Websiteh1>
    24. 	<p>This is some sample text.p>
    25. body>
    26. html>

    将 CSS 代码写在外部的 CSS 文件中，并通过 <link> 标签引用的示例：

    HTML 文件：

    1. html>
    2. <html>
    3. <head>
    4. 	<title>My Websitetitle>
    5. 	<link rel="stylesheet" type="text/css" href="styles.css">
    6. head>
    7. <body>
    8. 	<h1>Welcome to My Websiteh1>
    9. 	<p>This is some sample text.p>
    10. body>
    11. html>

    CSS 文件（styles.css）：

    1. body {
    2. 	background-color: #f2f2f2;
    3. 	font-family: Arial, sans-serif;
    4. }
    5.  
    6. h1 {
    7. 	color: blue;
    8. 	font-size: 36px;
    9. }
    10.  
    11. p {
    12. 	color: green;
    13. 	font-size: 18px;
    14. }

    CSS样式规则

    CSS样式规则指定如何将一个HTML元素显示为样式。每个CSS样式规则都由一个选择器和一组规则构成。选择器指定要应用样式的HTML元素，规则指定要应用的样式。

    例如，以下CSS样式规则将设置所有段落元素的文本颜色为红色：

    1. p {
    2.   color: red;
    3. }

    在上面的规则中，“p”是选择器，它选择所有段落元素。大括号内的“color: red;”是规则，它指定要应用的样式是文本颜色为红色。

    可以指定多个规则，分别用分号分隔：

    1. p {
    2.   color: red;
    3.   font-size: 16px;
    4. }

    上面的规则设置了段落元素的文本颜色为红色，字体大小为16像素。

    CSS样式规则 使用注意事项

    使用CSS样式规则时需要注意以下几点：

    1. 语法正确： CSS样式规则应该按照正确的语法书写，包括使用正确的选择器、属性和值等。

    2. 选择器合理： 选择器应该根据需要选择正确的元素。不要使用冗余的选择器，这会影响性能。

    3. 属性值正确： 属性值应该根据需要选择正确的值。不要使用无意义的或错误的属性值。

    4. 兼容性考虑： 在编写CSS样式规则时需要考虑浏览器的兼容性，避免使用不被大多数浏览器支持的属性和值。

    5. 样式冲突： 当多个CSS样式规则应用于同一个元素时，需要注意样式冲突的问题。可以使用优先级、继承和层叠等方法解决这个问题。

    6. 代码结构清晰： CSS样式规则应该按照一定的结构进行组织，包括缩进、注释和空格等，以便后期维护和修改。

    7. 可读性好： CSS样式规则应该易于理解和阅读，不要使用过于复杂的语法和选择器。

  • 相关阅读:
    LeetCode 2342. 数位和相等数对的最大和
    CIE A-Level化学Paper 1真题讲解（5）
    【Hack The Box】windows练习-- Buff
    css进阶知识点速览
    LLM之幻觉（一）：大语言模型幻觉解决方案综述
    【蓝桥每日一题]-前缀和与差分（保姆级教程 篇1）
    acwing 最大数
    如何离线安装和使用pymysql操作mysql数据库
    AOP基础知识了解
    【每日刷题】Day72
  • 原文地址：https://blog.csdn.net/zxcv321zxcv/article/details/133363277