尧图网站建设 尧图网络
  • 首页
  • 关于我们
  • 服务项目
  • 案例展示
  • 建站流程
  • 资讯中心
  • 联系我们
首页/资讯中心/详情

html 和css基础常用的标签和样式(2)-css - 实践

html 和css基础常用的标签和样式(2)-css - 实践
📅 发布时间:2026/7/21 12:54:48

1.css三种引入方式:

        1.第一种,内联,也就是也在标签里面。(一般不用)

        2.第二种,内部,也就是写在style中。(一般不用)

        3.第三种,外部,也就是单独创建一个css文件,把样式写里面。(常用)

2.css的引入具体实现:

        1.内联样式:(写在style后面,单独写)

我是一个p标签

        2.内部样式:写在head的中间

Document

        3.外部样式:单独写一个css文件,用link引入,在href中写css的文件名

Document

3.关于css中的常用属性:

px:长度,也就是1个像素。

em:比如上面有一个属性是2px,你1em也就是2px。

src:也就是文件的路径url。

color:颜色,可以reg 和16进制写法

font-size:字体大小

background-color:背景颜色

height:高度,一般用在块标签中

width:宽度,也一样

color - 文字颜色

font-family - 字体

font-size - 字体大小

font-weight - 字体粗细

font-style - 字体样式(斜体等)

line-height - 行高

text-align - 文本对齐

text-indent - 首行缩进

letter-spacing - 字母间距

word-spacing - 单词间距

text-transform - 文本转换(大小写)

列表相关

list-style-type - 列表标记类型

list-style-position - 列表标记位置

其他

visibility - 可见性

cursor - 鼠标光标

visibility - 可见性

cursor - 鼠标光标

不会继承的样式(常用)

盒模型相关

width / height - 宽高

margin - 外边距,外填充

padding - 内边距,内填充

border - 边框

background - 背景

display - 显示方式

定位相关

position - 定位方式 (float / absolute / relative / flex)

top / right / bottom / left - 定位位置

float - 浮动

clear - 清除浮动

其他

overflow - 溢出处理

z-index - 层级

opacity - 透明度

4.关于选择器:

  1. 基础选择器
  2. 关系选择器
  3. 属性选择器
  4. 伪类选择器
  5. 通配符选择器

基础选择器:

class=A                     id = B                    元素 div

1.用点A,.A{} 就是类选择器,

2.用#B,则#B{}就是id选择器

3.直接用div,就是div{}选择器

关系选择器:

1.用div.A{}  就是交集

2.用逗号连接的 比如:A , div.A {} 并集选择器

3.后代选择器:如果A 中包含B ,用 .A B {} 

4.亲子选择器:.A>B{}

5.关于块级元素

常见的块级元素有:body,div,p,h1~h6,ul,ol,li,pre等

就是块级元素,会独占一行,其他元素没办法加到他们后面,但是可以设置宽高等填充

常见的行内元素有:a,span 等,可以加在后面但是没办法变大,加宽

通过display:inline可以将元素显示设置为内联元素,如下的代码就是将块级元素div转成内联元素,从而使div元素具有内联元素的特点(这个是重点:)

6.关于css的布局(重点重点)

position:static 属于默认的位置

position:relative,是相对于自己,去改变位置,但实际的位置没有改变,只是视觉上改变了

position:absolute绝对定位,相对于最近的祖先元素定位,但祖先元素不能是static 没有祖先的话,就是视口,也就是窗口,随着窗口变化也会变化。

position:flexd相当于导航栏,固定不动的,就算滑动整个窗口也不会动。

Document

黑色是不动的,

相关新闻

  • 二极管三极管静态参数测试仪系统设备STD2000X--半导体领域和制造领域 - FORCREAT
  • 完整教程:一篇最全Python 爬虫超详细讲解(零基础入门,适合小白)
  • 详细介绍:“AI+XR”赋能智慧研创中心:告别AI焦虑,重塑教师未来

最新新闻

  • VGGT-Long常见问题解决方案:从环境配置到运行错误的完整排错手册 [特殊字符]
  • Android-Smart-Login进阶:自定义登录系统的实现与优化指南
  • Godot体积光插件:从原理到实战,轻松实现游戏中的God Rays效果
  • 在Windows上安装安卓应用:告别模拟器的轻量级解决方案
  • Dubbo:全景速查手册(完整版·多表格体系梳理)/ Java RPC 远程调用框架
  • 向量数据库实战:选型、调优与落地~系列文章11:六大向量数据库横评:Milvus vs Qdrant vs Chroma vs FAISS vs Weaviate vs Pinecone

日新闻

  • Python开发内部工具:7大核心库实战解析
  • 合肥雷达官方2026年7月最新信息:客户服务网点地址与售后热线权威公示 - 亨得利官方服务中心
  • PCA实战指南:从变量纠缠诊断到主成分业务解读

周新闻

  • SaaS软件行业GEO实践:AI搜索时代的品牌可见性与获客新路径
  • 什么是PCTFE?医药高端包装的“防潮王牌“材料
  • 【JVM调优实战】16-可视化利器-JConsole-VisualVM-JMC

月新闻

  • 2026年6月公司网站搭建最新热门渠道测评:四大低成本/零代码平台对比+避坑
  • 【Linux】Linux arm 编译QT程序,出现expected “}“报错
  • 【MATLAB例程】四基站二维AOA定位与距离辅助增强对比仿真。基于角度观测和测距修正的固定目标平面定位精度分析

关于尧图

  • 公司简介
  • 团队介绍
  • 企业文化
  • 荣誉资质

服务项目

  • 定制开发
  • 电商建站
  • UI 设计
  • 运维服务

快速链接

  • 案例展示
  • 建站流程
  • 常见问题
  • 资讯中心

联系方式

  • 📍北京市朝阳区互联网产业园 A 座 10 层
  • 📞400-888-8888
  • ✉️contact@rkmt.cn
  • 🕐周一至周日 9:00-21:00

© 2024 北京尧图网络科技有限公司 版权所有 | 京 ICP 备 XXXXXXXX 号