【DAY2 CSS基础】

最新推荐文章于 2024-09-30 08:51:48 发布

c1gar

最新推荐文章于 2024-09-30 08:51:48 发布

阅读量773

点赞数 20

文章标签： css 前端 html vscode visual studio code

本文链接：https://blog.csdn.net/c1gar/article/details/139131099

版权

一.何为 CSS

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个

二.CSS的创建

1. 用法
  CSS声明总是以分号 ; 结束，声明总以大括号 {} 括起来:CSS声明总是以分号 ; 结束，声明总以大括号 {} 括起来:

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

2.外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用标签链接到样式表。标签在（文档的）头部：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>/*用来引用不同的外部资源，比如样式表、图标等*/

3.内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。

<head>
<style>
hr {color:sienna;}/*分割线为sienna色（我也不知道是啥色）*/
p {margin-left:20px;}/*段落左侧间距为20 像素*/
body {background-image:url("images/back40.gif");}/*页面的背景将会显示指定的图像。*/
</style>
</head>

<style>
    body {background-color:yellow;}<!背景为黄色>
    h1   {font-size:40pt;}<!这个标题设置的大小为 36 pt>
    h2   {color:blue;}<!这个标题设置的颜色为蓝色：blue>
  </style>

3.内联样式
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：

三.CSS插入背景

常见基本背景命令
background-color 规定要使用的背景颜色。
background-position 规定背景图像的位置。
background-size 规定背景图片的尺寸。
background-repeat 规定如何重复背景图像。
background-origin 规定背景图片的定位区域。
background-clip 规定背景的绘制区域。
repeat 背景图像将在水平方向重复。
repeat-y 背景图像将在垂直方向重复。
no-repeat 背景图像将仅显示一次。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>(cigar的练习)</title> 
<style>
body 
{
	background-image:url('beijing.gif');
	background-color:#bbbbb;
}
</style>
</head>

<body>
<h1>我是真的帅</h1>
</body>

</html>

CSS 边框

1.border-style 值:
none: 默认无边框
dotted: 定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框
double: 定义两个边框。两个边框的宽度和 border-width 的值相同
groove: 定义3D沟槽边框。效果取决于边框的颜色值
ridge: 定义3D脊边框。效果取决于边框的颜色值
inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
outset: 定义一个3D突出边框。效果取决于边框的颜色值

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>cigar的练习</title> 
<style>
p.none {border-style:none;}
p.dotted {border-style:dotted;}
p.dashed {border-style:dashed;}
p.solid {border-style:solid;}
p.double {border-style:double;}
p.groove {border-style:groove;}
p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.hidden {border-style:hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>

<body>
<p class="none">无边框。</p>
<p class="dotted">虚线边框。</p>
<p class="dashed">虚线边框。</p>
<p class="solid">实线边框。</p>
<p class="double">双边框。</p>
<p class="groove"> 凹槽边框。</p>
<p class="ridge">垄状边框。</p>
<p class="inset">嵌入边框。</p>
<p class="outset">外凸边框。</p>
<p class="hidden">隐藏边框。</p>
<p class="mix">混合边框</p>
</body>

</html>