一. CSS引入方式(一) 内部样式表🔰内部样式表(内嵌样式表)是写到HTML内部，是将所有的CSS代码抽取出来，单独放到一个style标签中；🔰语法：stylediv {color: red;font-size: 12px;}/style🔰style标签理论上可以放在HTML文档的任何地方，但是一般会放在文档的head标签中；🔰通过此种方式可以方便控制当前整个页面中的元素样式设置；(二) 行内样式表🔰行内样式表(内联样式表)是在元素标签内部的style属性中设定CSS样式，适合修改简单样式；🔰语法：div style="color: red; font-size: 12px;"你好/div(三) 外部样式表🔰实际开发都是外部样式表。适合于样式比较多的情况，核心是：样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中；🔰引入外部样式表分两步：1）新建一个后缀名为.css的样式文件，把所有的CSS代码都放入此文件中；2）在HTML页面中，使用link标签引入这个文件；link属性作用rel定义当前文档于被链接文档之间的关系，在这里需要指定为"stylesheet"，表示链接的文档是一个样式表文件；href定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径🔰使用外部样式表设定CSS，通常也被称为外部链接或链接式引入，这种方式是开发中常用的方式；二. CSS简介(一) CSS-美容师🔰CSS也是一种标记语言；🔰CSS主要用于设置HTML的文本内容(字体，大小，对齐方式等)，图片外部(宽高，边框样式，边距)以及版面的布局和外观显示样式；🔰CSS可以美化HTML，让HTML更漂亮，让页面布局更简单；🔰由HTML专注做结构呈现，样式交给CSS，即结构(HTML)与样式(CSS)相分离；(二) 语法规范🔰CSS规则由两个主要的部分构成：选择器以及一条或多条声明；h1 {color: red; font-size: 25px;}↑ ↑ ↑选择器 属性值🔰选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式；🔰属性是对指定的对象设置的样式属性，例如：字体大小，文本颜色等；(三) CSS代码风格1.样式格式书写🔰紧凑格式：h3 {color: red; font-size: 20px;}🔰展开风格：h3 {color: red;fond-size: 20px;}🔰推荐第二种格式，因为更直观；2.空格规范🔰属性值前，冒号后面，保留一个空格；🔰选择器和大括号之间保留空格；三. CSS选择器(一) 基础选择器1. 标签选择器(可以把某一类标签全部选择出来)🔰标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS格式；🔰语法：标签名 {属性1: 属性值1;属性2: 属性值2;……}stylep{color:red;}/stylep猫咪/p2. 类选择器(可以选出一个或多个标签)🔰如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以选择类选择器；🔰语法：.som(类名) {属性1: 属性值1;属性2: 属性值2;……}单类名使用方式🔰结构需要class属性来调用；div青春不常在/div多类名使用方式div抓紧谈恋爱/div🔰在标签class属性中可以写多个类名：🔰多个类名中间必须用空格分开；🔰这个标签就可以分别具有这些类名的样式；🔰使用场景：1）可以把一些标签元素相同的样式(共同的部分)放到一个类里面；2）这些标签都可以调用这个公共的类，然后再调用自己独有的类；bodystyle.blue{color:blue;}/styledivclass="blue"猫咪/div/body3. id选择器(一次只能选出一个标签)🔰id选择器可以为标有特定的HTML元素指定特定的样式；🔰语法：#id名 {属性1: 属性值1;属性2: 属性值2;……}🔰id属性只能在每个HTML文档中出现一次；bodystyle#red{color:red;}/styledivid="blue"猫咪/div/body4. 通配符选择器(选择所有的标签)🔰语法：* {属性1: 属性值1;属性2: 属性值2;……}🔰通配符选择器不需要调用，自动就会给所有的元素使用样式；🔰特殊情况才使用；*{padding:0;margin:0;}5. 优先级内联样式表（权重值 = 1000） id选择器（100） class 选择器（10） 类型（元素）选择器（1） 通配符选择器（0）(二) 复合选择器什么是复合选择器🔰复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的；🔰复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的；🔰常用的复合选择器包括：后代选择器，子选择器，并集选择器，伪类选择器等等；1. 后代选择器🔰后代选择器：又称为包含选择器，可以选择父元素里面的子元素。🔰写法：把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就会成为外层标签的后代。🔰语法：元素1元素2{样式声明}上述语法表示选择元素1里面的所有元素2.🔰元素2可以是儿子，也可以是孙子，只要是元素1的后代即可；🔰元素1和元素2可以是任意基础选择器；bodystyleul li{color:red;}/styleulli1/lili2/lili3/li/ul/body2. 子选择器🔰子元素选择器：只能选择作为某元素的最近一级子元素。🔰语法：元素1元素2 { 样式声明}上述语法表示选择元素1里面的所有直接后代元素2。🔰元素2必须是亲儿子，其孙子，重孙子之类都不归他管；bodystyledivul{color:red;}/styledivulli1/lili2/lili3/li/ul/div/body3. 并集选择器🔰并集选择器：可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明。🔰任何形式的选择器都可以作为并集选择器的一部分；🔰语法：元素1, 元素2 { 样式声明}上述语法表示选择元素1和元素2。bodystyleul, div{color:red;}/styleulli1/lili2/lili3/li/ul 
长河君 · 2026/11/6 1:11:31 · 阅读 1.2k 【前端】【CSS】基础知识
一. CSS引入方式(一) 内部样式表🔰内部样式表(内嵌样式表)是写到HTML内部，是将所有的CSS代码抽取出来，单独放到一个style标签中；🔰语法：stylediv {color: red;font-size: 12px;}/style🔰style标签理论上可以放在HTML文档的任何地方，但是一般会放在文档的head标签中；🔰通过此种方式可以方便控制当前整个页面中的元素样式设置；(二) 行内样式表🔰行内样式表(内联样式表)是在元素标签内部的style属性中设定CSS样式，适合修改简单样式；🔰语法：div style="color: red; font-size: 12px;"你好/div(三) 外部样式表🔰实际开发都是外部样式表。适合于样式比较多的情况，核心是：样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中；🔰引入外部样式表分两步：1）新建一个后缀名为.css的样式文件，把所有的CSS代码都放入此文件中；2）在HTML页面中，使用link标签引入这个文件；link属性作用rel定义当前文档于被链接文档之间的关系，在这里需要指定为"stylesheet"，表示链接的文档是一个样式表文件；href定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径🔰使用外部样式表设定CSS，通常也被称为外部链接或链接式引入，这种方式是开发中常用的方式；二. CSS简介(一) CSS-美容师🔰CSS也是一种标记语言；🔰CSS主要用于设置HTML的文本内容(字体，大小，对齐方式等)，图片外部(宽高，边框样式，边距)以及版面的布局和外观显示样式；🔰CSS可以美化HTML，让HTML更漂亮，让页面布局更简单；🔰由HTML专注做结构呈现，样式交给CSS，即结构(HTML)与样式(CSS)相分离；(二) 语法规范🔰CSS规则由两个主要的部分构成：选择器以及一条或多条声明；h1 {color: red; font-size: 25px;}↑ ↑ ↑选择器 属性值🔰选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式；🔰属性是对指定的对象设置的样式属性，例如：字体大小，文本颜色等；(三) CSS代码风格1.样式格式书写🔰紧凑格式：h3 {color: red; font-size: 20px;}🔰展开风格：h3 {color: red;fond-size: 20px;}🔰推荐第二种格式，因为更直观；2.空格规范🔰属性值前，冒号后面，保留一个空格；🔰选择器和大括号之间保留空格；三. CSS选择器(一) 基础选择器1. 标签选择器(可以把某一类标签全部选择出来)🔰标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS格式；🔰语法：标签名 {属性1: 属性值1;属性2: 属性值2;……}stylep{color:red;}/stylep猫咪/p2. 类选择器(可以选出一个或多个标签)🔰如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以选择类选择器；🔰语法：.som(类名) {属性1: 属性值1;属性2: 属性值2;……}单类名使用方式🔰结构需要class属性来调用；div青春不常在/div多类名使用方式div抓紧谈恋爱/div🔰在标签class属性中可以写多个类名：🔰多个类名中间必须用空格分开；🔰这个标签就可以分别具有这些类名的样式；🔰使用场景：1）可以把一些标签元素相同的样式(共同的部分)放到一个类里面；2）这些标签都可以调用这个公共的类，然后再调用自己独有的类；bodystyle.blue{color:blue;}/styledivclass="blue"猫咪/div/body3. id选择器(一次只能选出一个标签)🔰id选择器可以为标有特定的HTML元素指定特定的样式；🔰语法：#id名 {属性1: 属性值1;属性2: 属性值2;……}🔰id属性只能在每个HTML文档中出现一次；bodystyle#red{color:red;}/styledivid="blue"猫咪/div/body4. 通配符选择器(选择所有的标签)🔰语法：* {属性1: 属性值1;属性2: 属性值2;……}🔰通配符选择器不需要调用，自动就会给所有的元素使用样式；🔰特殊情况才使用；*{padding:0;margin:0;}5. 优先级内联样式表（权重值 = 1000） id选择器（100） class 选择器（10） 类型（元素）选择器（1） 通配符选择器（0）(二) 复合选择器什么是复合选择器🔰复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的；🔰复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的；🔰常用的复合选择器包括：后代选择器，子选择器，并集选择器，伪类选择器等等；1. 后代选择器🔰后代选择器：又称为包含选择器，可以选择父元素里面的子元素。🔰写法：把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就会成为外层标签的后代。🔰语法：元素1元素2{样式声明}上述语法表示选择元素1里面的所有元素2.🔰元素2可以是儿子，也可以是孙子，只要是元素1的后代即可；🔰元素1和元素2可以是任意基础选择器；bodystyleul li{color:red;}/styleulli1/lili2/lili3/li/ul/body2. 子选择器🔰子元素选择器：只能选择作为某元素的最近一级子元素。🔰语法：元素1元素2 { 样式声明}上述语法表示选择元素1里面的所有直接后代元素2。🔰元素2必须是亲儿子，其孙子，重孙子之类都不归他管；bodystyledivul{color:red;}/styledivulli1/lili2/lili3/li/ul/div/body3. 并集选择器🔰并集选择器：可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明。🔰任何形式的选择器都可以作为并集选择器的一部分；🔰语法：元素1, 元素2 { 样式声明}上述语法表示选择元素1和元素2。bodystyleul, div{color:red;}/styleulli1/lili2/lili3/li/ul