什么是CSS?
层叠样式表CSS(Cascading Style Sheets)是一种用于描述文档样式和布局的样式表语言。它与HTML(Hypertext Markup Language)一起被广泛用于构建网页和Web应用程序。
书写位置:title标签下方添加style双标签,style标签里面书写CSS代码。
主要作用:
1. 样式化网页:CSS用于控制网页的外观和布局,包括文字样式、颜色、大小、间距、边框、背景等。
2. 分离内容和样式:CSS的设计初衷是将文档内容与其表现样式分离,使得网页结构更清晰、易维护,并提高了网页加载速度。
3. 响应式设计:CSS可以根据不同设备的屏幕尺寸和分辨率来调整页面布局,实现响应式设计,提供更好的用户体验。
基本结构:
- 选择器:用于选择要样式化的HTML元素。
- 属性:用于定义元素的样式,如颜色、字体大小、边框等。
- 值:属性的具体取值,如`color: blue;`中的`blue`。
- 声明:属性和值的组合,如`color: blue;`。
组成:选择器{属性:属性值}
例子:
/* 选择器 */
h1 {
color: blue;?/*颜色*/
font-size: 24px;/*字号*/
/*通常属性和属性值是成对存在的,我们把它称之为键值对*/
}
/* 属性和值 */
color: blue;
font-size: 24px;
/* 声明 */
color: blue;
优势:
- 灵活性:CSS允许开发者精确控制页面的外观和布局,提供了丰富的样式选项。
- 可维护性:通过将样式与内容分离,使得修改样式更加方便,可以在不改变HTML结构的情况下改变页面外观。
- 性能优化:CSS文件可以被浏览器缓存,提高页面加载速度,减少带宽消耗。
总的来说,CSS是前端开发中不可或缺的一部分,它为网页设计提供了强大的样式控制能力,帮助开发者创建出美观、易读、响应式的网页。
CSS引入方式
1. 内部样式表(Internal Style Sheet)
在HTML文档的<head>
标签内,可以使用<style>
标签定义CSS样式,这样的样式仅适用于当前页面。
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-size: 24px;
}
</style>
</head>
<body>
<h1>Hello, CSS!</h1>
</body>
</html>
2. 外部样式表(External Style Sheet)
将CSS样式单独存放在一个独立的.css文件中,然后在HTML文档中通过<link>
标签引入外部样式表。
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Hello, CSS!</h1>
</body>
</html>
/* styles.css */
h1 {
color: blue;
font-size: 24px;
}
3. 内联样式(Inline Style)
在HTML标签内使用style
属性来定义元素的样式,这种方式会覆盖外部样式表和内部样式表的样式设置。
<!DOCTYPE html>
<html>
<body>
<h1 style="color: blue; font-size: 24px;">Hello, CSS!</h1>
</body>
</html>
CSS 选择器
1.标签选择器
作用:使用标签作为选择器,选中同名标签设置相同样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
color: blue;
/* 这时是将所有的p标签都设置成为一样的样式 */
}
</style>
</head>
<body>
<p>文本2</p>
<p>文本1</p>
</body>
</html>
2.类选择器
作用:查找标签,差异化设置标签的显示效果。
注意:一个类选择器可以给多个标签使用
步骤:
1.定义类选择器->.类名
2.使用类选择器->标签添加 class="类名"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 类名相同 */
.blue {
color: blue;
}
.size {
font_size: 60px;
}
</style>
</head>
<body>
<p class="blue">文本2</p>
<!-- 现在就只有文本2显示蓝色 -->
<p>文本1</p>
<!--一个标签使用使用多个类名,使用的时候用空格隔开-->
<div class="blue size">可以变和文本2颜色一样吗</biv>
</body>
</html>
在类名命名的时候,我们要见名之意,多个单词可以用-连接
3.id选择器
1.定义选择器->#类名
2.使用类选择器->标签添加 id="类名"
且id唯一的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#red {
color: rad;
/* 这时是将标签类id="red"给为CSS中设置的样式 */
}
</style>
</head>
<body>
<p id="red">文本2</p>
<p>文本1</p>
</body>
</html>
4. 通配符选择器
通配符选择器*
选择页面中的所有元素。
作用:它可以用来为所有元素设置通用样式。
* {
margin: 0;
padding: 0;
}
以上就是关于CSS布局的一些技巧,希望能够帮助大家更好地掌握前端开发中的布局问题。如果大家有什么疑问或者想要了解更多的内容,欢迎在评论区留言,我会尽快回复的哦!感谢大家的阅读,我们下期再见!