学习网页结构

最新推荐文章于 2024-11-12 22:56:44 发布

今天要早睡 Zzz

最新推荐文章于 2024-11-12 22:56:44 发布

阅读量53

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/qq_63277274/article/details/127928812

版权

CSS的书写位置

第一种方式：内联样式/行内样式
书写位置：开始标签 style属性，讲css样式写在style属性值里面
可以写多个样式，只要用分隔号；隔开即可
优缺点：
优点：有针对性
缺点：①结构和表现耦合了 ②修改起来不方便
注意：不推荐使用

第二种方式：内部样式表
head标签内部，写一个style标签，通过选择器选中对应的html结构，在花括号里面书写css样式可以写多组样式，样式之间用分隔号；隔开，最后一个样式可以不加分隔号，但是一般都加。
优缺点：
优点：方便，修改简单
缺点：复用率不高
注意:css比较多的时候，不推荐使用

第三种方式：外部样式表
书写位置：在HTML文件外新建一个.css文件，在css文件里面通过选择器选中对应的HTML结构，在花括号里面书写css样式，然后在head标签内写一个link标签将对应的css文件引入到HTML文件内
注意：推荐使用

CSS的语法

样式名;样式值
color 设置主体颜色 red、green、yellow
font-size 设置主体的大小 px
background-color 设置背景颜色 red、green、yellow

选择器声明块
选择器：有多种选择器
声明块：具体的css样式，是写在花括号里面
样式的结构：名值对结构（样式名：样式值；），可以写多组样式，用分隔号隔开

四种常用的选择器

①元素选择器（标签选择器）
作用：选中对应标签的内容
语法：标签名{css样式......}
②id选择器
作用:选中对应id属性值的内容
语法：#id属性值（起的id）
注意：id属性值不能重复使用
例子：#p1{}，#p2{}......
③class选择器
class选择题的用法跟id选择器是一样的，只不过class属性值可以重复使用
作用：选中对应class属性值的内容
语法：.class属性值{}（.属性值）
注意：class属性值可以起多个，中间用空格隔开
例子：.a{}，.b1{}....
④通配选择器
选中所有的标签进行设置
语法：*{}

两种复合选择器

①交集选择器
作用:选中同时符合多个条件的内容
语法：选择器1选择器2选择器3......{}
注意：如果选择器当中有元素选择器，元素选择器必须放在最前面
例子：p#p1.pp{}，
②并集选择器（群组选择器）
作用:同时选中对应的内容
语法：选择器1，选择器2，选择器3.....{}

元素之间的关系

1.父子关系
父元素包含子元素的元素
子元素直接被父元素包含的元素
2.祖先后代关系
祖先元素直接或间接包含元素的元素
后代元素直接或间接被包含的元素
3.兄弟关系
拥有共同父元素的元素

元素选择器

①子元素选择器
作用：通过指定的父元素指定指定的子元素
语法：父元素>子元素{}
例子：#red>.green{}
.pp>em{}
②后代选择器
作用：通过指定的祖先元素找到指定的后代元素
语法：祖先元素（空格）后代元素
例子：.class .red{}
#red p{}
③下一个兄弟选择器
作用：通过指定的兄长找到紧挨着我的兄弟
语法：兄+弟{}
④选择下面所有的兄弟（前面的不选）
作用：通过指定的兄长找到下面所有的兄弟
语法：兄~弟{}
例子：#red~.p1{}