初识CSS

最新推荐文章于 2023-12-07 16:17:25 发布

筑梦小子

最新推荐文章于 2023-12-07 16:17:25 发布

阅读量591

点赞数 2

文章标签： css html 前端

本文链接：https://blog.csdn.net/weixin_47651920/article/details/122461658

版权

（2）文本对齐，文本装饰，文本缩进，行高(文字居中对齐)

（2）使用margin属性使块级元素水平居中

一.css的作用

css是层叠样式表的简称，作用是：能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离。

二.语法规范

选择器+{1/n条声明}

选择器就是指定修改的目标，如里面的标签p或者a,都可以指定设置样式。

声明就是对具体修改成什么样式，其中声明的书写格式是键值对的方式。

例子：

<style>
/* 这里是对p标签设置样式 */
p {
/* 设置字体颜色 */
color: red;
/* 设置字体大小 */
font-size: 30px;
}
</style>

三.CSS引入方式

在HTML中引入CSS样式共有3种方式，如下所示

1.写在style标签中，然后放到HTML的head标签中。

2.通过style属性来指定某个标签的样式。

3.通过创建一个以.css结尾的文件，之后使用link标签引入css文件即可。

四.基础选择器的分类

1.标签选择器

在style中直接对指定标签设置样式

2.类选选择器

在style中的语法为：

.类名{具体的样式}

然后在body中的需要使用这种样式的标签通过class="类名"的方式来进行使用

3.id选择器

语法为

在style中使用#id名{样式类型}，之后在body中的标签通过id=“id名"来进行调用

代码：

<!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>Document</title>
    <style>
        p {
            color: red;
        }
        .name {
            color: blue;
        }
        #id_num {
            color: green;
        }
    </style>
</head>
<body>
    <p>我是标签选择器</p>
    <h2 class="name">我是类选择器</h2>
    <h3 id="id_num">我是id选择器</h3>

</body>

</html>

五.元素属性设置

1.字体属性

（1）设置字体

font-family属性

（2）字体大小

font-size属性

（3）字体粗细

font-weight属性（可以使用数字(100-900)或者bold,normal来设置字体的具体粗细程度）

（4）文字样式

font-style属性（包含倾斜和不倾斜）

代码：

<!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>Document</title>
    <style>
        body {
            /* 字体为微软雅黑 */
            font-family: 'Miscroft YaHei';
            /* 字体大小 */
            font-size: 40px;
            /* 字体粗细 (粗)*/
            font-weight: bold;
            /* 字体样式 (不倾斜)*/
            font-style: normal;
        }
    </style>
</head>
<body>
    <p>这是演示字体样式的一段文本内容</p>
</body>
</html>

2.文本属性

（1）文本颜色

总共有三种设置方法

color: red;

color:#ff0000;

通过十六进制来设置颜色

color:rgb(255,0,0);

rgb中的每个变量的范围是0~255，通过设置值来调制颜色

代码：

<!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>Document</title>
    <style>
        h1 {
            color: red;
        }
        h2 {
            color: rgb(255, 0, 0);
        }
        h3 {
            color: #ff0000;
        }
    </style>
</head>
<body>
    <h1 >使用颜色名</h1>
    <h2>使用rgb设置颜色</h2>
    <h3>使用16进制设置颜色</h3>
</body>
</html>

（2）文本对齐，文本装饰，文本缩进，行高(文字居中对齐)

1.文本对齐

text-align: center/ left/ right;

2.文本装饰

text-decoration: underline/ none/ overline/ line-through;

3.文本缩进

text-indent: 值;

这里的值可以使用px或者em来进行设置缩进距离，其中em为当前文字的大小（注意：这里的文本缩进可以为负值）

4.行高

line-height: 多少px；

行高指的是上下文本行之间的基线距离，其中行高=上下边距+字体大小

下面例子中上下边距为12px

<style>
div {
line-height: 40px;
font-size: 16px;
}
</style>
<div> 行高设置</div>

设置文字居中对齐：行高(line-height)与元素(height)高度相同时就可以实现文字居中对齐了。

代码：

<!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>Document</title>
    <style>
        p {
            /* 文本对齐 */
            /* text-align: center; */
            /* 文本装饰 */
            text-decoration: line-through;
            /* 行高设置 */
            line-height: 40px;
            /* 字体大小设置 */
            font-size: 16px;
            /* 文本缩进设置 */
            text-indent: 2em;

        }
    </style>
</head>
<body>
    <h2>文本装饰设置</h2>
    <p>这是演示字体样式的一段文本内容。</p>
</body>
</html>

3.背景属性

（1）背景颜色

background-color:指定颜色；

（2）背景图片

background-image: url(指定图片的路径)

（3）背景平铺

background-repeat: repeat/ no-repeat/ repeat-x/ repeat-y （平铺方式）

（4）背景位置

background-position: x y;

这里的x和y都代表了坐标位置

（5）背景尺寸

指定背景是如何显示的

background-size: 长宽 /百分比 /cover /contain;

其中cover是全覆盖，可能有些内容不能进行显示；

contain是图片适应内容区域的最大显示。

代码：

<!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>Document</title>
    <style>
        div {
            /* 背景颜色 */
            background-color: seashell;
            /* 背景图片 */
            background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F11745763187%2F641.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644590978&t=aa4ccf834e5706fd28501e1e0aea9e8c);
            height: 400px;
            /* 背景位置 */
            background-position: center;
            /* 背景是否重复 */
            background-repeat: repeat;
            /* 背景尺寸 */
            background-size: contain;
        }
    </style>
</head>
<body>
    <div>
        
    </div>
</body>
</html>

4.边框效果（圆角矩形）

语法：border-radious: px / %;

这里可以使用多少px或者多少%来设置弧度的大小，如果需要设置为圆形，则设置成50%即可。

这里对于边框的设置也可以分开设置每一个角的样式，顺序从上左开始顺时针设置，

如 border-radious: 10px 10px 10px 10px ;

代码：

<!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>Document</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            /* 设置边框的样式  */
            border: 5px solid red;
            /* 圆角边框显示 */
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

注意：这里如果需要设置为圆角矩形，则使用px设置border-radious为高度的一半即可

5.元素中的块级元素和行内元素

（1）块级元素

1. 常见的块级元素有：h1 - h6，p，div，ul，ol，li 等。

2.特点：

独占一行；

高度（如果不写，默认为0），宽度（默认和父级元素相同），行高，内外边距都可以进行设置；

宽度默认为父级元素的100%；

块级元素是一个盒子，里面可以放块级元素和行内元素（注意：文字类的元素里面不可以使用块级元素）；

（2）行内元素

1.常见的行内元素：a，strong，b，em，i，del，s，ins，u，span。

2.行内元素的特点：

不独占一行，一行可以有多个；

高度，宽度，行高设置无效；

左右外边距有效（上下无效），内边距有效；

默认宽度为本身的内容；

行内元素中不能有块级元素；

（3）行内元素与块元素之间的显示模式修改

display: block / inline /inline-block;

block:行内元素设置为块元素；

inline：块元素设置为行内元素；

inline-block：设置为行内块元素

六.盒模型

1.什么是盒模型

每一个 HTML 元素就相当于是一个矩形的 "盒子；其中盒子由边框 border，内容 content，内边距 padding，外边距 margin构成。具体的盒子模型如下所示：

2.边框属性

粗细：border-width 样式：border-style: solid(实线) /dashed(虚线) /dotted(点线)

颜色: border-color；

常见的写法一般连起来写如：border: 10px red solid;(这里的顺序无所谓);

注意：使用边框的时候会撑大盒子，最终显示的结果会加上边框的宽度，为了避免发生这样的情况，这里使用box-sizing属性可以使边框不再撑大盒子；

一般我们在style中会写一个下面的选择器来避免盒子被撑大

* {
box-sizing: border-box;
}

例子：

代码：

<!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>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            /* 避免盒子被撑大 */
            box-sizing: border-box; 
            
            /* 设置盒子的边框显示 */
            border: 10px solid green;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

3.内边距

padding设置内容和边框之间的距离，如果不写padding，默认内容顶着边框来放置，如果加上了这个内边距属性之后，就会看到边框和内容之间就会有了距离，注意：这里也用到了box-sizing属性避免盒子被撑大。

常见写法如下：

padding: 5px; （表示四个方向都是 5px）
padding: 5px 10px; （表示上下内边距 5px, 左右内边距为 10px）
padding: 5px 10px 20px;（ 表示上边距 5px, 左右内边距为 10px, 下内边距为 20px）
padding: 5px 10px 20px 30px;（表示 上5px, 右10px, 下20px, 左30px (顺时针)）

4.外边距

（1）用法

用于控制盒子与盒子之间的距离。

写法和padding类似，也有4种写法

margin: 10px; // 四个方向都设置
margin: 10px 20px; // 上下为 10, 左右 20
margin: 10px 20px 30px; // 上 10, 左右 20, 下 30
margin: 10px 20px 30px 40px; // 上 10, 右 20, 下 30, 左 40

（2）使用margin属性使块级元素水平居中

设置元素居中的前提条件为：

指定宽度(如果不指定宽度, 默认和父元素一致)；
把水平 margin 设为 auto；

3种设置水平居中的方法：

margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;

注意：这里的水平居中是针对块级元素；而之前学过的text-align：center是让行内元素进行居中的，而且不支持垂直居中。

5.去除浏览器默认样式的方法

将下面代码放入到style中即可

* {
marign: 0;
padding: 0;
}

七.弹性布局

1.什么是弹性布局

flex 布局的本质是给父盒子添加 display:flex 属性, 来控制子盒子的位置和排列方式.

设置弹性布局前：

设置弹性布局后：

这里的span标签是div标签的父元素，通过弹性布局从而修改了子元素的显示效果。

2.弹性布局的设置及语法

注意：弹性布局中的设置都是在父元素中进行设置，从而修改子元素的显示效果

（1）弹性布局语法

display: flex;

（2）设置主轴元素排列方式

可以通过justify-content：space-around / flex-end / flex-start /center / space-between 等来设置是根据哪种方式来使子元素进行隔开。

代码：

<!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>Document</title>
    <style>
        div {
            height: 200px;
            background-color: red;
            display: flex;
            justify-content: space-around;
        }
        span {
            background-color: green;
        }
    </style>
</head>
<body>
    <div>
        <span>我是span1</span>
        <span>我是span2</span>
        <span>我是span3</span>
    </div>
</body>
</html>

注意：当父元素设置为 display: flex 之后, 子元素的 float, clear, vertical-align 都会失效。

（3）设置侧轴的元素排列方式

align-items: stretch /center / flex-start / flex-end / space-between / space-around

注意：如果需要设置多行，则需要使用item-contents。

代码：

<!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>Document</title>
    <style>
        div {
            height: 200px;
            background-color: red;
            /* 开启弹性布局 */
            display: flex;
            /* 设置主轴的显示效果 */
            justify-content: space-around;
            /* 设置侧轴的显示效果 */
            align-items: center;
        }
        span {
            background-color: green;
        }
    </style>
</head>
<body>
    <div>
        <span>我是span1</span>
        <span>我是span2</span>
        <span>我是span3</span>
    </div>
</body>
</html>

筑梦小子

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
初识CSS

一.css的作用css是层叠样式表的简称，作用是：能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离。二.语法规范选择器+{1/n条声明}选择器就是指定修改的目标，如里面的标签p或者a,都可以指定设置样式。声明就是对具体修改成什么样式，其中声明的书写格式是键值对的方式。例子：<style>/* 这里是对p标签设置样式 */p {/* 设置字体颜色 */color: red;/* 设置字体大小 */font-
复制链接

扫一扫