CSS3给网页穿上美丽的外衣

快来打我* 2022-09-06 01:41 261阅读 0赞

# 二、给网页穿上美丽的外衣 #

## 1、本章目标 ##

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

## 2、为什么要使用css ##

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5nY2hlbjEyNA_size_16_color_FFFFFF_t_70_pic_center]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5nY2hlbjEyNA_size_16_color_FFFFFF_t_70_pic_center 1]

## 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” ，

### 6、css样式的优先级 ###

css样式的优先级

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

![在这里插入图片描述][f46fc67075ee4723a6b16eb96063e6a9.gif_pic_center]

## 7、css代码样式 ##

选择器\{

属性：值；

## 8、选择器的类型 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5nY2hlbjEyNA_size_16_color_FFFFFF_t_70]

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、制作京东新闻资讯页 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5nY2hlbjEyNA_size_16_color_FFFFFF_t_70_pic_center 2]

## 15、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小的时候

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

练习：

制作我的购物车

## 16、span标签 ##

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

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

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

居中 center

例：移动到右下

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

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

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

练习：

制作我的购物车

\[外链图片转存中…(img-7KtnYo72-1629374083250)\]

## 16、span标签 ##

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5nY2hlbjEyNA_size_16_color_FFFFFF_t_70_pic_center]: /images/20220829/d8b0bf2fef464e0f8d44e9b9a8075478.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5nY2hlbjEyNA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20220829/c3f92696f4304368ae01f4fa5931d2f2.png
[f46fc67075ee4723a6b16eb96063e6a9.gif_pic_center]: /images/20220829/6e2d49b0b01447159142eb8d47c56100.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5nY2hlbjEyNA_size_16_color_FFFFFF_t_70]: /images/20220829/c4fa7b8ea0944af7b4ed93082b039b31.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5nY2hlbjEyNA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20220829/9bda2762ddc54f5a8437f11c98e4ace9.png