首页 > 其他分享 >QD1-P21-P22 CSS 基础语法、注释、使用方法

QD1-P21-P22 CSS 基础语法、注释、使用方法

时间:2024-10-12 17:51:57浏览次数:9  
标签:样式 QD1 作用域 P21 样式表 P22 内联 CSS 属性

本节学习:CSS 基础语法和注释,以及如何使用CSS定义的样式。


本节视频

https://www.bilibili.com/video/BV1n64y1U7oj?p=21


CSS 基本语法

CSS(层叠样式表)的基本语法相对简单,由选择器和一组包含在花括号 {}​ 中的声明组成。

Clip_2024-10-12_16-44-47

组成部分:

  • 选择器

    选择器用于指定你想要样式化的 HTML 元素。它们可以是元素名称、类名、ID 或者属性值等。

  • 声明

    声明由一个属性(property)和一个值(value)组成,中间用冒号 :​ 分隔。每个声明结束于一个分号 ;​。

  • 属性

    属性是你要设置的样式特性,如颜色、字体大小、边距等。

  • 值是你想要应用到属性上的具体信息,如特定的颜色代码、像素值等。


实践,如何使用CSS定义的样式

  • 内联样式:直接在 HTML 元素中使用 style ​属性。

Clip_2024-10-12_17-00-52

作用域:只作用于当前元素。

  • 内联样式表:在 HTML 文件的 <head> ​部分使用 <style> ​元素定义样式。

Clip_2024-10-12_16-54-57

作用域:当前页面的元素。

  • 外部样式表:将样式写在外部 CSS 文件中,再在 HTML 文档中通过 <link> ​元素导入 CSS 文件中的样式。

Clip_2024-10-12_17-18-45

Clip_2024-10-12_17-21-01

作用域:所有页面都可以导入 CSS 外部样式。


优先级和作用域

样式生效的优先级规则:就近原则。

样式优先级:内联样式 > 内联样式表 > 外部样式表

样式作用域:外部样式表 > 外部样式表 > 内联样式


规范代码格式

规范的写法应该在 link 标签和 style 标签中使用 type 属性指定导入代码的类型为text/css

Clip_2024-10-12_17-34-45

虽然没有写type属性浏览器也正常加载了,但不能保障所有浏览器都能够识别不规范的CSS代码。

特别是CSS代码存在错误时,浏览器不会报错,但是不能正常加载CSS定义的样式。没有报错信息,这就不好调试了。所以一开始就要把代码写规范。

标签:样式,QD1,作用域,P21,样式表,P22,内联,CSS,属性
From: https://blog.csdn.net/qq_38641599/article/details/142882971

相关文章

  • 洛谷P2224产品加工(DP)
    [HNOI2001]产品加工题目描述某加工厂有A、B两台机器,来加工的产品可以由其中任何一台机器完成,或者两台机器共同完成。由于受到机器性能和产品特性的限制,不同的机器加工同一产品所需的时间会不同,若同时由两台机器共同进行加工,所完成任务又会不同。某一天,加工厂接到\(n\)个......
  • 《Programming from the Ground Up》阅读笔记:p217-p238
    《ProgrammingfromtheGroundUp》学习第11天,p217-p238总结,总计22页。一、技术总结1.Ccompilingp216,Ccompilingissplitintotwostages-thepreprocessorandthemaincompiler。注:感觉这个写法不好,因为preprocessor和compiler都是对象,这里应该指动作。应该是:Cco......
  • 《Programming from the Ground Up》阅读笔记:p181-p216
    《ProgrammingfromtheGroundUp》学习第10天,p181-p216总结,总计34页。一、技术总结第10章主要讲计算机是如何计算的,如十进制、二进制、八进制、十六进制以及浮点数和负数的表示。属于比较基础的内容,如果有一定基础,本章可跳过。1.exponent&mantissa示例:p197,12345.2isst......
  • 洛谷 P2241 统计方形(数据加强版)
    统计方形(数据加强版)题目背景1997年普及组第一题题目描述有一个n×mn\timesmn×m方格的棋盘,求其方格包......
  • COMP2240/COMP6240 - Operating Systems
    Schoolof InformationandPhysicalSciencesCOMP2240/COMP6240-OperatingSystemsAssignment2(15%)SubmitusingCanvasby 11:59pm,Friday27th September2024Tasks:Problem 1,and2arebothCOMP2240& COMP6240 students.Problem3isonlyfor COMP6......
  • 【洛谷】P2261 [CQOI2007] 余数求和 的题解
    【洛谷】P2261[CQOI2007]余数求和的题解洛谷传送门题解这还是蓝题,这还是省选qaq题目看着很简单,但是真的很考验思路,思路对了,代码不到555分钟写完。刚开始做的时......
  • P2163 [SHOI2007] 园丁的烦恼
    中学的时候年轻气盛,应该拿主席树把这道题艹过去了。正好复习离线二维数点,再做了一遍。我们把询问差分安排到x轴上,然后y轴用树状数组统计即可。注意到此题要离散化,但是询问中的x可能不在原序列中。不过这不要紧,记得二分完减一就好。constintN=5e5+5,S=1e7+5;intn,m......
  • P2294 [HNOI2005] 狡猾的商人 两种做法
    贪心#include<bits/stdc++.h>#defineintlonglongusingnamespacestd;constintN=1e3+100;intn,m;structNODE{ intl,r,val; booloperator<(constNODE&h)const { if(l!=h.l) returnl>h.l; returnr>h.r; }};priority_queue......
  • P2285 [HNOI2004] 打鼹鼠
    [HNOI2004]打鼹鼠题目描述鼹鼠是一种很喜欢挖洞的动物,但每过一定的时间,它还是喜欢把头探出到地面上来透透气的。根据这个特点阿牛编写了一个打鼹鼠的游戏:在一个$n\timesn$的网格中,在某些时刻鼹鼠会在某一个网格探出头来透透气。你可以控制一个机器人来打鼹鼠,如果$i$时刻......
  • P2201 数列编辑器(对顶栈)
    include<bits/stdc++.h>usingnamespacestd;definexfirstdefineysecondtypedefpair<int,int>PII;typedeflonglongll;typedefunsignedlonglongull;typedefunsignedintuint;typedefvectorVS;typedefvectorVI;typedefvector<vect......