【前端】一文带你了解 CSS
明天不吃。 2024-09-10 15:03:02 阅读 85
文章目录
1. CSS 是什么2. CSS 引入方式2.1 内部样式2.2 外部样式2.3 内联样式
3. CSS 常见选择器3.1 基础选择器3.1.1 标签选择器3.1.2 类选择器3.1.3 id 选择器3.1.4 通配符选择器
3.2 复合选择器3.2.1 后代选择器
4. CSS 常用属性4.1 字体相关4.2 文本相关4.3 背景相关4.4 设置圆角矩形
5. 块级元素与行内元素5.1 定义5.2 区别
6. CSS 盒子模型6.1 边框属性6.2 内边距6.3 外边距
7. 弹性布局
1. CSS 是什么
【CSS 含义】层叠样式表，英文全称 —— Cascading Style Sheets
层叠式样表听起来比较高大上，我们对此进行拆分理解：
1）层叠：指的是针对一个 html 的元素或者标签，可以同时应用多组 CSS 样式，多组样式叠加在一起
2）样式：大小、位置、间距、颜色、字体、边框、背景等等，统称为"样式"，描述了一个网页长的样子
【CSS 作用】CSS 能够对网页中元素的位置进行排版，对像素级精准控制，实现美化页面的效果，能够做到页面的样式和结构分离
上期内容我们学习了 HTML 的基本用法，可以实现简单的页面，但是不是很好看，有很多细节可以去调整，使页面变得"漂亮"起来，这时，CSS 闪亮登场啦，它就起到美化页面的效果！
2. CSS 引入方式
CSS 和 HTML 类似，也是在浏览器中运行的，在编写代码的时候，CSS 有多种引入方式，如下：
2.1 内部样式
【内部样式】直接把 CSS 嵌入到 HTML 中，放在 style 标签里面
<code><!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>CSS</title>
<style>
div {
font-size: 50px;
color: green;
}
</style>
</head>
<body>
<div>
hello
</div>
</body>
</html>
效果如下：
图解说明：
【优点】能够使样式和页面结构分离
【缺点】但是分离的还不够彻底，尤其是 CSS 内容多的时候
2.2 外部样式
【外部样式】把 CSS 写成一个单独的 .css 文件，由 html 文件通过 link 标签引入
创建一个 css 文件使用 link 标签引入 css 文件
<code><!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>CSS</title>
<link rel="stylesheet" href = "style.css">code>
</head>
<body>
<div>
hello
</div>
</body>
</html>
style.css 文件内容如下：
div {
font-size: 100px;
color:red;
}
效果如下：
图解说明：
【优点】样式和页面结构彻底分离
【缺点】但是受到浏览器缓存影响，修改之后不一定立刻生效(可能需要一定的时间)
2.3 内联样式
【内联样式】直接把 CSS 属性写到元素的 style 属性内
<code><!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>CSS</title>
</head>
<body>
<div style="color: blueviolet; font-size: 200px;">hello</div>code>
</body>
</html>
效果如下：
图解说明：
【优点】写法简单
【缺点】只适合于写简单样式，只针对某个标签生效！ 即不能写太复杂的样式
上述三种写法，在实际开发中都十分常见，在本期内容，主要使用内部样式来介绍 CSS
3. CSS 常见选择器
【选择器含义】针对页面中指定的标签元素生效，先要选中元素，才能设置元素的属性
【选择器种类】选择器有很多种，分为：
1）基础选择器：由单个选择器构成
2）复合选择器：由多种基础选择器构成
CSS 选择器种类非常多，用法也是十分丰富，本期内容仅介绍 5 种选择器，如下：
3.1 基础选择器
3.1.1 标签选择器
【特点】使用标签名，把页面中所有同名标签的元素都选中，即能快速为同一类型的标签都选择出来
【缺点】难以针对某个元素进行个性化定制，即不能差异化选择
<code><!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>CSS</title>
<style>
div {
font-size: 50px;
color: green;
}
</style>
</head>
<body>
<div>hello1</div>
<div>hello2</div>
<div>hello3</div>
</body>
</html>
效果如下：
图解说明：
3.1.2 类选择器
【特点】CSS中创建一个"类名"，这个类名对应一组 CSS 属性，让指定的 html 元素应用这个类名即可使用
【优点】能够差异化表示不同的标签
<code><!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>CSS</title>
</head>
<body>
<div class="one">hello1</div>code>
<div class="two">hello2</div>code>
<style>
.one {
color: red;
font-size: 100px;
}
.two {
color: green;
font-size: 100px;
}
</body>
</html>
效果如下：
图解说明：
【注意】这里的"类"和 Java 中的类完全没有任何联系~ 这里的一个类名是可以被多个标签引用！同时，一个标签还可以引入多个类名，使用多组属性，多个类名之间使用空格分隔
3.1.3 id 选择器
【特点】一个 html 标签，可以有一个 id 属性，id 是唯一的，这个 id 属性的值作为标签的"身份标识"，因此，同样可以通过 id 选择器把这个指定的元素给获取到！
<code><!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>CSS</title>
</head>
<body>
<div id = "mydiv">hello</div>
<style>
#mydiv {
color:rebeccapurple;
font-style:100px;
}
</style>
</body>
</html>
效果如下：
图解说明：
【注意】因为 id 是唯一的，即不能被多个标签使用 (这也是类选择器最大的区别)!!!
3.1.4 通配符选择器
【特点】选择所有的标签，页面的所有内容均修改，无需被页面结构调用
<code><!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>CSS</title>
</head>
<body>
<div>hello</div>
<h2>hh<h2>
<style>
* {
color: red;
}
</style>
</body>
</html>
效果如下：
图解说明：
3.2 复合选择器
在本期内容中，仅介绍一种复合选择器，后代选择器
3.2.1 后代选择器
【特点】后代选择器的效果就是把上述的三种基础选择器进行组合，同时能够体现出"标签的层次结构"
【优点】如果有一个页面特别复杂，就可以使用后代选择器，非常针对性地修改某元素，并不影响其它部分内容
<code><!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>CSS</title>
</head>
<body>
<div class="one">code>
<h3>hello1<h3>
</div>
<div class="two">code>
<h3>hello2<h3>
</div>
<div class="one">code>
<h2>hello3<h2>
</div>
<style>
.one h3{
color: red;
}
.two h3{
color: green;
}
</style>
</body>
</html>
效果如下：
图解说明：
【关于优先级】
CSS里面有一套优先级规则，但是比较麻烦，需要进行计算，我们作为了解，在这里不进行介绍
1）引用样式：可以简单地理解，内联样式这种优先级比其它两种更高，会覆盖其他的样式
2）类选择器：针对同样的样式属性，设置不同的值，使用类选择器的优先级高于标签选择器
4. CSS 常用属性
CSS中有非常多的属性，这里仅介绍常用的属性，详情可以参考：CSS参考手册
4.1 字体相关
1）字体家族：<code>font-family
2）字体大小：font-size
3）字体粗细：font-weight
4）设置文字倾斜：font-style
<!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>CSS</title>
</head>
<body>
<div class="one">hello</div>code>
<style>
.one {
font-family: '宋体';
/*字体大小*/
font-size: 100px;
/*字体粗细*/
font-weight: 900;
/*设置文字倾斜*/
font-style: italic;
}
</style>
</body>
</html>
效果如下：
4.2 文本相关
1）文本颜色：<code>color
【注意】color 属性的值有很多种写法
直接写一些表示颜色的单词，日常用到的颜色这里都有，如：color:red;使用 rgb 的方式表示，如：color:rgb(255,0,0)使用十六进制方式表示，本质上仍然是 RGB，如：color： #ff0000;
通过上述的操作，可以调出一些很好看的颜色啦~
2）文本对齐方式：text-align
其中，左对齐为 left，右对齐为 right，居中对齐：center
3）文本装饰(加个下划线等)：text-decoration
加下划线设置为 underline，比如这个链接你不想加下划线，该属性的值可以设置为 none；
4）行间距(行高)：line-height
<!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>CSS</title>
</head>
<body>
<div class="one">hello</div>code>
<style>
.one {
font-size: 100px;
/* 文本颜色 */
color: #ff0000;
/* 文本对齐 左对齐left 右对齐right 居中对齐center */
text-align: center;
/* 文本装饰 加个下划线等 */
text-decoration: underline;
/* 文本缩进 首行缩进多少空间 */
text-indent: 20px;
/* 行高 行间距*/
line-height: 100px;
}
</style>
</body>
</html>
效果如下：
4.3 背景相关
1）背景颜色：<code>background-color
2）背景图片：background-image: url(图片地址);
3）背景平铺方式：background-repeat
4）背景位置：background-position
5）背景大小：background-size
<!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>CSS</title>
</head>
<body>
<div class="one">hello</div>code>
<style>
.one {
font-size: 100px;
background-color: #ff0000;
/* 设置图片的宽与高 */
width: 600px;
height: 300px;
background-image: url(dog.jpg);
background-repeat: no-repeat;
background-position: center center;
/* 与图片背景颜色大小一致，所以没有看到背景颜色 */
background-size: 600px,300px;
}
</style>
</body>
</html>
效果如下：
4.4 设置圆角矩形
圆角矩阵：<code>border-radius
效果如下：
<!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>CSS</title>
</head>
<body>
<div class="one">hello</div>code>
<style>
.one {
width: 600px;
height: 300px;
background-color: gray;
border-radius: 50px;
text-align: center;
}
</style>
</body>
</html>
效果如下：
如果想要得到一个圆形呢？可以做到吗！
即在正方形中，将 border-radius 的长度设置为正方形边长的一半即可
height: 400px;
border-radius: 200px;
效果如下：
5. 块级元素与行内元素
5.1 定义
【块级元素】矩形的盒子
【行内元素】一段文本
每个 html 元素均可以通过 CSS 设置 display 属性
<code>display:block; 块级元素
display:inline; 行内元素
上期前端专栏介绍的 html 标签，在不显示指定 display 的时候，均有默认的 display 的值！
其中，默认为 block(块级元素) 的标签有：h1-h6，p，ul，ol，li，table，div等等
默认为 inline(行内元素) 的标签有：a，span，b
5.2 区别
块级元素与行内元素的区别有很多方面，主要了解两个方面：
块级元素默认独占一行，行内元素默认不独占一行块级元素可以设置尺寸，比如可以设置 width、height 的值，而行内元素不可以!
可以通过 display:block，将 span 标签设置为块级元素，因为 span 标签默认是行内元素，改为块级元素后 span 标签也可以设置尺寸了
但是一般不会把块级元素变成行内元素~（没啥意义hh）
也可以使用display:none 实现元素隐藏的效果
6. CSS 盒子模型
一个 html 元素，是一个矩形，这个矩形由以下 4 个部分构成：内容 + 内边距 + 边框 + 外边距，如图：
6.1 边框属性
边框属性：<code>border
<!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>CSS</title>
</head>
<body>
<div class="one">hello</div>code>
<style>
.one {
width: 500px;
height: 300px;
/* 边框可以分开设置 分成4个方向*/
border-left: red 20px solid;
border-right: green 20px dotted;
border-top: blue 20px dashed;
border-bottom: orange 20px solid;
}
</style>
</body>
</html>
效果如下：选中该元素，查看信息
通过上图，发现我们在代码中设置的是 500 * 300，但是这里的尺寸显示的是 540 * 340
这里是因为，边框把元素给撑大了，边框一个是 20px，所以宽与高均增大了 40px
但是在开发的时候，一般不希望见到这种情况，如果需要排列多个元素的时候，此时就不安排了！因此，一般希望边框不要撑大元素，可以使用一个单独的 CSS 属性进行设置：<code>box-sizing: border-box;
此时选择通配符选择器，设置这个属性~ 因为我希望的是所有的边框不要撑大元素
<!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>CSS</title>
</head>
<body>
<div class="one">hello</div>code>
<style>
*{
box-sizing: border-box;
}
.one {
width: 500px;
height: 300px;
/* 边框可以分开设置 分成4个方向*/
border-left: red 20px solid;
border-right: green 20px dotted;
border-top: blue 20px dashed;
border-bottom: orange 20px solid;
}
</style>
</body>
</html>
效果如下：此时元素就没有被边框撑大啦！
6.2 内边距
内边距属性：<code>padding 即元素和边框之间的距离
<!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>CSS</title>
</head>
<body>
<div class="one">hello</div>code>
<style>
*{
box-sizing: border-box;
}
.one {
width: 500px;
height: 300px;
/* 边框可以分开设置 分成4个方向*/
border-left: red 20px solid;
border-right: green 20px dotted;
border-top: blue 20px dashed;
border-bottom: orange 20px solid;
/* padding也是可以分4个方向设置 */
padding-left: 20px;
padding-right:20px;
padding-top: 50px;
/* 上下设置 30px 左右设置 20px */
/* padding: 30px 20px; */
/* 上右下左 顺时针*/
/* padding: 10px 20px 30px 40px; */
}
</style>
</body>
</html>
效果如下：
【注意】padding 这个本身使用并不复杂，主要是如何设置 padding 比较好看~
6.3 外边距
外边距属性：<code>margin 即边框和其它元素之间的距离
<!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>CSS</title>
</head>
<body>
<div class="one">hello</div>code>
<style>
*{
box-sizing: border-box;
}
.one {
width: 500px;
height: 300px;
/* 边框可以分开设置 分成4个方向*/
border-left: red 20px solid;
border-right: green 20px dotted;
border-top: blue 20px dashed;
border-bottom: orange 20px solid;
/* padding也是可以分4个方向设置 */
padding-left: 20px;
padding-right:20px;
padding-top: 50px;
/* 上下设置 30px 左右设置 20px */
/* padding: 30px 20px; */
/* 上右下左 顺时针*/
/* padding: 10px 20px 30px 40px; */
margin-top: 50px;
}
</style>
</body>
</html>
效果如下：
【注意】
将 margin 设置为 auto，可以实现元素水平居中的效果，但是把上下方向设置为 auto 则不能实现垂直居中
即将 margin 设置 auto 可以实现水平居中，但是垂直方向则不行！
【除浏览器默认样式】
不同浏览器的默认样式存在差别，有的浏览器会给元素加上一些默认的样式，尤其是内外边距，为了保证代码在不同的浏览器上都能按照统一的样式显示，往往我们会去除浏览器默认样式
使用通配符选择器，设置内外边距均为 0，即可完成去除浏览器默认样式，代码如下：
<code>* {
marign: 0;
padding: 0;
}
7. 弹性布局
对于块级元素，我们知道，默认是独占一行的，即为垂直方向排列的，有时候想让块级元素能够水平方向排列，如何做呢？
有的小伙伴会想到使用行内元素，这就可以水平排列了，但是行内元素不能设置尺寸呀!!!
这个时候弹性布局闪亮登场!!! 可以让块级元素水平排列
本期内容仅介绍弹性布局最基础的三个属性：
开启弹性布局：display:flex 其中 flex 即为弹性布局，某元素一旦开启了弹性布局，此时内部的子元素，就会按照水平方向排列，但是子元素里面的子元素是不受影响的!!!设置水平方向排列规则：justify-content，有居中排列，靠左，靠右，分散开等设置垂直方向排列规则：align-items
<!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>CSS</title>
</head>
<body>
<div class="one">code>
<div class="two">1</div>code>
<div class="two">2</div>code>
<div class="two">3</div>code>
<div class="two">4</div>code>
<div class="two">5</div>code>
</div>
<style>
*{
box-sizing: border-box;
}
.one {
width:1000px;
height: 300px;
background-color: gray;
display: flex;
justify-content:space-around;
align-items: center;
}
.two {
width: 150px;
height: 100px;
background-color: green;
}
</style>
</body>
</html>
效果如下：实现了块级元素水平排列！
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。