菜单 搜索
首页 前端知识 深入理解CSS基础【代码审计实战指南】

深入理解CSS基础【代码审计实战指南】

2024-08-14 00:08:48 前端知识 前端哥 131 892 我要收藏

文章目录

  • 为什么需要css
  • CSS语法
      • CSS的组成
      • css注释：
  • 快速入门示例：
  • 常用样式
    • 字体颜色和边框
      • 颜色介绍
      • 颜色示例：
      • 边框
      • 边框的宽度与高度
    • 字体样式
    • 背景样式
    • 文本居中
  • 字体颜色和边框
      • 颜色介绍
      • 颜色示例：
      • 边框
      • 边框的宽度与高度
  • 字体样式
  • 背景样式
  • 文本居中
  • css使用三种方式
  • CSS选择器
    • 元素选择器
    • ID选择器
    • class选择器

学习参考：CSS 教程 (w3school.com.cn)

为什么需要css

  1. 在没有CSS之前，我们想要修改HTML元素的样式需要为每个HTML元素单独定义样式属性，费心费力。所以CSS就出现了。
  2. 使用CSS将HTML页面的 内容与样式分离提高web开发的工作效率(针对前端开发）
  3. CSS 可以让 html 元素(内容)+ 样式(CSS)分离，更好的控制页面

CSS语法

  1. CSS的组成

  2. 在这里插入图片描述

    1. 选择器

    2. 声明

      1. 由属性与值组成
      2. 用分号分隔

  3. css注释：

    1. /注释内容/

快速入门示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css 快速入门</title>
</head>
<body>
    <div>hello,北京</div>
    <br/>
    <div>hello,上海</div>
    <br/>
    <div>hello,天津</div>
    <br/>
</body>
</html>
<!--课堂代码-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css 快速入门</title>
    <!--
    老师解读
    1. 在 head 标签内，出现了 <style type="text/css"></style>
    2. 表示要写 css 内容
    3. div{} 表示对 div 元素进行样式的指定
    4. width: 300px; (属性) 表示对 div 样式的具体指定，可以有多个
    5. 如果有多个，使用 ; 分开即可
    6. 当运行页面时，div 就会被 div{} 渲染，修饰
    -->
    <style type="text/css">
        div {
            width: 200px;
            height: 100px;
            background-color: gold;
        }
    </style>
</head>
<body>
    <!--先使用传统的方法-->
    <div>hello,北京</div>
    <br/>
    <div>hello,上海</div>
    <br/>
    <div>hello,天津</div>
    <br/>
    <div>hello,深圳</div>
    <br/>
</body>
</html>

在这里插入图片描述

常用样式

字体颜色和边框

  1. 颜色介绍

    1. 颜色可以写颜色名 比如 green，也可以写rgb 值比如rgb(200,200,200)和十六进制表示值比如#70809

  2. 颜色示例：

    1.  <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>颜色</title>
     <style type="text/css">
         /* 为了讲课方便，我们就在这里写 css 样式 */
         /*
         说明:
         颜色可以写颜色名 比如 green，
         也可以写 rgb 值 比如 rgb(200, 200, 200) 和十六进制表示值比如 #708090
         color: rgb(255, 222, 1); // color: #ff7d44; // color: red;
         */
         div {
             /* 有三种方式，指定颜色
             1. 英文
             2. 16进制 #ff7d44 [使用最多]
             3. 三原色 rgb(100, 100, 100)
             */
             color: #ff7d44;
         }
     </style>
 </head>
 <body>
     <div>韩顺平教育</div>
 </body>
 </html>

    在这里插入图片描述

  3. 边框

    1. 代码示例：

      1.  <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>边框</title>
     <style type="text/css">
         div {
             width: 300px;
             height: 100px;
             border: 1px dashed blue;
         }
     </style>
 </head>
 <body>
 <div>韩顺平教育</div>
 </body>
 </html>

    在这里插入图片描述

  4. 边框的宽度与高度

    1. 介绍：

      1. 宽度/高度像素值：100px；也可以是百分比值：50%

    2. 代码示例

      1.  <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>背景</title>
     <style>
         div {
             width: 200px;
             height: 100px;
             background-color: #ff7d44;
         }
     </style>
 </head>
 <body>
     <div>hello，word</div>
 </body>
 </html>

在这里插入图片描述

字体样式

  1. 介绍

    1. font-size: 指定大小，可以按照像素大小
    2. font-weight : 指定是否粗体
    3. font-family : 指定类型

  2. 代码示例：

    1.  <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>字体样式</title>
     <style type="text/css">
     /*
     */
         div {
             border: 1px solid black;
             width: 300px;
             font-size: 40px;
             font-weight: bold;
             font-family: '华文新魏', sans-serif;
         }
     </style>
 </head>
 <body>
     说明:
     1. font-size: 指定大小，可以按照像素大小<br>
     2. font-weight : 指定是否是粗体<br>
     3. font-family : 指定字体类型<br>
     <div>hello，word</div>
 </body>
 </html>

在这里插入图片描述

背景样式

  1. 代码示例：

    1.  <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>背景</title>
     <style>
         div {
             width: 200px;
             height: 100px;
             background-color: #ff7d44;
         }
     </style>
 </head>
 <body>
     <div>hello，word</div>
 </body>
 </html>

在这里插入图片描述

文本居中

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本居中</title>
    <style type="text/css">
        div {
            border: 1px solid blue; /*顺序不要求*/
            width: 300px;
            background: aliceblue;
            font-size: 40px;
            font-weight: bold;
            font-family: '新宋体', sans-serif;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
        }
    </style>
</head>
<body>
    <div>hello，word</div>
</body>
</html>

在这里插入图片描述

字体颜色和边框

  1. 颜色介绍

    1. 颜色可以写颜色名 比如 green，也可以写rgb 值比如rgb(200,200,200)和十六进制表示值比如#70809

  2. 颜色示例：

    1.  <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>颜色</title>
     <style type="text/css">
         /* 为了讲课方便，我们就在这里写 css 样式 */
         /*
         说明:
         颜色可以写颜色名 比如 green，
         也可以写 rgb 值 比如 rgb(200, 200, 200) 和十六进制表示值比如 #708090
         color: rgb(255, 222, 1); // color: #ff7d44; // color: red;
         */
         div {
             /* 有三种方式，指定颜色
             1. 英文
             2. 16进制 #ff7d44 [使用最多]
             3. 三原色 rgb(100, 100, 100)
             */
             color: #ff7d44;
         }
     </style>
 </head>
 <body>
     <div>韩顺平教育</div>
 </body>
 </html>

在这里插入图片描述

  1. 边框

    1. 代码示例：

      1.  <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>边框</title>
     <style type="text/css">
         div {
             width: 300px;
             height: 100px;
             border: 1px dashed blue;
         }
     </style>
 </head>
 <body>
 <div>韩顺平教育</div>
 </body>
 </html>

在这里插入图片描述

  1. 边框的宽度与高度

    1. 介绍：

      1. 宽度/高度像素值：100px；也可以是百分比值：50%

    2. 代码示例

      1.  <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>背景</title>
     <style>
         div {
             width: 200px;
             height: 100px;
             background-color: #ff7d44;
         }
     </style>
 </head>
 <body>
     <div>hello，word</div>
 </body>
 </html>

在这里插入图片描述

字体样式

  1. 介绍

    1. font-size: 指定大小，可以按照像素大小
    2. font-weight : 指定是否粗体
    3. font-family : 指定类型

  2. 代码示例：

    1.  <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>字体样式</title>
     <style type="text/css">
     /*
     */
         div {
             border: 1px solid black;
             width: 300px;
             font-size: 40px;
             font-weight: bold;
             font-family: '华文新魏', sans-serif;
         }
     </style>
 </head>
 <body>
     说明:
     1. font-size: 指定大小，可以按照像素大小<br>
     2. font-weight : 指定是否是粗体<br>
     3. font-family : 指定字体类型<br>
     <div>hello，word</div>
 </body>
 </html>

在这里插入图片描述

背景样式

  1. 代码示例：

    1.  <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>背景</title>
     <style>
         div {
             width: 200px;
             height: 100px;
             background-color: #ff7d44;
         }
     </style>
 </head>
 <body>
     <div>hello，word</div>
 </body>
 </html>

在这里插入图片描述

文本居中

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本居中</title>
    <style type="text/css">
        div {
            border: 1px solid blue; /*顺序不要求*/
            width: 300px;
            background: aliceblue;
            font-size: 40px;
            font-weight: bold;
            font-family: '新宋体', sans-serif;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
        }
    </style>
</head>
<body>
    <div>hello，word</div>
</body>
</html>

在这里插入图片描述

css使用三种方式

  1. 在标签的 style 属性上设置CSS样式

    1. 代码示例：

      1.  <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>在标签的style属性上设置CSS样式</title>
 </head>
 <body>
     <div style="color: red;">hello,北京</div>
     <br/>
     <div style="color: blue;">hello,上海</div>
     <br/>
     <div style="color: green;">hello,天津</div>
     <br/>
 </body>
 </html>

在这里插入图片描述

  1. 在head标签中，使用style标签来定义需要的CSS样式

    1. 代码示例：

      1.  <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>在head标签中，使用style标签来定义需要的CSS样式</title>
     <style>
         div {
             color: blue;
         }
         span {
             color: red;
         }
     </style>
 </head>
 <body>
     <div>hello,北京</div>
     <br/>
     <div>hello,上海</div>
     <br/>
     <span>hello,span</span>
 </body>
 </html>

在这里插入图片描述

  1. 把 CSS 样式写成单独的 CSS 文件，再通过 link 标签引入

    1. 代码示例

      1.  /* test.css 内容 */
 div {
     width: 300px;
     height: 100px; /* 这是一个注释信息 */
     background: beige;
 }

 span {
     border: 3px solid red;
 }
 ===================================
 use-css-style.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>把 CSS 样式写成单独的 CSS 文件，再通过 link 标签引入</title>
     <!-- link 标签专门用来引入 css 样式代码 -->
     <link rel="stylesheet" href="test.css"/>
 </head>
 <body>
     <div>hello, 北京~</div>
     <br/>
     <div>hello, 上海</div>
     <br/>
     <span>hello, span</span>
 </body>
 </html>

CSS选择器

  1. 元素选择器

    1. 通常是某个 HTML 元素， 比如 p、h1、adiv等

    2. 代码示例

      1.  <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>元素选择器</title>
 </head>
 <body>
     <h1>hello，word</h1>
     <p>hello, world~</p>
 </body>
 </html>
      2. 在这里插入图片描述

  2. ID选择器

    1. 可以为标有特定id的HTML元素指定特定的样式。

    2. id选择器以"#"来定义

    3. 代码示例：

      1.  <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>id 选择器</title>
     <!-- 我们就在这里写css样式
     解读：
     1. 使用id选择器，需要先在要修饰元素指定id属性, id值是程序员自己指定
     2. id 是唯一的，不能重复
     3. 在<style> 标签中指定id选择器时，前面需要有 #id值 -->
     <style type="text/css">
         #hsp1 {
             color: gold;
         }
         #css2 {
             color: green;
         }
     </style>
 </head>
 <body>
     <h1 id="hsp1">hello，word</h1>
     <p id="css2">hello, world~</p>
 </body>
 </html>
      2. 在这里插入图片描述

  3. class选择器

    1. ，可以通过 class 属性选择去使用这个样式

    2. 基本语法：

      1. .class 属性值{属性:值；}

    3. 代码示例：

      1.  <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>类选择器</title>
     <!-- 我们就在这里写css样式
     解读：
     1. 使用class选择器，需要在被修饰的元素上，设置class属性，属性值由程序员指定
     2. class 属性的值，可以重复
     3. 需要在 <style></style> 指定类选择器的具体样式，前面需要是 .类选择器名 -->
     <style type="text/css">
         .css1 {
             color: red;
         }
         .css2 {
             color: sandybrown;
         }
     </style>
 </head>
 <body>
     <div class="css1">hello，word</div>
     <div class="css1">hello，word 8</div>
     <p class="css2">hello, world~</p>
 </body>
 </html>
      2. 在这里插入图片描述

文本来源：韩顺平java课程笔记

转载请注明出处或者链接地址：https://www.qianduange.cn//article/15436.html
标签
自然语言处理
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

基于微信小程序的高校宿舍管理系统

2024-08-20 09:08:59

HTML5 地理定位

2024-08-20 09:08:58

HTML5和css样式精灵图和字体图标的使用

2024-08-20 09:08:57

解决窗口滚动条消失而导致的页面内容抖动的问题

2024-08-20 09:08:57

Vue2从基础到实战（指令篇）

2024-08-20 09:08:51

HTML5 的真相（一）

2024-08-20 09:08:31

基于vue elementPlus的动态导航标签栏-tabs

2024-08-20 09:08:28

使用 HTML、CSS 和 JS 创建在线音乐播放器(含免费完整源码)

2024-05-28 09:05:34

HTML学习：前端实现文字滚动效果（附视频教程）_html文字轮播代码(4)

2024-08-20 09:08:52

web期末作业设计网页/web前端开发期末大作业/html css网页制作成品(第41-50套/总计100套)欣赏

2024-08-20 09:08:39

大家推荐的文章
1

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
2

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
3

npm的使用

2024-08-18 00:08:131000
4

JavaScript与jQuery：昔日王者与现代前端的交响曲【含代码示例】

2024-07-30 22:07:311000
5

在HTML和CSS当中运用显示隐藏

2024-06-17 09:06:541000
6

成为优秀的TS体操高手 之 TS 类型体操前置知识储备

2024-06-10 11:06:351000
7

django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000
8

html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000
9

jquery实现注册表单验证（仅供参考）

2024-06-07 00:06:411000
10

基于Echarts的高校就业数据可视化管理系统设计与实现（计算机毕业设计源码81461）

2024-05-29 10:05:301000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！