css样式引入

最新推荐文章于 2023-01-09 15:17:53 发布

就爱酸辣土豆丝

最新推荐文章于 2023-01-09 15:17:53 发布

阅读量90

点赞数 1

分类专栏： html+css+js

本文链接：https://blog.csdn.net/m0_50913689/article/details/108930641

版权

html+css+js 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

css样式引入

css介绍

css：层叠样式表，用于美化页面，就是给标签增加样式的，样式就是显示出来的方式，多个样式可以重叠，让标签显示变得多样化，让枯燥乏味的代码变得很有意思
比如: 设置标签文字大小、颜色、字体加粗，控制页面布局（设置浮动、定位等样式等样式)
基本语法：选择器+规则
选择器{
样式规则
}

样式规则：
属性名1：属性值1;
属性名2：属性值2;
属性名3：属性值3;
…
选择器就是用来选择标签的，选出来之后，给标签增加样式，css样式表是由很多个选择器组成
如：

	div{ 
	    width:100px; 
	    height:100px; 
	    background:gold; 
	}

引入方式

行内式
如下html中定义table标签的样式，该样式只作用于某一个标签，方便直观，写起来太过费劲，当前基本不用
```
<table style="border:3px solid black;border-collapse:collapse">
```

内嵌式
在head标签当中加入style标签，在style标签当中定义css样式，后面只要使用定义过样式的标签，都会默认使用该样式，如下的li标签，这种方式和html代码在同一个页面内，维护起来会很方便，但是不方便其他页面引用

	<!DOCTYPE html>
	<html>
	<head>
	    <meta charset="UTF-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <title>玩玩css的内嵌式</title>
	    <style>
	        li{
	            color: blue;
	            background-color: brown;
	        }
	    </style>
	</head>
	<body> 
	    <ul>
	        <!-- 无序列表 -->
	        <!-- li标签定义列表项目 -->
	        <li>猫</li>
	        <li>狗</li>
	        <li>狼</li>
	    </ul>
	</body>
	</html>

执行结果：
在这里插入图片描述

外链式
类似于python中封装一个模块，将样式代码写在1个单独的.css文件当中，使用时在标签中使用标签直接引入该文件到页面中即可，这种方式样式和html页面分离，维护起来很方便，也可多页面引用，看起来也整齐好看
css文件定义样式：
```
li{
    color: red;
    background-color: deepskyblue;
}

h1{
    color: forestgreen;
}
```

html文件当中引入：

	<!DOCTYPE html>
	<html>
	<head>
	    <meta charset="UTF-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <title>玩玩</title>
	    <link rel="stylesheet" href="css/main.css">
	</head>
	<body> 
	    <h1>css的链接方式引入练习</h1>
	    <ol>
	        <!-- 有序列表 -->
	        <li>小明</li>
	        <li>小红</li>
	        <li>小丽</li>
	    </ol>
	</body>
	</html>

执行结果：
在这里插入图片描述

就爱酸辣土豆丝

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css样式引入

csscss介绍css：层叠样式表，用于美化页面，就是给标签增加样式的，样式就是显示出来的方式，多个样式可以重叠，让标签显示变得多样化比如: 设置标签文字大小、颜色、字体加粗，控制页面布局（设置浮动、定位等样式等样式)基本语法：选择器+规则选择器{样式规则}样式规则：属性名1：属性值1;属性名2：属性值2;属性名3：属性值3;…选择器就是用来选择标签的，选出来之后，给标签增加样式，css样式表是由很多个选择器组成如：div{ width:100px; hei
复制链接

扫一扫