CSS3给网页穿上美丽的外衣

Posted tea_year

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS3给网页穿上美丽的外衣相关的知识,希望对你有一定的参考价值。

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

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、选择器的类型

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

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 格式

以上是关于CSS3给网页穿上美丽的外衣的主要内容,如果未能解决你的问题,请参考以下文章

让网页更加美丽(css入门)

网页文件必须含JS,CSS吗,起啥用途?

Python图形用户界GUI大解密(上篇)

Python图形用户界GUI大解密(上篇)

Python图形用户界GUI大解密(上篇)

Python图形用户界GUI大解密(上篇)