山西农业大学20240922

Jia_dongyao

已于 2024-09-22 18:36:51 修改

阅读量608

点赞数 13

分类专栏：山西农业大学文章标签： java css

于 2024-09-22 11:36:51 首次发布

本文链接：https://blog.csdn.net/2401_86991268/article/details/142430935

版权

山西农业大学专栏收录该内容

22 篇文章 2 订阅

订阅专栏

01-CSS

- 一.CSS

一.CSS

1. 概述

层叠样式表, 用来渲染HTML的样式文件
作用:

html: 用来搭建页面结构的,内容展示
css: 处理页面结构, 美化页面

优势: css代码具有一定的可重用性以及可维护性
scss 将重用性做到极致

2.CSS语法规范

选择器: 负责找到元素, 可以使用多种选择器来完成, 但如果没有选中元素, css不会报错, 只是不渲染页面
样式声明可以是多个, 没有声明个数的限制, 每一个声明结束后都要加一个分号
css读取顺序, 从上向下依次渲染, 遇到重复的样式, 会覆盖

3.CSS样式使用方式

3.1 内联样式(行内样式)

在html元素的开始标签中, 写style属性, 在style属性中编写css样式
修饰当前的元素, 多种样式用 ; 隔开
color:red; 设置标签中文字的颜色
background-color:yellow; 设置标签的背景颜色
font-size: 16px; 设置标签中字体的大小
语法:
<标签 style="样式声明; 样式声明; 样式声明;"></标签>
特点: 只能修饰当前的一个元素, 不能重用, 代码没有可维护性
内联样式在项目中一般不用, 只能学习和测试中使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>演示css样式使用方式</title>
</head>
<body>
<!-- 内联样式-->
    <h1 style="color:red;background-color: yellow;">感受AI黑科技</h1>
    <h1 style="color:red;background-color: yellow;">你好!!!</h1>
</body>
</html>

3.2 内部样式表

内部样式表要写在head标签中的style标签里

<head>
    <meta charset="UTF-8">
    <title>演示css样式使用方式</title>
<!--    2. 内部样式表-->
    <style>
    /*找到页面中所有的div元素应用相同的样式*/
        div{
            color: orange;
            background-color: aqua;
            font-size: 24px;
        }
    </style>
</head>

没有多余的css文件向服务器发送请求
只会影响当前的html文件样式和大小
只能渲染当前的页面, 复用性也不强(其他的html页面中无法使用)
一般用于学习和测试, 为了减少请求, 样式较为单一的页面有时可以使用内部样式表

3.3 外部样式表

单独创建一个css文件,文件的后缀名 XXX.css, 在head标签中使用link标签引入到当前页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>演示css样式使用方式</title>
<!--
    3. 外部样式表
    href属性: css路径,css文件具体在哪
    link标签: 可以写多个
    rel: 引入的文件与html的关系, stylesheet表示的是样式表
-->
    <link rel="stylesheet" href="./css/01外部样式表.css">
</head>

复用性强
便于维护
向服务器增加了请求的次数

3.4 样式表优先级

优先级:
内联样式表 > 内部样式表 = 外部样式表
注意: 内部样式表和外部样式表中, 哪个样式离元素近,就应用哪个样式
样式表优先级是可以修改的: 可以为样式声明的后边添加 !important
表示优先级最高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式表优先级</title>
    <!--    外部样式表: p标签的字体颜色为: pink-->
    <link rel="stylesheet" href="./css/02外部样式表.css">
    <style>
        /*内部样式表*/
        div{
            color:yellow;
        }
        p{
            color:blue;
        }
    </style>

</head>
<body>
<!--内联样式: 字体颜色是红色-->
    <div style="color:red;">9月19日，以“云启智跃，产业蝶变”为主题的2024云栖大会在杭州云栖小镇举行。大会设三日主论坛、400多个分论坛及并行话题，开放4万平米的智能科技展区，展示全球百余款AI应用。还设置人工智能+、计算、前沿应用三大主题馆，吸引大模型、自动驾驶、机器人等前沿技术齐聚杭州，共同展示AI时代云上创新的潮流科技。</div>
    <p>李路凭借《人世间》获得优秀导演奖。优秀编剧奖则由《县委大院》的王小枪摘得。
        演员奖方面，雷佳音、赵丽颖分别凭借《人世间》《风吹半夏》获得优秀男女演员奖</p>
<!--
    优先级:
        内联样式表 > 内部样式表 = 外部样式表
        注意: 内部样式表和外部样式表中, 哪个样式离元素近,就应用哪个样式
-->
</body>
</html>

03练习.html
一个p标签, 内容假文
用内部样式表设置文本颜色为 blue ,字体大小为 24px
外部样式表文本颜色为红色,字体大小为 40px
将外部样式表引入到html中, 改变style和link的位置,查看效果
给p标签通过内联样式设置文本颜色为purple, 字号为50px;
给任意属性添加 !important 改变其优先级, 查看效果

4.CSS选择器

选择器的作用就是在html中找到元素并且渲染它, 利用的是元素的名字

4.1 通用选择器(通配符)

选中页面中所有的元素
语法: *{ 样式声明; 样式声明;}
让所有的元素都应用此样式,但是使用 * 渲染效率极低,因为所有的元素都要渲染一遍, 一般很少使用
应用: *{margin:0;padding:0;} 所有的元素都清空内外边距

<head>
    <style>
        /*通配符:选中页面中所有的元素*/
        *{
            color:orange;
        }
    </style>
</head>
<body>
<!-- 通用选择器-->
    儿歌   --- 测试*可以选中body吗?--可以
    <div>在小小的花园里面</div>
    <p>挖呀挖呀挖</p>
    <h3>种小小的种子</h3>
    <span>开小小的花</span>
</body>

4.2 元素选择器(标签选择器)

使用html标签名作为选择器找到元素, 并且为元素渲染样式
特点: 所有该标签名的标签样式全部修改,无法精准定位某一个元素, 要为相同的元素名设置不同样是, 元素选择器做不到
应用: 定义页面中某一类元素的统一样式,可以使用元素选择器
div{样式声明;}
p{样式声明;}
权重值: 1

<head>
    <style>
        /*元素选择器*/
        p{
            color: blue;
        }
    </style>
</head>
<body>
<!-- 通用选择器-->
    儿歌   --- 测试*可以选中body吗?--可以
    <div>在小小的花园里面</div>
    <p>挖呀挖呀挖</p>
    <h3>种小小的种子</h3>
    <span>开小小的花</span>
    <div>在大大的花园里面</div>
    <p>挖呀挖呀挖</p>
</body>