初识CSS 、css文本和字体样式以及css背景样式

最新推荐文章于 2024-08-14 10:42:14 发布

高申航

最新推荐文章于 2024-08-14 10:42:14 发布

阅读量293

点赞数 1

文章标签： css html html5

本文链接：https://blog.youkuaiyun.com/qq_46058838/article/details/120668691

版权

1、本章目标

掌握CSS的语法结构和在网页中的应用掌握CSS的文本和字体样式掌握CSS背景样式

2、为什么要使用css

使用css，可以让原始的页面即黑色文字页面变得丰富起来，漂亮起来，实现我们想要的排版布局的效果

3、css是什么

层叠样式表（Cascading Style Sheet）

html是骨架。css是衣服，起到装饰的作用，花花绿绿的

4、CSS的优势

内容与表现分离
网页的表现统一，容易修改
丰富的样式，使页面布局更加灵活
减少网页的代码量，增加网页的浏览速度，节省网络带宽
运用独立于页面的CSS，有利于网页被搜索引擎收录

5、css代码书写的位置

1、内联式（头部）

head标签的内部

写法在同一文件里，写在head里面，写style标签里面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        h1{
            color: red;
        }
    </style>
</head>
<body>
    <h1>我是h1</h1>
    
</body>
</html>

2、外联式

在不同的文件中，需要新建一个css 文件，然后在head中写link 按table，在href中写入css代码路径，关联起来即可。同一个html文件，可以引入无数个css文件。

新建一个css文件。示例：外联样式.css

h1{
    color: blue;
}

新建html，导入css样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./外联样式.css">
</head>
<body>
    <h1>我是h1</h1>
    
</body>
</html>

3、内部

在标签内部，写css样式在开始标签内部，写style=”color:blue” ，

<body>
    <h1 style="color: green;">我是h1</h1>
    
</body>

6、css样式的优先级

css样式的优先级

内部样式>内联样式表>外联样式表

7、css代码样式

选择器{

属性：值；

}

8、选择器的类型

好比姓名可以不是唯一：姓名是类名选择器

而身份证号只有一个：身份证号是id选择器

1、标签选择器，通过标签来选择页面元素。直接写标签名

h1{

属性：值；

}

2、id选择器

通过自定义的id来选择元素，id唯一，不可重复id=”id名”

#id名{

属性：值；

}

3、类选择器

通过自定义的类名来选择元素，类可以重复，可以多个，class=”类名”

.类名{

属性：值；

}

9、选择器优先级

ID选择器>类选择器>标签选择器

范围越小，优先级越高

10、字体样式

修改字体时，只要电脑内有的字体都可以进行修改

怎么看电脑内装的字体，计算机，c盘，Windows，fonts,就可以看到我们电脑上装的所有字体

设置字体大小，学习新的一个知识，px像素。

font-weight 取值 100——900的范围字体加粗

字体颜色：直接color

11、文本样式

color颜色取值的格式

1、直接写颜色也要复合写法 yellowgreen 黄绿色

2、16进制

3、RGB 红绿蓝三原色

颜色不需要记，ui会给你的
文字对齐方式

text-align: center 居中

right 右对齐

left 左对齐

对齐参照点不同，对齐的方式也不同，以父级元素为标准，不设宽度，默认为浏览器宽度。暂时有这个概念，盒子模型学完就推翻了

如果想要指定对齐，需要设置宽和高

宽：weight 高：hight
text-indent 首行缩进

单位可以是px，像素，也可以是em，即缩几个字体，根据全部字体的大小来变化，首行缩进用em比较合适

开启控制台进行调整
line-height：设置行高，设置文字的垂直居中 line-height，和父元素的高度保持一致，即垂直居中

设置文本装饰

text-decoration: line—throw 中划线

underline 下划线

overline 上划线

12、伪类语法

注释：在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！

注释：在 CSS 定义中，a:active 必须位于 a:hover 之后，这样才能生效！

13、鼠标形状 cursor：

hover 当鼠标移动到上面的时候，执行的样式

语法：

 a:hover{
            cursor: move;
        }

visited 针对a标签超链接，当链接从未访问过时，显示初始颜色，只要点击过，就显示visite设置的颜色。

鼠标指针变化

直接在style下面写属性cursor：值；

其中的值分别代表：

pointer:指针变小手

move: 移动

wait: 等待（不要用）

14、div标签

div就是一个容器，一个盒子。把东西都装在一起。目的就是为了方便管理，把页面分成一块一块的，管理界面，进行调整的时候，不需要一个个的调整，可以拿着盒子一个个的调整，更加方便快捷。

背景图片和插入img的图片，img直接插入，背景图片是用来做背景的，和桌面一样

坐标移动的原理

div背景图片图片小 div大

background：url(“图片路径”) no-repeat（不平铺）坐标（x轴） y轴；

background: url("1.jpg") no-repeat 80px 90px;

移动坐标 x轴为左负右正 y轴为上负下正，可以直接写像素值

若移动左上右下等等，可以直接用上 top 下 bottom 左 left 右 right

居中 center

例：移动到右下

background: url("1.jpg") no-repeat right bottom;

div背景图片，图片大，div小的时候

可以直接用坐标进行调整，左负右正，上负下正，控制台，进行调整

15、span标签

span是一个文字标签等于小括号

span的添加，不会对文字造成任何的变化，目的作用在于，将一段文字中的某一个或者几个文字进行样式的更改，可以用span尽心包裹，然后设置span 格式