CSS学习
文章目录
前言
本文主要围绕什么是css、css选择器、css常用属性以及盒子模型展开介绍。
一、CSS是什么？
CSS是层叠样式表（Cascading Style Sheets）。是一种用来表现网页样式的计算机语言。CSS是能够真正做到网页表现与内容分离的一种样式设计语言。网页有多层结构，通过CSS可以为每一层设置样式，用户能看到最上的一层，CSS用来设置网页中元素的样式。
1.使用CSS修改元素的样式的三种方式
- 行内样式（内联样式）
在标签内部通过style属性来设置元素的样式
<p color: rgb(47, 90, 49);font-size: 20px;>超文本标记语言</p>
缺点：只能对一个标签有效，当样式发生变化时不方便维护。
2. 内部样式
将样式编写到head标签中的style标签里
<style>
h1{
color: darkblue;
background-color: rgb(6, 95, 95);
font-family: 'Courier New', Courier, monospace;
}
p{
color: rgb(172, 21, 21);
}
</style>
优点：可以为多个标签设置样式，通过CSS选择器来选中元素并为其设置样式。
缺点：只能对一个网页起作用，不能跨页面使用。
3. 外部样式
将CSS样式编写在一个外部的CSS文件里，然后通过link标签引入外部文件
<link rel="stylesheet" href="./style.css">
优点：外部样式表用link标签引入，意味着可以随意引用，使样式在不同的页面中复用，将样式编写外部CSS文件，可以使用浏览器的缓存机制，从而加快网页的加载速度，提高用户体验。
2.CSS基本语法
/*CSS基本语法：选择器 声明块*/
/*选择器：通过选择器选中页面中指定的元素*/
/*声明块：通过声明块为指定元素设置样式*/
p{
color: rgb(80, 134, 26);
font-size: 20px;
}
.box{
color: rgb(47, 90, 49);
font-size: 20px;
}
#box{
color: rgb(27, 90, 49);
font-size: 20px;
}
是名值对结构，以“：”连接，以“;”结尾
二、CSS选择器
1.常用选择器
- 元素选择器：根据标签名来选中指定元素
语法：标签名{}
p{
color: rgb(80, 134, 26);
font-size: 20px;
}
- id选择器：根据id值来选择一个元素
语法：#id属性值{}
#two{
color: rgb(52, 27, 192);
font-size: 20px;
}
- 类选择器：根据元素的class属性选中一组元素
语法：.class属性值{}
#three{
color: rgb(52, 27, 192);
font-size: 20px;
}
- 通配选择器：选中页面中所有元素
语法：*{}
*{
color:#000;
font-size: 20px;
}
2.复合选择器
- 交集选择器：选择同时复合多个条件的元素
语法：选择器1选择器2…{}
div span{
color:#bfc;
font-size: 20px;
}
- 交集选择器：同时选择多个选择器对应的元素4
语法：选择器1、选择器2、选择器3…{}
h1 p span{
color:#bfc;
font-size: 20px;
}
3.关系选择器
先来认识一下元素的关系：
- 父元素
- 子元素
- 祖先元素
- 后代元素
- 兄弟元素
- 子元素选择器：选中指定父元素的子元素
语法：父元素>子元素{}
div>span{
color:#bfc;
font-size: 20px;
}
- 后代元素选择器：选中指定元素内的指定后代元素
语法：祖先 后代{}
div p span {
color:#bfc;
font-size: 20px;
}
else
选择下一个兄弟元素 语法：前一个+下一个{}
选择下面所有兄弟元素 语法：兄~弟{}
4.属性选择器
- [属性名]选择含有该属性的元素
- [属性名=属性值]选择含有该属性和属性值的元素
- [属性名^=属性值]选择含有该属性和以该属性值为开头的元素
- [属性名$=属性值]选择含有该属性和以该属性值结尾的元素
- [属性名*=属性值]选择含有该属性和包含属性值的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>属性选择器</title>
<style>
/*[属性名]选择含有该属性的元素*/
p[title] {
color: #bfc;
}
/*[属性名=属性值]选择含有该属性和属性值的元素*/
p[title=abc] {
color: brown;
}
/*[属性名^=属性值]选择含有该属性和以该属性值为开头的元素*/
p[title^=abcd] {
color: tomato;
}
/*[属性名$=属性值]选择含有该属性和以该属性值结尾的元素*/
p[title$=ef] {
color: blue;
}
/*[属性名*=属性值]选择含有该属性和包含属性值的元素*/
p[title*=def] {
color: blue;
}
</style>
</head>
<body>
<p title="abc">我是p1元素</p>
<p title="abcdef">我是p2元素</p>
<p title="abcdef">我是p3元素</p>
</body>
</html>
5.伪类选择器
伪类是用来描述一个元素的特殊状态
- ul>li:first-child 选中第一个元素
- ul>li:last-child 选中最后一个元素
- ul>li:nth-child() 选中第n个元素
- ul>li:nth-child(2n) 选中序号为偶数的元素
- ul>li:nth-child(2n+1) 选中序号为奇数的元素
<style>
/*选中第一个元素*/
ul>li:first-child{
color: #bfc;
}
/*选中最后一个元素*/
ul>li:last-child{
color: #bfc;
}
/*选中第n个元素*/
ul>li:nth-child(){
color: #bfc;
}
/*选中序号为偶数的元素*/
ul>li:nth-child(2n){
color: #bfc;
}
/*选中序号为奇数的元素*/
ul>li:nth-child(2n+1){
color: #bfc;
}
</style>
6.超链接的伪类
<style>
/*未访问过的连接*/
a:link{
color: #bfc;
}
/*访问过的连接*/
a:visited{
color: #bfc;
}
/*用来表示鼠标移入的状态*/
a:hover{
color: #bfc;
}
/*用来表示鼠标点击时的状态*/
a:active{
color: #bfc;
}
</style>
7.伪元素
使用::开头 来表示页面中一些特殊并不真实存在的元素（特殊的位置）
- ::first-letter 表示选中第一个字母
- ::first-line 表示选中第一行
- ::selection 表示选中的内容
- ::before 表示元素的开始位置
- ::after 表示元素的最后位置
(::before ::after必须结合content属性)
其他的内容
优先级
- 内联框架 1,0,0,0
- id选择器 0,1,0,0
- 类选择器、属性选择器或伪类 0,0,1,0
- 元素和伪元素 0,0,0,1
- 通配选择器 0,0,0,0
！import优先级最高，尽量不用
三、 CSS常用属性
| 属性 | 描述 |
|---|---|
| color: rgb(10, 2, 17); | 设置颜色 |
| font-size: 2pc; | 设置字号 |
| background-color: blueviolet; | 设置背景颜色 |
| font-family: | 设置字体样式 |
| width： | 设置宽度 |
| heigh： | 设置高度 |
| background-repeat： | 设置是否平铺 |
四、盒子模型
CSS-将页面中所有元素都设置为一个举行的盒子，将元素设置为矩形的盒子，对页面的布局就变成不同的盒子摆放到不同的位置。
每个盒子的组成
内容区（content）
边框（border）
内边距（padding）
外边距（margin）
1.内容区（content）
元素中所有子元素和文本内容都在内容区中排列，大小由width属性和height属性来设置。
2.边框（border）
边框属于盒子的边缘，设置边框至少需要设置三个属性
1.边框宽度 border-width：10px;
2.边框颜色 border-color：red；
3.边框样式 border-style：solid;
border-width 指定边框的宽度，可省略，有默认值3px.
用来指定4个方向边框的宽度，四个值：上、右、下、左
border-color 指定边框的颜色，同时分别指定4个方向的颜色，可省略（默认值为black）
border-style 指定边框样式（默认值：none）
solid表示实线、dotted表示点状虚线、dashed表示虚线、double表示双线
| border-xx | 含义 |
|---|---|
| border-top: 0px; | 上边的边框 |
| border-bottom: 0px; | 下边的边框 |
| border-left: 0px; | 左边的边框 |
| border-right: 0px; | 右边的边框 |
border简写属性：可设置边框所有相关样式，且无顺序要求
3.内边距（padding）
内边距的设置会影响盒子的大小，背景颜色等于内容分区的颜色。
盒子的可见框的大小由内容区、内边距和边框共同决定。
| padding-xx | 含义 |
|---|---|
| padding-top: 0px; | 上边的内边距 |
| padding-bottom: 0px; | 下边的内边距 |
| padding-left: 0px; | 左边的内边距 |
| padding-right: 0px; | 右边的内边距 |
padding简写属性：可设置内边距（方向：上、右、下、左）
4.外边距（margin）
外边距只会影响盒子的位置，不影响可见框的大小。
| margin-xx | 含义 |
|---|---|
| margin-top: auto; | 上外边距（正值）下边的元素移动 |
| margin-bottom: auto; | 下外边距（正值）盒子往左移 |
| margin-left: auto; | 左外边距（正值）盒子往右移 |
| margin-right: auto; | 右外边距（默认情况下不会产生任何效果） |
margin简写属性：可设置外边距。
5.盒子的水平方向布局
元素的水平布局由以下几个属性共同决定：
margin-left
border-left
padding-left
width
padding-right
border-right
margin-right
以上的值相加=其父元素的内容区宽度
若不满足，则称过度约束，等式会自动调整。
注：width、margin-left、margin-right可设置为auto，
- 若将宽度和一个外边距设置为auto，则宽度最大。
- 若width、margin-left、margin-right均为auto，则width最大，外边距等于0.
- 若margin-left、margin-right的值为auto，width的值固定，则水平居中。
6.盒子的垂直方向布局
默认情况下父元素的高度会被内容撑开，子元素在父元素内容区中排列，若子元素>父元素，则溢出，用overflow属性可以设置父元素如何处理溢出的子元素。
| overflow | 含义 |
|---|---|
| overflow: auto; | 根据需要生成滚动条 |
| overflow: hidden; | 溢出的元素会被隐藏 |
| overflow: scroll; | 生成两个滚动条 |
| overflow: visible; | 默认值，仍会溢出 |
| overflow-x: auto; | 水平处理 |
| overflow-y: auto; | 垂直处理 |
7.盒子外边距的折叠
外边距的折叠：相邻的垂直方向的外边距会发生重叠现象。
兄弟元素间垂直相邻外边距（均为正值）会取两者中间较大值，（一正一负）取两者和，（均负）取绝对值较大的。
父子元素间相邻外边距子元素的外边距会传递给父元素。
8.行内元素的盒子模型
- 行内元素不支持设置宽度和高度
- 行内元素可以设置padding、border、margin。
display属性：用来展示元素的显示类型
- inline 将元素设置为行内元素
- block 将元素设置为块元素
- inline-block 将元素设置为行内块元素（既可以设置高度和宽度，又不会独占一行）
- table 将元素设置为表格
- none 元素不在页面中显示
visiblity属性：用来设置元素的显示状态
- visible 默认值，元素在页面中正常显示
- hidden 元素在页面中隐藏，不显示（占据位置）
总结
本文主要围绕什么是css、css选择器、css常用属性以及盒子模型展开介绍。css的属性及盒子模型方面的知识广博，需要常用常记。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
