css jerry

已于 2022-11-14 17:27:10 修改
阅读量174 收藏
点赞数
分类专栏： # jerry 文章标签： css 前端 html
于 2022-11-14 15:50:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ninoninoni/article/details/127793663
版权

目录

css语法结构

在这里插入图片描述
选择器 样式 样式值
在这里插入图片描述
px像素
在这里插入图片描述
在html文档，使用style标签，在style标签中编写样式表称为内部样式

内部样式只能作用于当前网页，无法做到多个页面代码的复用（不推荐使用）

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
先添加link
在这里插入图片描述
使用链外部样式表
在这里插入图片描述
导入外部样式表
在这里插入图片描述
使用
在这里插入图片描述
在这里插入图片描述
调试 使用查看代码 在打开某个网页过程中 先请求服务器

样式表加载的优先级不同

当行内样式和链接样式同时设置时，会优先执行行内样式
行内样式
在这里插入图片描述

选择器

在这里插入图片描述

标签选择器

标签选择器就是把html标签的名称写出来，
html标签有：

… 定义 HTML 文档 … 文档的信息

HTML 文档的元信息

… 文档的标题 文档与外部资源的关系 文档的样式信息 … 可见的页面内容

...

标题字大小（h1~h6）

… 粗体字

… 粗体字(强调)

… 斜体字

… 斜体字(强调)

…
居中文本
  • …
无序列表
  1. …
有序列表
  • …
  • 列表项目

    … 超链接

    定义文本字体尺寸、颜色、大小

    下标

    上标


    换行

    段落 定义图像

    水平线 …
    定义表格 … 定义表格中的表头单元格 … 定义表格中的行 … 定义表格中的单元

    在这里插入图片描述
    在这里插入图片描述

    超链接的简化
    去掉下划线
    简化颜色
    在这里插入图片描述
    在这里插入图片描述

    类选择器 class

    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述

    id选择器 #id

    语法
    #id属性值{样式说明}

    id选择器一般只针对网页中的某一个元素进行特殊的样式设置因为在html，id属性值必须唯一

    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述

    选择符

    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述

    后代元素

    在这里插入图片描述
    在这里插入图片描述

    使用子元素选择符

    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述
    中间打空格可以起到一样的效果
    在这里插入图片描述
    如何做成展开和收缩的菜单
    伪类选择符：表示元素悬停
    在这里插入图片描述
    鼠标放在灰色区域一级菜单上，会弹出下拉列表

    在这里插入图片描述

    其他选择符
    相邻选择符

    在这里插入图片描述

    兄弟选择符

    在这里插入图片描述

    伪类选择符

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    把hover去掉，整块区域 都被盖上颜色
    在这里插入图片描述

    span

    尽量使用标签选择器or 类选择器来修饰他们
    在这里插入图片描述
    案例讲解
    在这里插入图片描述
    在这里插入图片描述

    字体样式

    在这里插入图片描述
    font-weight的一些属性
    在这里插入图片描述
    效果图
    在这里插入图片描述
    在这里插入图片描述
    关于字体的选择，需要写操作系统支持的字体在这里插入图片描述

    字体颜色

    在这里插入图片描述
    颜色可以用16进制表示法 全是F,白色；全是0，黑色

    一般颜色的调配需要取色器

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述
    透明度的用处:两个元素层叠在一起

    文字间隔

    在这里插入图片描述

    排版文字段落

    在这里插入图片描述
    例子
    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述
    设置段落首行缩进 比较难控制缩进大小，因为字体大小不确定
    自己手动控制
    针对段落 标签p
    在这里插入图片描述

    在这里插入图片描述
    绝对长度单位
    在这里插入图片描述
    相对长度单位
    在这里插入图片描述
    1em=25px
    在这里插入图片描述

    删除线

    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述

    文本垂直居中对齐

    例如 文字与图片的中间对齐
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    文本阴影

    在这里插入图片描述
    在这里插入图片描述
    向下偏20px，向右偏10px，迷糊程度，颜色
    在这里插入图片描述
    还可以设置文字大小
    在这里插入图片描述

    背景颜色

    在这里插入图片描述
    单个例子
    在这里插入图片描述
    目前容器级区域，背景都是默认白色透明的
    在这里插入图片描述
    在这里插入图片描述
    两个叠起来的元素
    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述

    背景图像 url

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    例子
    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述
    图标素材建议去阿里云图标库

    搜索框
    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述
    需要调节图表的位置，左边 中间
    在这里插入图片描述
    在这里插入图片描述
    给边框设计颜色
    在这里插入图片描述
    在这里插入图片描述

    案例

    知识点

    在这里插入图片描述
    在这里插入图片描述
    边框如何修改弧度，设置圆角效果
    在这里插入图片描述
    在这里插入图片描述

    实际操作

    在这里插入图片描述
    在这里插入图片描述
    要考虑优先级问题，要先设置优先级

    在这里插入图片描述
    在这里插入图片描述
    理想效果图
    在这里插入图片描述
    在这里插入图片描述
    设置span标记字体颜色和背景颜色
    把span标记变成圆形，设置固定的宽度和高度
    设置文字水平居中
    在这里插入图片描述

    在这里插入图片描述
    悬停时出现变色效果
    鼠标移入li时，让span的背景色变为红色，让lis内部的字体颜色也变成红色
    在这里插入图片描述

    在这里插入图片描述
    每个模块的间距和大小都不一样，都有不同的盒子模型
    具体的需要到网页端运行起来，检查的方式

    盒子模型

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    ![

    ](https://img-blog.csdnimg.cn/3fd9aaa2743344d386bd5af4cfa5d48d.png)

    在这里插入图片描述
    在这里插入图片描述
    例子
    在这里插入图片描述

    例子 左右拉开边距
    在这里插入图片描述

    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述
    例子 上下拉开边距
    在这里插入图片描述
    例子
    在这里插入图片描述

    display特性

    在这里插入图片描述
    例子

    diaplay inlin-block

    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    float

    在这里插入图片描述
    在这里插入图片描述
    例子
    在这里插入图片描述
    在这里插入图片描述
    两种色块的例子
    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    三个色块的例子
    在这里插入图片描述

    在这里插入图片描述

    在这里插入图片描述
    当宽度调大，不够宽的时候
    在这里插入图片描述
    当强势设定数据宽度的时候‘
    在这里插入图片描述
    当屏幕缩小时，也不会被挤压
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    清除浮动

    在这里插入图片描述

    在这里插入图片描述

    在这里插入图片描述
    当没有清除浮动时
    在这里插入图片描述

    当清除浮动的时候
    在这里插入图片描述
    例子
    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述

    overflow

    在这里插入图片描述

    在这里插入图片描述
    文字溢出，需要修改
    变成隐藏模式
    在这里插入图片描述
    在这里插入图片描述
    变成滚动模式
    在这里插入图片描述

    在这里插入图片描述
    采用hidden隐藏起来
    在这里插入图片描述
    在这里插入图片描述

    例子 京东登录页面

    在这里插入图片描述
    div分布图
    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    定位

    定位模式 边偏移
    absolute 绝对定位

    在这里插入图片描述
    目前是没有脱离
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述

    往右边偏移300个像素
    在这里插入图片描述

    在这里插入图片描述
    距离右边0px
    在这里插入图片描述

    在这里插入图片描述

    fixed 始终保持不动

    例如淘宝顶部的搜索框，会一直固定不动
    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述

    relative 相对定位 不脱离文档流

    综合案例 魅族官网

    在这里插入图片描述

    在这里插入图片描述

京屿大人
关注
专栏目录
CSS
Jerry&Crj的博客
04-18 2033
CSS 一、基础内容 1.基础选择器 1.1 标签选择器 定义：指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一得CSS样式 作用：把某一类标签全部选择出来 div { color: pink; } 1.2 类选择器 语法 .类名{ 属性1:属性值1; } <style> .red { color: red; } .font35 {
CSS盒子模型
qq_45064040的博客
08-04 52
【CSS盒子模型】前端小抄前言一、看透网页布局的本质二、盒子模型（Box Model）组成三、边框（border）3.1 表格的细线边框3.2 边框会影响盒子实际大小四、内边距（padding）五、外边距（margin）5.1 外边距合并5.1.1 相邻块元素垂直外边距的合并 前言 页面布局要学习三大核心：盒子模型、浮动和定位。 学习好盒子模型能非常好的帮助我们布局页面。。 一、看透网页布局的本质 网页布局过程： 先准备好相关的网页元素，网页元素基本都是盒子 Box 利用 CSS 设置好盒子
css expressionr,expression
weixin_33886150的博客
08-04 245
CSS中使用expression只有ie才能识别。IE5及其以后版本支持在CSS中使用expression，用来把CSS属性和Javascript表达式关联起来，这里的CSS属性可以是元素固有的属性，也可以是自定义属性。外文名expression识别ie类型CSS来源expressionCSS行为编辑语音就是说CSS属性后面可以是一段Javascript表达式，CSS属性的...
CSS-选择器
软工二班秦同学的博客
03-30 79
CSS选择器
CSS之初识css-2
Jerry_0728的博客
11-22 235
目标： 1，css单位 2，尺寸属性 3，标准盒模型 1，css单位 **#1，尺寸单位** %：百分比 in:英寸 cm:厘米 mm:毫米 pt:磅(1pt等于1/72英寸) px:像素(计算机屏幕上的一个点) em:1em等于当前的字体尺寸,2em等于当前字体尺寸的2倍; #2,颜色单位 rgb(x,x,x):RGB值,x表示0-255之间,例如rgb(255,0,0); rgb(x%,x%,x%):RGB百分比值,如rgb(100%,0%,0%) #rrggb
css基础（1）
weixin_51147313的博客
07-13 858
CSS 规则由选择器和声明块组成。
CSS之初识css-1
Jerry_0728的博客
11-17 157
目标： 1，什么是css？ 2，css与html的联系？ 3，css的3种使用形式？ 样式表特征 优先级算法及排序 1，什么是css？ 1，英文名字：Cascading Style Sheets 中文名字：层叠样式表，又叫级联样式表，简称样式表 2，用于HTML文档中元素的样式定义 【作用：】实现了将内容与表现分离，提高代码的可重用性和可维护性 2，css与html之间的关系 html用于构建网页的结构 css用于构建html元素的样式 html是页面的内容组成，css是页面的表现 css的作用
CSS定位
qq_45064040的博客
08-06 261
文章链接: https://jerry-z-j-r.github.io/2021/02/10/HTML-CSS-Cheat-Sheet-10/ (转载至 JERRY） CSS定位一、定位1.1 为什么需要定位？1.2 定位组成1.3 静态定位 static（了解）1.4 相对定位 relative（重要）1.5 绝对定位 absolute（重要）1.6 子绝父相的由来1.7 固定定位 fixed （重要）1.8 固定定位小技巧：固定在版心右侧位置1.9 粘性定位 sticky（了解）1.10 定位的总结1
CSS的单位
Jerry’s Blog
06-05 564
尺寸 单位 描述 % 百分比 in 英寸 cm 厘米 mm 毫米 em 1em 等于当前的字体尺寸。2em 等于当前字体尺寸的两倍。例如，如果某元素以 12pt 显示，那么 2em 是24pt。在 CSS 中，em 是非常有用的单位，因为它可以自动适应用户所使用的字体。 ex 一个 ex 是一个字体的 x-height。 (x-height 通常
JERRY-HTML-CSS：个人HTML CSS学习使用
02-07
在"JERRY-HTML-CSS"的学习资源中，我们可以期待涵盖以下几个关键知识点： 1. **HTML基本结构**：HTML文档通常由<!DOCTYPE>声明、根元素、和部分组成。头部分包含元数据，如字符集设置（），而主体部分包含可见内容...
Jumping-Jerry-game-using-HTML-CSS-JS:使用HTML，CSS和JS进行游戏
03-12
在“Jumping Jerry”游戏中，CSS文件会定义游戏界面的颜色、背景、字体、边框、动画效果等。例如，CSS可以设置背景为动态的滚动图像，角色和障碍物的形状和大小，以及游戏界面的响应式设计，确保游戏在不同设备上都...
27款后台管理页面设计DIV_CSS
06-11
"27款后台管理页面设计DIV_CSS"这个主题聚焦于使用Div+CSS技术来创建高效、美观且功能丰富的管理界面。Div（Division）和CSS（Cascading Style Sheets）是网页布局和样式控制的基石，它们为网页设计师提供了极大的...
css的position定位的属性
qq_43235503的博客
08-30 456
css的position定位的属性
CSS 高级区块效果——WEB开发系列25
最新发布
一条晒干的咸鱼的博客
08-31 1548
CSS提供了多种工具和属性，使我们能够创建视觉上引人注目的效果。今天我们继续将深入了解几种高级CSS效果：盒子阴影、滤镜、混合模式和文本背景裁剪，提升网页设计的质感和深度。
css画个熊猫
此博客内容主要是小可日常工作中的一些问题解决的记录整理而成
08-29 727
【html源码-一键复制查看效果】/* 不规则的圆形写法 *//* 半圆线条 */
CSS中transform属性
weixin_42812634的博客
08-30 411
位移 transform: translate(水平移动距离，垂直移动距离) 旋转 transform: rotate(角度，单位deg)，正：顺时针，负：逆时针 缩放 transform: scale(X轴缩放倍数，Y轴缩放倍数) transition用法 transition:[属性名] [持续时间] [速度曲线] [延时时间] 例如：transition: height 2s ease 0.5s 当高度属性的值改变时，延迟0.5秒后以ease曲线进行过渡，持续时间为2秒。 想要监听所有属性的话
css重置样式表 reset.css 格式化默认css样式
weixin_47121832的博客
08-30 571
css重置样式表 reset.css 格式化默认css样式
CSS实现水滴效果图
N201871643的博客
08-26 1025
水滴效果：指在网页上呈现出水滴从上方滴落的效果，通常伴随着水波纹扩散的动画效果。CSS：层叠样式表（Cascading Style Sheets），是一种用于描述HTML或XML（包括各种XML方言，如SVG、XHTML等）文档呈现的样式语言。
新手指南：HTML、XHTML与CSS入门教程
"HTML、XHTML与CSS for the Absolute Beginner" 是一本由Jerry Lee Ford Jr. 著作的专业教材，旨在为初学者提供全面深入的HTML（HyperText Markup Language）、XHTML（Extensible HyperText Markup Language）和CSS...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值