css jerry

原创 已于 2022-11-14 17:27:10 修改 · 278 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
于 2022-11-14 15:50:04 首次发布
本文详细介绍了CSS的语法结构，包括标签选择器、类选择器、ID选择器、伪类选择符等，并通过实例展示了字体样式、颜色、背景图像、布局和定位等技巧。还探讨了行内样式、内部样式和外部样式表的优先级。通过对京东登录页面和魅族官网的案例分析，深入理解CSS在实际网页设计中的应用。

目录

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 #前端 #html
京屿大人
关注
你好，Jerry，我是 Tomcat
Java
03-07 1826
初识Tomcat
css实现动态箭头_Jerry的反省：程序员不要轻易说出"这个功能技术上无法实现"...
weixin_39806288的博客
01-05 120
这是Jerry 2020年的第81篇文章，也是汪子熙公众号总共第263篇原创文章。Jerry之前的文章 从医院到家，再重返SAP成都研究院，Jerry还没死 提到，我手术后重返SAP成都研究院，加入了Global的Spartacus开发团队，开始从事SAP Commerce Cloud新一代Storefront的开发工作。文章 SAP Spartacus简介，对SAP Spartacus...
Table中的cellSpacing,cellpadding等样式
12-05 559
在css中加上Table{ jerry:expression(cellSpacing="1");}
CSS Layers 开源项目指南
gitblog_00956的博客
09-05 406
CSS Layers 开源项目指南 项目概述 CSS Layers 是一个由 Jerry Jappinen 开发的开源项目，旨在通过利用现代 CSS 的层叠特性提供一种管理样式优先级的新方法。尽管提供的 GitHub 链接不直接指向具体的项目说明或仓库（实际链接应以确保准确性），我们基于一般开源项目结构和给定的背景知识，来构建一个假想的指导文档框架。 1. 项目目录结构及介绍 典型的 layers...
cellspacing属性在css中的替代方法
pyman hall
06-08 531
<br />css代码：<br />jerry:expression_r(cellSpacing="1");
终极指南：如何使用Jodd Lagarto打造高效HTML解析器
gitblog_00213的博客
04-18 808
Jodd Lagarto是一款轻量级Java HTML解析器，以其零依赖特性和强大的解析能力在开发者社区中广受好评。它通过Jerry与CSSelly的组合，为HTML文档处理提供了简洁而高效的解决方案，让开发者能够轻松提取和操作网页内容。 ## 什么是Jodd Lagarto？ Jodd Lagarto是Jodd框架的核心组件之一，专注于HTML解析和处理。作为一款纯Java实现的解析器，它不
CSS
Jerry&Crj的博客
04-18 3272
CSS 一、基础内容 1.基础选择器 1.1 标签选择器 定义：指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一得CSS样式 作用：把某一类标签全部选择出来 div { color: pink; } 1.2 类选择器 语法 .类名{ 属性1:属性值1; } <style> .red { color: red; } .font35 {
CSS基础知识（一）
Liu Feng's Blog
07-08 989
CSS 层叠样式表（英语：Cascading Style Sheets，缩写：CSS；又称串樣式列表、级联样式表、串接样式表）是一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，由W3C定义和维护。 使用优点： 简化网页的代码，提高访问速度 都建立公共样式库，便于重用样式 便于修改网站的样式 方便团队开发 CSS基本语法 选择器 {属性：值；属性：值}...
html jerry老师
ninoninoni的博客
11-10 236
html
CSS精灵图、字体图标、鼠标样式、溢出省略号、用户界面技巧
qq_45064040的博客
08-07 567
转载自：https://jerry-z-j-r.github.io/2021/02/11/HTML-CSS-Cheat-Sheet-11/ （来自 JERRY） CSS精灵图、字体图标、鼠标样式、溢出省略号、用户界面技巧一、精灵图1.1 为什么需要精灵图？1.2 精灵图（sprites）的使用二、字体图标2.1 字体图标的产生2.2 字体图标的优点2.3 字体图标的下载2.4 字体图标的引入2.5 字体图标的追加2.6 字体图标加载的原理三、CSS三角四、CSS用户界面样式4.1 什么是界面样式4.2 鼠
鸿蒙系统的结构图,一图看懂鸿蒙系统中的JS开发框架！
weixin_39998521的博客
05-27 1355
原标题：一图看懂鸿蒙系统中的JS开发框架！“前端这两年玩起来了三国杀，Vue，React，Angular 三足鼎立，其中 Vue 派系在国内打的 Angular 找不到北了。 因此，小程序，uniapp 大家一起嫖，错了，是一起飘.....好吧，华为鸿蒙的 runtime 也来了。我们都是看热闹不怕事闹的多大！！ 不要担心，一切都是为了界面简单！于是，他来了，他来了，他顶着 MVVM 模式走来了！...
布局技巧：margin负值、文字围绕浮动、行内快、CSS三角、CSS初始化
qq_45064040的博客
08-08 195
转载自：https://jerry-z-j-r.github.io/2021/02/12/HTML-CSS-Cheat-Sheet-12/ （来自 JERRY） 布局技巧：margin负值、文字围绕浮动、行内快、CSS三角、CSS初始化一、margin负值的运用二、文字围绕浮动元素三、行内块的巧妙运用四、CSS三角强化五、CSS初始化 一、margin负值的运用 如何实现以下效果呢？ 多个盒子紧挨在一起，当鼠标放在其中一个盒子上时该盒子的边框自动变色。 ① 让每个盒子 margin 往左侧移动 -1p
Jquery学习--来自jerry的博客
我的博客新地址： http://www.n-pei.com
06-02 640
   别人都使用jquery开发过n个项目了我才开始学习jquery,没办法,谁让我们的项目一直是vs2003和sql2000做的。NND,早该升级了。路过jerry的blog看到一篇介绍jquery不错的文章,所以顺便转过来自己以后可能能用到,多谢jerry了。他的blog地址：http://blog.csdn.net/xychen2008/archive/2007/04/10/1559763.
一种改变传统网站开发模式的web服务器
hfujkkk的博客
09-13 300
1、缘由以Java web举例，现在的网站系统开发模式，对于web端和服务端的数据交互以及页面渲染，无外乎两种：第一种是交给后端处理，Jsp，Freemark模板引擎之流，这种开发模式需要前端人员做好静态页面交给后端去处理一些其它工作。这种开发模式到如今也依旧流行，这也是招聘Java web程序员要求也要会HTML、JS、CSS的原因。到现在基本上都是采用这种开发模式，注意这种模式并非真正的前后端...
CSS浮动和清除浮动
qq_45064040的博客
08-05 660
CSS浮动一、浮动（float）1.1 传统网页布局的三种方式1.2 标准流（普通流/文档流）1.3 为什么需要浮动？1.4 什么是浮动？1.5 浮动特性（重难点）（1）浮动元素会脱离标准流（脱标）（2）浮动的元素会一行内显示并且元素顶部对齐（3）浮动的元素会具有行内块元素的特性1.6 浮动元素经常和标准流父级搭配使用二、常见网页布局2.1 初识常见网页布局2.2 浮动布局注意点三、清除浮动3.1 思考题3.2 为什么需要清除浮动？3.3 清除浮动本质3.4 清除浮动3.5 清除浮动方法3.6 清除浮动..
CSS定位
qq_45064040的博客
08-06 397
文章链接: 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盒子模型
qq_45064040的博客
08-04 142
【CSS盒子模型】前端小抄前言一、看透网页布局的本质二、盒子模型（Box Model）组成三、边框（border）3.1 表格的细线边框3.2 边框会影响盒子实际大小四、内边距（padding）五、外边距（margin）5.1 外边距合并5.1.1 相邻块元素垂直外边距的合并 前言 页面布局要学习三大核心：盒子模型、浮动和定位。 学习好盒子模型能非常好的帮助我们布局页面。。 一、看透网页布局的本质 网页布局过程： 先准备好相关的网页元素，网页元素基本都是盒子 Box 利用 CSS 设置好盒子
CSS Positioning: relative
最新发布
captainOO7的博客
07-01 194
positioned children ("父相子绝")
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值