CSS学习笔记（一）

请你喝杯Java
497 阅读3分钟

这是我参与11月更文挑战的第27天，活动详情查看：2021最后一次更文挑战

1、什么是CSS

CSS全称Cascading Style Sheet 层叠样式表

是一组样式设置的规则，用于控制页面的外观样式

2、CSS的好处及作用

  • 可以实现内容与样式的分离，便于开发，样式复用，便于网站的后期维护。
  • 页面的精确控制，让页面更精美。
  • 页面外观美化：字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动，布局和定位。

3、CSS的初体验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS学习</title>
    <!-- <style>可以编写CSS的代码，每一个声明最好以“;”结尾
	语法：
		选择器{
				声明1;
				声明2;
				声明3;
			 }
	-->
    <style>
        h1{
            color: crimson;
        }
    </style>

</head>
<body>
    <h1>CSS测试</h1>
</body>
</html>

效果如下：

image-20211026194555256

二、基本用法

1、CSS语法模板

<head>
	<style>
		选择器{
			属性名：属性值;
			属性名：属性值;
		}
	</style>
</head>

1、CSS的定义是由三个部分构成： ① 选择符（selector）：样式要应用于哪些元素 ② 属性（properties）：何种样式，如字体，颜色 ③ 属性的取值（value）：样式的取值：如12px 2、基本格式如下： h1{ color: crimson; }

（选择符 { 属性:值 }） 3、如果需要对一个选择符指定多个属性时，用分号将所有的属性和值分开： p{ text-align: center; color: red}（段落居中排列;并且段落中的文字为红色）

2、CSS引用方式

CSS引用方式有三种方式：

  1. 行内样式（直接写在标签内）
  2. 内部样式（写在style标签内）
  3. 外部样式（使用外部.css文件）

2.1 行内样式

使用HTML标签的style属性定义，只对设置style属性的标签起作用，一般用于测试，不用于实际开发页面中。 优势：直观，很容易区分是给哪个标签添加的样式 。 劣势：代码冗余，样式过多的话，代码的可读性很差。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的引入方式</title>
</head>
<body>
	<p style="color:red;font-size:30px;">我是一个段落标签</p>
</body>
</html>

2.2 内部样式

在页面头部< head > 标签内通过style标签定义，对当前页面中所有符合样式选择器的标签都起作用。

优势：实现了标签和样式的分离，让代码的可读性更高。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的引入方式</title>
    <style>
        p{
            color:red;
            font-size:30px
        }
    </style>
</head>
<body>
	<p>我是一个段落标签</p>
</body>
</html>

2.3 外部样式

使用单独的 .css 文件定义，然后在页面中使用 link标签 或 @import指令 引入，最常用。

引入方式：外部样式（有两种）：链接式和导入式。 优势:实现了html文件和样式的分离，让代码的可读性更高，而且让代码的复用性也更高！

image-20211106161559383

index.css

p{
            color:red;
            font-size:30px
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的引入方式</title>

    <!--第一种：链接式(建议使用)-->
    <!--rel属性是当前HTML页面与链接进来的样式表之间的关系，因此href属性写样式表的路径-->
    <link rel="stylesheet" href="index.css">
	<link rel="stylesheet" href="index.">
    <!--第二种：导入式(不建议使用)-->
    <style>
        @import "index.css";
    </style>

</head>
<body>
	<p>我是一个段落标签</p>
</body>
</html>

2.4 引入方式总结

无论是外部样式，内部样式还是行内样式，都会生效都能起到为标签添加样式，进行布局的作用。但是如果同时使用多种引入方式,就会产生覆盖效果，后写的样式覆盖先写的样式。

一般自己写案例时多使用内部样式，这样进行文件交换只发一个文件比较方便。 但在实际开发中我们基本不使用行内样式，使用最多的是外部样式引入方式！

avatar
文章
阅读
粉丝