CSS-CSS基础

最新推荐文章于 2024-03-12 10:33:36 发布

guardwhy

最新推荐文章于 2024-03-12 10:33:36 发布

阅读量1.1k

点赞数 5

本文链接：https://blog.csdn.net/hxy1625309592/article/details/109615886

版权

1- CSS样式组成

1.1 CSS规则构成

选择器
声明

图片说明

1.2 CSS引用

写在head标签内：

<head>
	<meta charset="UTF-8">
	<title>css样式</title>
	<style type="text/css">
		CSS样式…
	</style>
</head>

1.3 CSS注释

CSS注释：/*注释语句*/

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>01-css初体验</title>
  <style type="text/css">
    h3{
        text-align: center;
        color: red;
        font-family: "微软雅黑";
    }

    p{
        text-align: center;
        color: blue;
        font-size: 20px;
    }
  </style>
</head>
<body>
  <h3>望江南·超然台上作</h3>
  <p>姑且点上新火来烹煮一杯刚采的新茶</p>
  <p>作诗醉酒都要趁年华尚在啊</p>
  <p>水中的月影虽会因风而破碎</p>
  <p>但也终究会随风停而自圆</p>
</body>
</html>

执行结果

2-CSS属性

2.1 文字属性

属性	格式(红色字体快捷键)	取值
文字样式的属性	fs font-style: italic; fsn font-style: normal;	normal:正常的,默认就是正常的 italic : 倾斜的
文字粗细的属性	fw font-weight:; fwb font-weight: bold; fwbr font-weight: bolder;	bold 加粗 bolder 比加粗还要粗 lighter 细线，默认就是细线
文字大小的属性	fz font-size:; fz30 font-size: 30px;	通过font-size设置大小一定要带单位，也就是一定要写px
文字字体的属性	ff font-family:“楷体”;	1.如果取值是中文，需要用双引号或者单引号括起来。 2.设置的字体必须是用户电脑里面已经安装的字体。

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>2-css文字属性</title>
  <style type="text/css">
    p{
        /*font-size: initial;
        font-weight: bold;
        font-size: 20px;
        font-family: "微软雅黑";*/

        /*文字属性缩写*/
        font: bold italic 20px "微软雅黑";
    }
  </style>
</head>
<body>
  <h1>CSS 实例!</h1>
  <p>这是一个段落。</p>
</body>
</html>

执行结果

2.2 文本属性

属性	格式(红色字体快捷键)	取值
文本装饰的属性	td text-decoration: none; tdu text-decoration: underline; tdl text-decoration: line-through; tdo text-decoration: overline;	underline 下划线 line-through 删除线 overline 上划线 none 什么都没有, 最常见的用途就是用于去掉超链接的下划线
文本水平对齐的属性	ta text-align: left; tar text-align: right; tac text-align: center;	left 左 right 右 center 中
文本缩进的属性	ti text-indent:; ti2e text-indent: 2em;	2em, 其中em是单位, 一个em代表缩进一个文字的宽度

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3-文本属性</title>
  <style type="text/css">
    p{
        text-decoration: none;
        text-align: left;
        text-indent: 2em;
    }

    a{
        text-decoration: none;
    }
  </style>
</head>
<body>
  <p>kobe是MVP,kobe是MVP,kobe是MVP,kobe是MVP,kobe是MVP,kobe是MVP,kobe是MVP</p>
  <a href="#">我是超链接</a>
</body>
</html>

执行结果

3- CSS样式

3.1 行内样式（内联样式）

在开始标签内添加style样式属性

<h1 style="color:red;font-size:20px;">css使用方法</h1>

3.2 内部样式表（嵌入样式）

内部样式（嵌入样式），把css样式代码写在:

<style type="text/css">
	样式…
</style>

说明：<style>要放在<head>标签之间

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css使用方法</title>
	<style type="text/css">
        p{color:blue;}
        h2{color:red;}
	</style>
</head>
<body>
    
    <!-- 行内样式 -->
    <h1 style="color:red;font-size:20px;">css使用方法</h1>

    <!--嵌入样式-->
    <h2>css使用方法</h2>
    <p>行内样式</p>
    <p>嵌入样式</p>
    <p>外部样式</p>
    <p>导入样式</p>
	
</body>
</html>

3.3 外部样式表（Link链入）

外部样式表，把CSS样式代码写在独立的一个文件中
扩展名： CSS文件名.CSS
引入外部文件：<link href=“XX.css" rel=“stylesheet” type=“text/css” />
说明：link要放在head标签之间

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css使用方法</title>
	<link href="css.css" rel="stylesheet" type="text/css"/>
</head>
<body>
    <!-- 行内样式 -->
    <h1 style="color:red;font-size:20px;">css使用方法</h1>

    <h2>css使用方法</h2>
    <p>行内样式</p>
    <p>嵌入样式</p>
    <p>外部样式</p>
    <p>导入样式</p>
</body>
</html>

外部文件

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

3.4 导入式

@import “外部CSS样式”

说明：@import写在style标签内最开始

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css使用方法</title>
	<style type="text/css">
        <!-- 导入式 -->
	   @import url(css.css);
	</style>
</head>
<body>
    <!-- 行内样式 -->
    <h1 style="color:red;font-size:20px;">css使用方法</h1>

    <h2>css使用方法</h2>
    <p>行内样式</p>
    <p>嵌入样式</p>
    <p>外部样式</p>
    <p>导入样式</p>
	
</body>
</html>

外部文件

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

3.5 方法区别

类别	引入方法	位置	加载
行内样式	开始标签内style	html文件内	同时加载
内部样式	head中style内	html文件内	同时加载
外部样式	head中link内	CSS样式文件与html文件分离	页面加载时，同时加载CSS样式
导入式(@import)	在样式代码最开始处	CSS样式文件与html文件分离	在读取完html文件之后加载

3.6 使用外部样式的好处

CSS与Html分离
多个文件可以使用同一个样式文件
多文件引用同一个css文件，CSS只是需要下载一次。

guardwhy

关注

5
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
CSS-CSS基础

1- CSS样式组成1.1 CSS规则构成选择器声明图片说明 1.2 CSS引用写在head标签内：<head> <meta charset="UTF-8"> <title>css样式</title> <style type="text/css"> CSS样式… </style></head>1.3 CSS注释CSS注释：/*注释语句*/代码示例<!DOCTYPE htm
复制链接

扫一扫