CSS基础学习
<h2>介绍</h2><p>CSS（层叠样式表，Cascading Style Sheets）是一种用于描述网页或文档外观和样式的标记语言。它与 HTML 结合使用，为网页添加样式、布局和视觉效果。</p>
<p>CSS 的主要作用是将网页的结构与样式分离，使得开发者可以通过 CSS 文件或样式块来定义网页的外观，而不需要直接修改 HTML 文件。这种分离的设计使得网页的样式表现更加灵活、易于维护和扩展。</p>
<h3>基本写法</h3>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS学习</title>
<style type="text/css">
/* 此处放置Css代码 */
</style>
</head>
<body>
</body>
</html></code></pre>
<h3>CSS的三种链接方式</h3>
<ol><li> <p>通过直接在标签的style属性上设置"key:value value;"修改标签样式</p> <pre><code class="language-html"><div style="border:1px solid red">标签</div></code></pre> <img src="https://img-blog.csdnimg.cn/cc8dd9e37ff640f4bee40ecd90f20141.png"></li><li> <h4>在head标签中加入style标签<br> </h4> <pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS学习</title>
<style type="text/css">
/* 此处放置Css代码 */
div{
border:1px solid red;
}
</style>
</head>
<body>
<div>标签</div>
</body>
</html></code></pre> <p><img src="https://img-blog.csdnimg.cn/3b5da32677ae4af8a79150bf68a960b5.png"></p> </li><li> <h4>使用link标签链接CSS文件，在CSS文件中书写相应的代码来规定相应的格式<br> </h4> <pre><code class="language-html"><link rel="stylesheet" href="styles.css" type="text/css"></code></pre> <p>只需要在CSS文件styles中填写相应的CSS代码就可以完成样式改变，注意href属性中填写的是对应的路径</p> </li></ol>
<h2>CSS的三种样式</h2>
<h4> 1.选择器样式：名称:{行为}</h4>
<pre><code class="language-css"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS学习</title>
<style type="text/css">
/* 此处放置Css代码 */
div{
border:1px solid red;
}
</style>
</head>
<body>
<!-- 直接放置div标签就可以达到显示的效果 -->
<div>标签</div>
</body>
</html></code></pre>
<h4> 2.类样式：.名称:{行为}</h4>
<pre><code class="language-css"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS学习</title>
<style type="text/css">
/* 此处放置Css代码 */
div{
border:1px solid red;
}
.p{
font-size:100px;
}
</style>
</head>
<body>
<!-- 直接放置div标签就可以达到显示的效果 -->
<div>标签</div>
<p class="p">段落</p>
</body>
</html></code></pre>
<h4> 3.ID样式：#名称:{行为}</h4>
<pre><code class="language-css"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS学习</title>
<style type="text/css">
/* 此处放置Css代码 */
div{
border:1px solid red;
}
.p{
font-size:100px;
}
#p4{
background-color: red;
}
</style>
</head>
<body>
<!-- 直接放置div标签就可以达到显示的效果 -->
<div>标签</div>
<p class="p">段落</p>
<div id="p4">
AAA
</div>
</body>
</html></code></pre>
<h2>常用的属性：</h2>
<p>边框:border</p>
<pre><code class="language-css">border:1px solid red;</code></pre>
<p>颜色：color</p>
<pre><code class="language-css">color:red</code></pre>
<p>宽度高度:width height 也可以写成百分比形式:20%</p>
<pre><code class="language-css">width="10px";
height="10px";</code></pre>
<p>背景颜色：bockground-color</p>
<pre><code class="language-css">background-color:red</code></pre>
<p>字体大小:font-size</p>
<pre><code class="language-css">font-size:10px</code></pre>
<p>文本居中：text-align</p>
<pre><code class="language-css">text-align:center;</code></pre>
<p>设置边距：</p>
<p><code>margin-left</code>: 用于设置元素的左侧外边距，即元素与其相邻元素之间的空白区域。</p>
<p><code>margin-right</code>: 用于设置元素的右侧外边距，即元素与其相邻元素之间的空白区域。</p>
<pre><code class="language-css">.example {
margin-left: 10px; /* 左外边距为 10 像素 */
margin-right: 20px; /* 右外边距为 20 像素 */
}
.another-example {
margin-left: 2em; /* 左外边距为字体大小的两倍 */
margin-right: 5%; /* 右外边距为父元素宽度的 5% */
}
</code></pre>
<h2>资料</h2>
<p>这里给读者贴个网站，读者可以通过该网站自行查询</p>
<p>CSS 参考手册 (w3school.com.cn)</p>
<p>实例操作：去除超链接的默认格式</p>
<pre><code class="language-css">a{
color:black;
text-decoration: none;
}
</code></pre>
<p>CSS 样式将按钮转换为无边框并且鼠标悬停时显示背景色</p>
<pre><code class="language-css"><!DOCTYPE html>
<html>
<head>
<style>
.button {
display: inline-block;
padding: 10px 20px;
background-color: #007bff;
color: white;
text-align: center;
text-decoration: none;
border: none;
cursor: pointer;
}
.button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<a href="#" class="button">Click me</a>
</body>
</html>
</code></pre>
<p>上面的代码中，我们定义了一个 <code>.button</code> 类作为按钮的样式。</p>
<ul><li><code>display: inline-block;</code>：使按钮以块级元素的方式显示，并且可以设置宽度和高度。</li><li><code>padding: 10px 20px;</code>：设置按钮的内边距。</li><li><code>background-color: #007bff;</code>：设置按钮的背景颜色。</li><li><code>color: white;</code>：设置按钮文本的颜色为白色。</li><li><code>text-align: center;</code>：居中按钮文本。</li><li><code>text-decoration: none;</code>：去除按钮的下划线。</li><li><code>border: none;</code>：去除按钮的边框。</li><li><code>cursor: pointer;</code>：将鼠标悬停在按钮上时的光标样式改为手型。</li></ul>
<p>使用 CSS 样式创建一个响应式的网格布局</p>
<pre><code class="language-html"><!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 10px;
}
.grid-item {
background-color: #f2f2f2;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
<div class="grid-item">Item 5</div>
</div>
</body>
</html>
</code></pre>
<p>上面的代码中，我们定义了一个 <code>.grid-container</code> 类作为网格容器，以及 <code>.grid-item</code> 类作为网格项。</p>
<ul><li> <p><code>.grid-container</code>：</p>
<ul><li><code>display: grid;</code>：将元素设置为网格布局容器。</li><li><code>grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));</code>：定义网格列的数量和宽度。这里使用 <code>repeat()</code> 函数创建自适应的列数，每列的最小宽度为 200px，使用 <code>1fr</code> 表示剩余空间平均分配给各列。</li><li><code>grid-gap: 10px;</code>：设置网格项之间的间距。</li></ul></li><li> <p><code>.grid-item</code>：</p>
<ul><li><code>background-color: #f2f2f2;</code>：设置网格项的背景颜色。</li><li><code>padding: 20px;</code>：设置网格项的内边距。</li><li><code>text-align: center;</code>：居中网格项的内容。</li></ul></li></ul>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p><br><br>
来源：https://www.cnblogs.com/demo-day/p/17853157.html
頁:
[1]