网页的美化CSS

最新推荐文章于 2022-02-23 09:55:50 发布

You are

最新推荐文章于 2022-02-23 09:55:50 发布

阅读量282

点赞数

分类专栏： Web技术

本文链接：https://blog.csdn.net/weixin_44832245/article/details/114800377

版权

Web技术专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Web技术学习2——CSS

一、何为CSS
二、CSS语法及显示
- 2.1 CSS语法介绍
- 2.2 CSS的显示
三、尺寸与对齐
四、定位
五、浮动
六、总结

一、何为CSS

CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。
打个比喻：如果说HTML结构是钢筋混泥土的墙，CSS是装饰材料，是油漆

二、CSS语法及显示

2.1 CSS语法介绍

语法构成：选择器+以{}包裹的一条或多条声明
举例：说明网页中所有二级标题颜色都是蓝色，字体大小为50px

h2 {color :blue;font-size: 50px;}

实际处理中我们产常常会创建一个CSS文件夹，更方便，而且具有层次感，下面是我的工作目录和定义的一些CSS样式规则
注意：class前面有一.，不用空一格，直接点上即可

2.2 CSS的显示

显示：外部样式表，内部样式表，内联样式，这三种方法。其中最常见的是外部样式表
外部样式表：创建一个CSS文件与HTML文件同目录，在HTML文件中使用如下语句<link rel="stylesheet" type="text/css" href="first.css">导入外部的样式表文件
内部样式表和内联样式表实际运用较少，而且比较简单，这里我就不列举具体使用了
说明：级联的优先级是哪个样式定义离元素的距离近，哪个就生效。通常来说内联最近，内部次之，外部最远。
举例：

<h3 style="color:green;">I am a heading</h3>
<!-- <h1 "color:blue;">下面开始体验用CSS美化界面</h1>  -->
<br>
<hr>
<hr>
<p id="action">蓝色的天空</p>
<p class="violet"> 请看我的颜色</p>
<p class="center">我会居中显示的</p>
<p class="red">我是红色的</p>
<p class="center large red">我又红又大还居中</p>
<p class="red">我也可以是红的</p>

三、尺寸与对齐

这里以区块元素举例

区块元素定义：<div > </div>
举例：

/*CSS文件中
.example-1 {
  width: 100%;
  height: 200px;
  background-color: powderblue;
  text-align: center;
}
/*下面的在html文件中
<div class="example-1">
      这个元素高 200 pixels，占据全部宽度
    </div>

注解：相信通过前面的学习，这段代码已经非常清楚它的意思了，就是在CSS文件夹中定义了一个名为.example-1的class选择器，html文件中在使用它
注意：text-align指的是文本的位置，在区块元素中并不是那一块都居中，仅仅针对文字

四、定位

格式：position：下面的四种属性之一;
例如：position:static;

static ：静态定位是元素默认的定位方式
relative ：相对静态的位置进行偏移
fixed ：固定不动，设置这种方式后不管怎样改变浏览器窗口的大小，元素的位置都不会改变
absolute ：绝对定位，相对于父元素进行偏移，这一点博主还不太懂，不做详细介绍

五、浮动

举例：

.example-float-right { 
    float: right; 
    <body>
 <img src="https://mdbootstrap.com/img/Photos/Others/placeholder1.jpg" class="example-float-right" alt=""width="200" height="200"> 
 <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201110%2F22%2F093313lm8mjm9ifmfaez19.jpg&refer=http%3A%2F%2Fattach.bbs.miui.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1619011553&t=b2cfd84b63b1a7fe38a840c1b9e6dd1f" class="example-float-right" width="200" height="200">
  <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2271706404,3528606326&fm=26&gp=0.jpg" class="example-float-right" width="200" height="200">
</body>
   }