后端程序员必备前端知识—CSS

已于 2024-03-30 13:53:35 修改
阅读量1.1k 收藏 28
点赞数 50
文章标签： 前端 css
于 2024-03-30 11:26:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47095832/article/details/137168802
版权
本文详细介绍了CSS的基础知识，包括CSS的作用、快速入门、常见样式（如颜色、边框、尺寸、背景、字体等）、三种使用方式（行内、内联、外联）、选择器（元素选择器、ID选择器、类选择器、组合选择器）以及优先级规则。
摘要由CSDN通过智能技术生成

在这里插入图片描述

文章目录

一、CSS介绍

1.为什么需要CSS

（1）在没有CSS之前，我们想要修改HTML元素的样式需要为每个HTML元素单独定义样式属性，费心费力。所以CSS就出现了

（2）使用CSS将HTML页面的内容与样式分离提高web开发的工作效率（针对前端开发）

（3）CSS可以让html元素（内容）+ CSS（样式）分离，更好地控制页面

2.CSS快速入门

需求：创建simple_css.html，完成如下网页

在这里插入图片描述

--simple_css.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{}渲染/修饰
	7.小经验: 在调试css时，可以通过修改颜色或者大小，来看是否生效
	8.idea格式化快捷键: Ctrl + Alt + L, 注意该快捷方式要没有与其他软件里重复
-->
    <style type="text/css">
        div {
            width: 300px;
            height: 100px;
            background-color: gold;
        }
    </style>
</head>
<body>
    <div>hello 北京</div>
    <br/>
    <div>hello 上海</div>
    <br/>
    <div>hello 广州</div>
    <br/>
</body>
</html>

3.CSS语法

（1）CSS语法可以分为两部分：①选择器 ②声明

（2）声明由属性和值组成，多个声明之间用分号分隔

在这里插入图片描述

（3）说明：最后一条声明可以不加分号（建议加上）

（4）一行每行只描述一个属性

（5）CSS注释：/**/，类似java

二、常用样式

1.字体颜色

  • 介绍

    颜色可以写颜色名（比如blue），也可以写rgb值 rgb(200,200,200) 或 用十六进制表示（比如#708090）

在这里插入图片描述

  • 应用实例

在这里插入图片描述

<!--color.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>颜色</title>
    <style type="text/css">
        div {
            /*
                有三种方式指定颜色:
                1.英文
                2.16进制 #7CC6FF [使用最多]
                3.三原色rgb(1, 1, 1)
            */
            color: #7CC6FF
        }
    </style>
</head>
<body>
<div>韩顺平教育</div>
</body>
</html>

2.边框

  • 应用实例

    在这里插入图片描述

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

3.高度height/宽度width

  • 高度/宽度像素值：100px， 也可以是百分比值：50%

4.背景颜色

  • background-color属性用来设置背景颜色

  • 应用实例

    在这里插入图片描述

<!--bg.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景</title>
    <style type="text/css">
        div {
            width: 300px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
<div>韩顺平教育</div>
</body>
</html>

5.字体样式

  • 介绍

    font-size：指定大小，可以按照像素大小

    font-weight：指定是否粗体

    font-family：指定类型

  • 应用实例

在这里插入图片描述

<!--font_style.html-->
<!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: 30px;
            font-weight: bold;
            font-family: 微软雅黑;
        }
    </style>
</head>
<body>
<div>韩顺平教育</div>
</body>
</html>

6.div居中

  • margin-left、margin-right 如果设置为auto，表示左右居中

  • 应用实例

​ 需求：创建div_center.html，实现div居中效果

在这里插入图片描述

<!--div_center.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div居中</title>
    <style type="text/css">
        div {
            border: 1px solid black;
            width: 300px;
            font-size: 30px;
            font-weight: bold;
            font-family: 微软雅黑;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>
<body>
<div>韩顺平教育</div>
</body>
</html>

7.文本居中

  • text-align: center 表示文本居中
  • 应用实例

在这里插入图片描述

<!--text_center.html-->
<!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: 30px;
            font-weight: bold;
            font-family: 微软雅黑;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
        }
    </style>
</head>
<body>
<div>韩顺平教育</div>
</body>
</html>

8.超链接去下划线

  • text-decoration: none 表示去掉超链接下划线
  • 应用实例

在这里插入图片描述

<!--link_none.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接去下划线</title>
    <style type="text/css">
        a {
            text-decoration: none;
        }
    </style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
</body>
</html>

9.表格细线

  • border-collapse: collapse 表示合并边框，完成表格细线的操作
  • 应用实例

在这里插入图片描述

<!--table_collapse.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格细线</title>
    <style type="text/css">
        /*
            设置边框 : border: 1px solid black
            将边框合并: border-collapse: collapse;
            指定宽度： width
            设置边框： 给 td, th 指定即可 border: 1px solid black;
        */
        /*
            1.table, tr, td 表示组合选择器
            2.即table, tr, td使用统一的样式，提高代码的复用性
        */
        table, tr, td {
            width: 300px;
            border: 1px solid black;
            border-collapse: collapse;
        }
    </style>
</head>
<body>
<table>
    <tr>
        <td align="center" colspan="3">星期一菜谱</td>
    </tr>
    <tr>
        <td rowspan="2">素菜</td>
        <td>青草茄子</td>
        <td>花椒扁豆</td>
    </tr>
    <tr>
        <td>小葱豆腐</td>
        <td>炒白菜</td>
    </tr>
    <tr>
        <td rowspan="2">荤菜</td>
        <td>油焖大虾</td>
        <td>海参鱼翅</td>
    </tr>
    <tr>
        <td>红烧肉</td>
        <td>烤全羊</td>
    </tr>
</table>
</body>
</html>

10.无序列表去样式

  • list-style: none 表示去掉默认的修饰
  • 应用实例

在这里插入图片描述

<!--ul_none.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表去修饰</title>
    <style type="text/css">
        ul {
            list-style: none;
        }
    </style>
</head>
<body>
<ul>
    <li>三国演义</li>
    <li>红楼梦</li>
    <li>西游记</li>
    <li>水浒传</li>
</ul>
</body>
</html>

三、CSS三种使用方式

1.行内样式

​ 写在标签的style属性中（不推荐）

  • 应用实例
<!--css_style1.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行内样式</title>
</head>
<body>
<div style="width: 300px; height: 100px; background-color: pink">hello 北京</div><br />
<div style="width: 300px; height: 100px; background-color: pink">hello 上海</div><br />
<div style="width: 300px; height: 100px; background-color: pink">hello 天津</div><br />
</body>
</html>
  • 问题分析

（1）标签多、样式多，代码量庞大

（2）可读性差

（3）CSS代码没有复用性

2.内嵌样式

​ 写在style标签中（可以写在页面任何位置，但通常约定写在head标签中）

  • 应用实例

在这里插入图片描述

<!--css_style2.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内嵌样式</title>
    <style type="text/css">
        div {
            width: 300px;
            height: 100px;
            background-color: pink;
        }
        span {
            border: 2px solid cornflowerblue;
        }
    </style>
</head>
<body>
<div>hello 北京</div><br/>
<div>hello 上海</div><br/>
<span>hello world</span>
</body>
</html>
  • 问题分析

（1）智能在同一页面用代码维护不方便

（2）实际项目中会有很多页面，需要到对应页面去修改，工作量大

3.外联样式

​ 写在一个单独的.css文件中（需要通过link标签在网页中引入）

  • 应用实例

在这里插入图片描述

在这里插入图片描述

div {
    width: 300px;
    height: 100px;
    background-color: skyblue;
}
span {
    border: 2px solid orange;
}

<!--css_style3.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外联样式</title>
    <!--
        1.rel 是 relation(关联)
        2.href 表示引入的css文件的位置，可以是web的完整路径
        3.type="text/css" 可以写，也可以不写
        4.推荐使用这种方式(外联样式)
    -->
    <link rel="stylesheet" type="text/css" href="./css/my.css" />
</head>
<body>
<div>hello 北京</div><br/>
<div>hello 上海</div><br/>
<span>hello world</span>
</body>
</html>

四、CSS选择器

1.CSS元素选择器

（1）最常见的CSS选择器是元素选择器，换句话说，文档的元素就是最基本的选择器。

（2）CSS元素/标签选择器通常是某个HTML元素，比如：p、h1、a等

（3）举例

h1 {color:blue;}
h2 {color:red;}
p {color:blue;}

（4）应用实例

在这里插入图片描述

<!--element_selector.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素选择器</title>
    <!--元素选择器会修饰所有对应的元素-->
    <style type="text/css">
        h1 {
            color: #b6efff;
        }
        p {
            color: #ffcad3;
        }
    </style>
</head>
<body>
<h1>韩顺平教育</h1>
<p>hello world</p>
</body>
</html>

2.ID选择器

（1）id选择器可以为标有特定id的 HTML 元素指定特定的样式

（2）id选择器以"#"来定义

（3）举例

#css1 {color: red;}
#css2 {color: green;}

（4）应用实例

在这里插入图片描述

<!--id_selector.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>0
<!--
   1.使用id选择器，需要先为修饰的元素指定id属性，id值是程序员自己命名的
   2.id值是唯一的，不能重复
   3.在<style>标签中指定id选择器时，前面需要有#id值
-->
    <style type="text/css">
        #css1 {
            color: gold;
        }
        #css2 {
            color: greenyellow;
        }
    </style>
</head>
<body>
<h1 id="css1">韩顺平教育</h1>
<p id="css2">hello world</p>
</body>
</html>

3.类选择器

（1）class类选择器，可以通过class属性选择去使用这个样式

（2）基本语法：.class属性值 {属性：值;}

（3）应用实例

在这里插入图片描述

<!--class_selector.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <!--
        1.使用class选择器，需要在被修饰元素上，设置class属性，属性值由自己指定
        2.class属性值可以重复
        3.需要在 <style></style> 指定类选择器的具体样式：.类选择器名
     -->
    <style type="text/css">
        .css1 {
            color: mediumpurple;
        }
        .css2 {
            color: gold;
        }
    </style>
</head>
<body>
<h1 class="css1">韩顺平教育</h1>
<h1 class="css1">hsp教育</h1>
<p class="css2">hello world</p>
</body>
</html>

三种选择器的区别

  • 元素选择器作用于全部，id选择器作用于唯一一个，类选择器作用于指定的部分

4.组合选择器

（1）组合选择器可以让多个选择器共用同一个css样式代码

（2）语法格式：选择器1，选择器2，选择器n {属性：值;}

（3）应用实例
​在这里插入图片描述

<!--combination_selector.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组合选择器</title>
    <style type="text/css">
        #css1, .class01 {
            width: 300px;
            height: 100px;
            border: 2px solid skyblue;
        }
    </style>
</head>
<body>
<h1 id="css1">韩顺平教育</h1>
<p class="class01">hello world</p>
</body>
</html>

5.优先级说明

  • 行内样式 > id选择器 > class选择器 > 元素选择器
程序员_小马
关注
15K的前端应届毕业生，就因为掌握了这些知识点！（前端企业级开发必备）
孙叫兽的博客
10-24 2万+
目录 1.前端开发 下载安装VScode 优化配置 2、插件安装 3、设置字体大小 4、开启完整的Emmet语法支持 5、视图 2.Node.js 入门 2.1、什么是Node.js 2.2、Node.js有什么用 2.3、安装 下载： 2.4、快速入门 2.5、服务器端应用开发 3、ES6入门 3.2、let声明变量 3.3、const声明常量 3.4、解构赋值 创建 3.5、模板字符串 创建 3.6、声明对象简写 创建 3.7、定义方法简写 3.8、对象拓展
30个精美后台-css后台模板
01-23
30个精美后台-css后台模板,1漂亮的jquery easyui后台框架,2仿windows界面后台模板(TaskMenu 3.0) ,5蓝色电子商务网站管理系统后台模板 ,18办公管理系统后台界面,21一个邮件管理系统后台界面 ,23一个大方漂亮的电子商务后台模板
后端学前端之css
吴成伟的博客
01-02 256
css:层叠样式表 HTML引入css样式的三种方式 1)只改变一个标签 内嵌样式：标签中内嵌一个属性style属性，属性值部分就是css的具体的内容 2)当一个标签一个标签改变时,效率太慢,怎么办? 方式二: 内部样式:：内部样式在head标签中加入一个style标签，然后在style标签中： 利用选择器获得你想要定位的元素，然后在{}中书写样式。 3)当有多个html需要同时修改相同的样式,一...
CSS后端学习路线
weixin_45545764的博客
07-19 131
后端工程师必学的前端 css 知识
dj3235的博客
05-31 580
后端工程师虽然大部分工作都是跟服务器缓存数据库打交道，但有时也需要写一些前端代码。 有些公司的OAM后台基本是由后端工程师承包的，所以前端基础知识是必须要掌握的；就算开发中不直接写前段代码，了解前端知识能让我们跟前端小伙伴更愉快的交流。 Js对于后端小伙伴来说不算难点，能够顺手的使用（当然十分依赖 jQuery），涉及到 css 就会有点懵逼了。 后台开发一般不会用到太难的前端技巧，能够在完...
后台常用css
weixin_30528371的博客
11-07 61
后台常用css /*重置样式*/ *{margin:0;padding:0;} body{background:#fff;font: 12px/26px Georgia, "Times New Roman", Times, serif;color:#333;} table{border-collapse:collapse;border...
前端知识之css
prigilm的博客
11-03 321
CSS 文章目录CSS一、CSS介绍二、CSS语法1、注释2、CSS样式组成三、CSS三种引入方式四、CSS选择器1、基本选择器2、组合选择器3、属性选择器4、分组和嵌套5. 伪类选择器6. 伪元素选择器7. 选择器优先级8. 总结五. CSS继承1. 什么是继承?六. CSS常用属性1. 宽和高2. 字体属性3. 文字属性4. 背景属性5. display属性六. CSS盒子模型1. margin外边距2. border边框3. padding内填充4、总结七. 使网页中的元素产生阴影八. 清除某些HTM
作为一个后端程序员必须要会的基础的CSS知识
qq_41187393的博客
04-03 470
CSS的一些基础知识 一. 三原色 ​ 在网页中我们可以直接书写颜色的名字，但是却记不了这么多的单词。可以使用 RGB（red green blue）三原色来表示颜色，书写形式为： #ff00ff; 注意: 必须以#开头，后面紧跟着为6个16进制数，前两位为红色，中间两位为绿色，最后两位为blue. #ff0000; 红色 #00ff00; 绿色 #0000ff; 蓝色 #fff...
Nginx 转发匹配规则，后端程序员必备知识点
Java_zhujia的博客
11-14 940
后端开发是一个最接近全栈的一个职业，前端不够用后端顶上写页面JS，没有运维不要紧后端来维护服务器，总之一个好的后端就是能面面俱到。
Java后端程序员必备技能有哪些
07-14
作为一名Java后端程序员，以下是一些必备的技能： 1. Java语言：作为Java后端开发人员，深入...除了上述技术技能外，良好的沟通能力、问题解决能力、团队合作精神和持续学习的态度也是Java后端程序员必备的软技能。
前端面试手册，中高端前端程序员面试必备
03-01
本文档包含以下章节内容 ...- CSS⾯试题 - JS⾯试题 ...- TCP⾯试题 - DOM⾯试题 - 浏览器原理⾯试题 - 前端⼯程化⾯试题 - React⾯试题 ...- 后端开发程序员 - 简历优化 - HR 面试注意事项 - 算法必知必会
30个html5 css后台模板
11-12
30个后台模板 建站必备！！！ html css js jquery easy-jq
合格的PHP程序员必备技能
10-23
以下是根据提供的文件内容，总结出的合格PHP程序员必备的技能知识点： 1. 掌握PHP基础知识： - 字符串处理：熟悉至少60%的字符串处理函数，能够在开发中灵活使用。 - 正则表达式：精通正则表达式函数，至少掌握90...
Web|后端同学也要知道的CSS基础知识扫盲总结
不甩锅的码农
04-30 962
Web|后端同学也要知道的 CSS 基础知识扫盲总结。包括CSS 基本介绍，CSS 选择器、盒子模型的详细介绍。
一篇博客带你学会CSS（前后端必会、三万字笔记）
最新发布
Cosmoshhhyyy的博客
04-10 1353
用一篇博客带你学会CSS，里面包含大量的样例和展示效果，各种动图让你更好的理解。三万字的笔记，让你全方位细致学会。
后台添加CSS,JS标签
似水无痕-做最好的程序！
11-27 1304
#region##添加JS文件   /// summary>   /// 添加JS文件   /// 创建人：Porschev   /// 创建时间：2011-7-25   /// summary>   /// param name="page">页面param>   /// param name="url">路径param>   public void A
网站后台css样式的写法
暮雪进化史
09-27 803
左侧是定位到屏幕position：fixed; left:0; top:0; bottom:0; width:250px; 右侧上方导航需要绝对定位，left:250px; top:0; right:0; height:90px;
css后台页面布局效果
pscool的博客
05-08 807
参考:实现左边div固定宽度，右边div自适应撑满剩下的宽度的布局方式：https://www.cnblogs.com/yzhihao/p/6513022.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .clearfix::bef.
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值