CSS样式

最新推荐文章于 2024-07-19 23:42:48 发布

crystalheting

最新推荐文章于 2024-07-19 23:42:48 发布

阅读量1.4k

点赞数 3

文章标签： html5

本文链接：https://blog.csdn.net/crystalheting/article/details/103580215

版权

CSS样式

CSS( Cascading Style Sheets )即层叠样式表,是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 CSS样式表极大地提高了工作效率。
CSS语法规范：
样式声明---->样式属性名称：样式属性值；
1、标签：

<style>:样式定义
<link>:资源引用

2、属性：

rel="stylesheet":外部样式表
type="text/css":引入文档的类型
margin-left：边距

3、三种样式表插入方法：

外部样式表：
定义一个css文件，引入HTML文件中

      <link rel="stylesheet" type="text/css" href="css文件路径">

例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>
<p>HTML样式</p>
</body>
</html>

相应的CSS文件中声明:

selector{
property:value
}

例如：

body{
    background-color: coral
}
p{
    margin-left:30px
}

效果图:
在这里插入图片描述
属性大于1个之后，属性用分号隔开
如果值大于1个单词，则需要加上引号：

p{font-family:"sans serif"}

内部样式表：

<head>
    <style>
        选择器 { 样式声明 }
    </style>
</head>

例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <style type="text/css">
       body{background-color: coral}
       p{margin-left:30px}
   </style>
</head>
<body>
<p>HTML样式</p>
</body>
</html>

即可获得与上个方法相同的效果:
在这里插入图片描述
3. 内联样式表：

<any style="样式声明"></any>
其中any表示任意标签

例如:

<p style="color: cornflowerblue;font-size: 50px;font-family: Algerian" >HTML样式</p>

效果:
在这里插入图片描述

crystalheting

关注

3
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
CSS样式

CSS样式CSS( Cascading Style Sheets )即层叠样式表,是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS语法规范：样式声明---->样式属性名称：样式属性值；1、标签：<style>:样式定义<link>:资源引用2、属性：rel="stylesheet":外部样式表type="text/c...
复制链接

扫一扫