JavaWeb-CSS入门(二)

最新推荐文章于 2024-07-16 18:23:56 发布

摸鱼王胖嘟嘟

最新推荐文章于 2024-07-16 18:23:56 发布

阅读量1k

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_61341342/article/details/128914939

版权

JavaWeb 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

常见元素属性

字体属性

设置字体

body {
    font-family: '微软雅黑';
    font-family: 'Microsoft YaHei';
}

在这里插入图片描述
大小

p {
    font-size: 20px;
}

在这里插入图片描述
粗细

p {
	font-weight: bold;
	font-weight: 700;
}

在这里插入图片描述
文本样式

/* 设置倾斜 */
font-style: italic;
/* 取消倾斜 */
font-style: normal;

很少把某个文字变倾斜，但是经常要把 em/i改成不倾斜

文本属性

文本颜色
color的取值方式有很多种
1.直接使用单词，表示的种类比较有限
2.使用rgb的方式来表示
3.还是使用rgb，但是是使用十六进制的风格

color: red;
color: #ff0000;
color: rgb(255, 0, 0);

文本对齐
控制文字水平方向的对齐

text-align:[];

center:居中对齐
left:左对齐
right:右对齐
文本装饰
```
text-decoration:[];
```
underline 下划线
none 啥都没有.可以给`a`标签去掉下划线
overlin上划线
line-though删除线 **文本缩进** 控制段落的首行缩进
```
text-indent:[]
```
单独可以使用px或者em
使用em作为单位更好.1个em就是当前元素的文字大小
缩进可以是负的，表示往左缩进

行高
行高指的是上下文本行之间的基线距离

HTML中展示文字涉及到这几个基准线

顶线
中线
基线
底线

line-height: [值];

注意：

行高=上边距+下边距+字体大小
行高也可以取normal等值
行高等于元素高度，就可以实现文字居中对齐

背景属性

背景图片

background-image: url(...);

在这里插入图片描述
背景平铺

background-repeat: [平铺方式]

重要取值

repeat：平铺
no-repeat：不平铺
repeat-x：水平平铺
repeat-y：垂直平铺
默认是repeat
背景颜色和背景图片可以同时存在. 背景图片在背景颜色的上方.

背景位置

background-position: x y;

修改图片的位置.
在这里插入图片描述

背景尺寸

background-size: length|percentage|cover|contain;

在这里插入图片描述

圆角矩形

基本用法

border-radius: length;

length 是内切圆的半径. 数值越大, 弧线越强烈
在这里插入图片描述
生成圆形

div {
	width: 200px;
	height: 200px;
	border: 2px solid green;
	border-radius: 100px;
	border-radius: 50%;
}

在这里插入图片描述
注意这里的border-radius后面的参数越大，这个圆角就越圆；当改元素值为这个正方行长的一半的时候，就是一个圆形了；这里的话参数就给到150px.

盒子模型

HTML的元素，其实是一个矩形，这个矩形由以下几部分构成。
我们可以直接在开发者工具中找到，首先进入任意一个页面，然后右键点击检查，往下拉，就可以看到下面一张图。
在这里插入图片描述

边框 border ；内容 content ；内边距 padding ；外边距 margin ；

   </style>    
       div {
        width: 300px;
        height: 200px;
        border: 3px black solid;
       <!--3px就是边框的厚度，solid的意思就是设置边框为实线-->
    }
    </style>
    <div>
        设置边框
    </div>

在这里插入图片描述
在实际开发中，更常用的操作，是设置box-sizing属性为border-box，这个时候的边框会挤压内容，而不是撑大元素

弹性布局

主要是安排页面上的元素的位置(排列方式)

.parent {
            /* width 100% 让当前元素的宽度和她的父元素一样宽 */
            width: 100%;
            height: 200px;
            background-color: grey;
        }
        .one, .two, .three {
            width: 100px;
            height: 100px;
            background-color: red;
        }
	<div class="parent">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
    </div>

在这里插入图片描述
div默认作为块级元素，是独占一行的，为了让这些div能够在一个横行排列，就可以使用弹性布局
给父元素设置一个属性，display: flex；

在这里插入图片描述
通过flex布局，就可以调整子元素排列的方式

默认是这些元素都挤在左上角

水平方向的排列方式：justify-content
start 靠左排列
end 靠右排列
center 居中排列
space-between 让元素中间有一些等分的间隔
space-around让元素中间有一些等分的间隔，最左边和最右边也有间隔

垂直方向的排列：align-items
start 靠上排列
end 靠下排列
center 居中排列
space-between 让元素中间有一些等分的间隔
space-around让元素中间有一些等分的间隔，最左边和最右边也有间隔

练习

实现一个典型的页面布局

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基于弹性布局，实现典型的页面结构</title>
</head>
<body>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .nav {
            width: 100%;
            height: 50px;
            background-color: rgb(0, 0, 0);
            color: white;
            text-align: center;
            line-height: 50px;
            font-size: 20px;
        }

        .container {
            width: 100%;
            height: 1000px;
            background-color: rgb(201, 34, 34);

            display: flex;
            justify-self: center;
            align-items: center;
        }

        .container .left, .container .right{
            width: 20%;
            height: 100%;
            background-color: rgb(42, 196, 42);

            font-size: 20px;
            line-height: 1000px;
            text-align: center;
        }

        .container .content {
            width: 60%;
            height: 100%;
            background-color: rgb(189, 18, 18);

            font-size: 20px;
            line-height: 1000px;
            text-align: center;
        }

        .footer {
            width: 100%;
            height: 150px;
            background-color: rgb(0, 0, 0);
            color: white;
            text-align: center;
            line-height: 50px;
            font-size: 20px;
        }
    </style>

    <div class ="nav">
        导航栏
    </div>
    <div class="container">
        <div class="left">
            左侧边栏
        </div>
        <div class="content">
            内容区域
        </div>
        <div class="right">
            右侧边栏
        </div>
    </div>
    <div class="footer">
        页脚
    </div>

</body>
</html>