CSS基础

最新推荐文章于 2024-07-25 15:36:30 发布

wyzhang0214

最新推荐文章于 2024-07-25 15:36:30 发布

阅读量73

点赞数

文章标签： css

本文链接：https://blog.csdn.net/wyzhang0214/article/details/115044359

版权

什么是CSS

CSS(Cascading Style Sheet, 层叠样式表)，同HTML(标记语言)一样不是真正的编程语言，而是一门样式表语言，是用来为网页添加样式的代码，还可以给页面添加动画。CSS指定文档（一份文档是由标记语言组织起来的文本文件——HTML是常用的标记语言，还有其他的如SVG和XML）如何显示给用户。

使用CSS的方法：

在html文档中引入css文件

<link href="styles/style.css" rel="stylesheet">

将上面的以上添加在html文档的<head></head>标签之间。

style.css文件放在与html文档相同目录的styles文件夹中

内部样式表

即直接将<style></style>标签加入到<head>标签之间。

例如：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <style>
      h1 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }

      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

内联样式

即存在于HTML元素的style属性中。只影响一个元素的样式。例如：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
  </head>
  <body>
    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>
    <p style="color:red;">This is my first CSS example</p>
  </body>
</html>

CSS规则集

学习内容仍然是参考MDN

CSS规则集
上图中的整个结构成为规则集，各部分的解释如下：

选择器（Selector）：HTML 元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素（在这个例子中就是 p 元素）。要给不同元素添加样式只需要更改选择器就行了。
声明（Declaration)：一个单独的规则，如 color: red; 用来指定添加样式元素的属性。
属性（Properties）：改变 HTML 元素样式的途径。（本例中 color 就是 <p> 元素的属性。）CSS 中，由编写人员决定修改哪个属性以改变规则。
属性的值（Property value): 在属性的右边，冒号后面即属性的值，它从指定属性的众多外观中选择一个值（我们除了 red 之外还有很多属性值可以用于 color ）。

多元素选择

可以选择多种类型的元素并为他们添加一组相同的样式。不同的选择器用逗号分开。
栗子：

p, li, h1 {
	color: red,
}

不同类型的选择器

选择器有不同的类型，下表中列出一些常用的选择器类型：

选择器名称	选择的内容	示例
元素选择器(标签/类型选择器)	所有指定该类型的HTML元素	p 选择`<p>`
ID选择器	具有特定ID的元素(单一HTML页面中，每个ID只对应一个元素，一个元素只对应一个ID)	#my-id 选择`<p id="my-id">` 或`<a id="my-id">`
类选择器	具有特定类的元素(单一页面中，一个类可以有多个实例)	.my-class 选择`<p class="my-class">`和`<a class="my-class">`
属性选择器	拥有特定属性的元素	img[src] 选择`<img src="myimage.png">`而不是`<img>`
伪(Pseudo)类选择器	特定状态下的特定元素(比如鼠标指针悬停)	a:hover 仅在鼠标指针悬停在链接上时选择`<a>`

字体和文本

font-size以及font-family来设置字体大小和样式

一切皆盒子

CSS布局主要就是基于盒模型的。每个占据页面空间的块都有这样的属性：

padding：内边距，围绕着内容(比如段落)的空间。
border:边框，紧接着内边距的线。
margin:外边距，围绕元素外部的空间。

盒模型

更改页面颜色

background-color

html {
  background-color: #00539F;
}

文档体格式设置

body {
  width: 600px;
  margin: 0 auto;
  background-color: #FF9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}

每个设置的详细解释：

width: 600px; —— 强制页面永远保持 600 像素宽。
margin: 0 auto; —— 为 margin 或 padding 等属性设置两个值时，第一个值代表元素的上方和下方（在这个例子中设置为 0），而第二个值代表左边和右边（在这里，auto 是一个特殊的值，意思是水平方向上左右对称）。你也可以使用一个，三个或四个值，参考这里。
background-color: #FF9500; —— 如前文所述，指定元素的背景颜色。我们给 body 用了一种略微偏红的橘色以与深蓝色的 <html> 元素形成反差，你也可以尝试其它颜色。
padding: 0 20px 20px 20px; —— 我们给内边距设置了四个值来让内容四周产生一点空间。这一次我们不设置上方的内边距，设置右边，下方，左边的内边距为20像素。值以上、右、下、左的顺序排列。
border: 5px solid black; —— 直接为 body 设置 5 像素的黑色实线边框

定位页面主标题并添加样式

h1 {
  margin: 0;
  padding: 20px 0;
  color: #00539F;
  text-shadow: 3px 3px 1px black;
}

你可能发现页面的顶部有一个难看的间隙，那是因为浏览器会在没有任何 CSS 的情况下给 <h1> en-UShttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements 等元素设置一些默认样式。但这并不是个好主意，因为我们希望一个没有任何样式的网页也有基本的可读性。为了去掉那个间隙，我们通过设置 margin: 0; 来覆盖默认样式。

text-shadow属性四个值的含义：

第一个值设置水平偏移值 —— 即阴影右移的像素数（负值左移）。
第二个值设置垂直偏移值 —— 即阴影下移的像素数（负值上移）。
第三个值设置阴影的模糊半径 —— 值越大产生的阴影越模糊。
第四个值设置阴影的基色。

图像居中

img {
  display: block;
  margin: 0 auto;
}

最后，我们把图像居中来使页面更美观。可以复用 body 的 margin: 0 auto ，但是需要一点点调整。 [<body>] (https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/body)元素是块级元素，意味着它占据了页面的空间并且能够赋予外边距和其他改变间距的值。而图片是内联元素，不具备块级元素的一些功能。所以为了使图像有外边距，我们必须使用 display: block; 给予其块级行为。

wyzhang0214

关注

0
点赞
踩
0

收藏

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

目录什么是CSSCSS规则集多元素选择不同类型的选择器字体和文本一切皆盒子更改页面颜色文档体格式设置定位页面主标题并添加样式图像居中什么是CSSCSS(Cascading Style Sheet, 层叠样式表)，同HTML(标记语言)一样不是真正的编程语言，而是一门样式表语言，是用来为网页添加样式的代码，还可以给页面添加动画。CSS指定文档（一份文档是由标记语言组织起来的文本文件——HTML是常用的标记语言，还有其他的如SVG和XML）如何显示给用户。在html文档中引入css文件：<link
复制链接

扫一扫