CSS基本知识

最新推荐文章于 2022-06-05 15:20:58 发布

石先森很疯狂

最新推荐文章于 2022-06-05 15:20:58 发布

阅读量825

点赞数 1

分类专栏： JavaWeb 文章标签： css html css3 html5 前端

本文链接：https://blog.csdn.net/Alan_King79/article/details/122499496

版权

JavaWeb 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS基本知识

一、CSS的基本样式(内联，嵌入，外联)

1.内联式

将style属性（style attribute）添加到相关标签（relevant tag）

<p style="color:white; background-color:gray;">
    This is an example of inline styling. 
</p>

效果如下：

This is an example of inline styling.

2.嵌入式

在HTML页面head的<style>元素内定义

 <head>
      <style>
      p {
         color:white;
         background-color:gray;
      }
      </style>
   </head>

3.外联式（最有用）

使用此方法，所有样式规则都包含在单个文本文件中，该文件以.css 扩展名保存。然后使用<link>标记在HTML中引用此CSS文件。<link>元素位于头部内部。

HTML:

<head>
   <link rel="stylesheet" href="example.css">
</head>

CSS:

p {
   color:white;
   background-color:gray;
}

二、CSS选择器和常用属性

样式规则包含三部分：选择器（selector），属性（property）和值（value）。
声明块包含一个或多个用分号分隔的声明。每个声明都包含一个属性名称和一个值，并用冒号分隔。

1.类型选择器

标记名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}

p {
   color: red;
   font-size:130%;
}

2.id选择器

#id名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}

id是唯一的！只能对应文档中的某一个具体的元素！

HTML:

<div id="intro">
   <p> This paragraph is in the intro section.（此段落在简介部分。）</p>
</div>
<p> This paragraph is not in the intro section.（此段落不在简介部分中）</p>

效果如下：

This paragraph is in the intro section.（此段落在简介部分。）

This paragraph is not in the intro section.（此段落不在简介部分中）

CSS:

#intro {
   color: white;
   background-color: gray;
}

3.类选择器

.类名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}

class选择器:和id主要区别在于，id每页只能应用一次，而class可以根据需要在页面上使用多次。

HTML:

<div>
   <p class="first">This is a paragraph(这是第一个段落)</p>
   <p> This is the second paragraph.(这是第二个段落) </p>
</div>
<p class="first"> This is not in the intro section（这不在简介部分）</p>
<p> The second paragraph is not in the intro section.（第二段不在介绍部分） </p>

效果如下：

This is a paragraph(这是第一个段落)

This is the second paragraph.(这是第二个段落)

This is not in the intro section（这不在简介部分）

The second paragraph is not in the intro section.（第二段不在介绍部分）

CSS:

.first {font-size: 200%;}

4.后代选择器

#id名.iid名.id名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}

这些选择器用于选择作为另一个元素的后代的元素。选择级别时，可以根据需要选择任意多个深度。所得结果，仅影响选定的元素
后代选择器匹配作为指定元素后代的所有元素。

例如，仅在“intro”部分的第一段中定位<em>元素：

HTML:

<div id="intro">
   <p class="first">This is a <em> paragraph.</em></p>1
</div>

效果如下：

This is a paragraph.

CSS:

#intro .first em {
   color: pink; 
   background-color:gray;
}

5.通配符选择器

*{属性1：属性值1；属性2：属性值2；属性3：属性值3；}

该样式对所有的HTML标记都生效！

CSS：

* {
      margin: 0; 定义外边距
      padding: 0; 定义内边距
}

三、CSS属性

字体属性	含义
font-family	字体属性
font-size	字体大小
font-style	字体样式
font-weight	字体粗细
font-variant	字体变换
color	字体颜色

文本样式属性	含义
text-align	文本对齐
vertical-align	垂直对齐

常用属性	含义
margin	外边距
padding	内边距
background	背景颜色等信息
border	边框宽度、颜色、样式等
font	字体样式
height	高度
line-height	行间距
text-decoration	文本的显示样式
vertical-align	元素的垂直对齐方式

实例

1.更改文本的颜色

在这里插入图片描述

2.使用元素选择器来设置元素的样式

在这里插入图片描述

3.使用 class 选择器设置多个元素的样式

在这里插入图片描述

4.更改元素的字体大小–font-size

在这里插入图片描述

5.设置元素的字体族名–font-family

在这里插入图片描述

6.引入谷歌字体

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EG6fEvXD-1642154043541)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210905130758634.png)]$

7.字体如何优雅降级

在这里插入图片描述

8.调整图片的大小

在这里插入图片描述

9.在元素周围添加边框

在这里插入图片描述

10.用 border-radius 添加圆角边框

在这里插入图片描述

11.用 border-radius 制作圆形图片

在这里插入图片描述

12.给 div 元素添加背景色

在这里插入图片描述

13.设置元素的 id

在这里插入图片描述

14.使用 id 属性来设定元素的样式

在这里插入图片描述

15.调整元素的内边距

在这里插入图片描述

<style>
  .injected-text {
    margin-bottom: -25px;
    text-align: center;
  }

  .box {
    border-style: solid;
    border-color: black;
    border-width: 5px;
    text-align: center;
  }

  .yellow-box {
    background-color: yellow;
    padding: 10px;
  }

  .red-box {
    background-color: crimson;
    color: #fff;
    padding: 20px;
  }

  .blue-box {
    background-color: blue;
    color: #fff;
    padding: 20px;
  }
</style>
<h5 class="injected-text">margin</h5>

<div class="box yellow-box">
  <h5 class="box red-box">padding</h5>
  <h5 class="box blue-box">padding</h5>
</div>

在这里插入图片描述