0

0

总结CSS的常用样式

巴扎黑

巴扎黑

发布时间:2017-08-09 15:58:33

|

2316人浏览过

|

来源于php中文网

原创

css 说的通俗一点就是 给标签加样式的。什么玩意是样式呢。你们可以理解为人穿的衣服,化妆之类的修饰,让自己的写的标签变的好看一点

那么这个css 怎么加到对应的标签上面去呢 

有3种方法 分别是 外部样式、内页样式、行内样式。

那么这个css 怎么加到对应的标签上面去呢 
有3种方法 分别是 外部样式、内页样式、行内样式。

外部样式:将网页链接到外部样式表。
比如这个样子:

内页样式:在网页上创建嵌入的样式表
比如这个样子:

行内样式:应用内嵌样式到各个网页元素。
比如这个样子:

xiaochuan

那比如说我这三个 样式都针对 某一个标签 他的优先级是什么样子的呢? 行内样式 > 内页样式 > 外部样式 怎么理解呢 比如: 行内样式 设置文字大小为 14px 内页样式 设置文字大小为 15px 外部样式 设置文字大小为 16px 那么这边标签的 设置文字大小为 14px css 语法 标签选择符方式 这是针对页面上面对应的所有标签都会生效 p{ color:#999999 }

xiaochuan1

xiaochuan2

类选择符 这是针对页面上面标签中class属性存在对应类名都会生效 .xiao{ color:#999999 }

xiaochuan1

xiaochuan2

ID选择符 这是针对页面上面标签中id属性存在对应类名都会生效 切记这个只能用一次。有可能说某些浏览器可以无限使用但是不建议使用多次 #xiao{ color:#999999 }

xiaochuan1

xiaochuan2

关联选择符 这是针对页面上面对应格式的所有标签都会生效 p span{ color:#999999 }

xiaochuan1

xiaochuan2

PandaGPT
PandaGPT

文档内容读取器,让 AI 用对话的方式总结文档重点

下载
组合方式 这是针对页面上面对应的所有标签都会生效 h1, h2{ color: red; }

xiaochuan1

xiaochuan2

xiaochuan3

如果我们这边需要对某个标签定义多个css怎么去写呢 格式为 样式的名称:样式的值; 如果写单个的话分号可以进行省略,最后一个分号也可以省略

xiaochuan

xiaochuan

css 属性赋值 css 有的属性是有多个值的 当然也可以多个赋值 也可以直接赋值给一个 我这边就说一下margin 吧 margin:10px; 这个代表的意思为 所有 4 个外边距都是 10px margin:10px 5px; 这个代表的意思为 上外边距和下外边距是 10px 右外边距和左外边距是 5px margin:10px 5px 15px; 这个代表的意思为 上外边距是 10px 右外边距和左外边距是 5px 下外边距是 15px margin:10px 5px 15px 20px; 这个代表的意思为 上外边距是 10px 右外边距是 5px 下外边距是 15px 左外边距是 20px 当然如果搞不懂直接 margin-left margin-top margin-right margin-bottom 这样也可以 我这边整理了一下 经常会在项目中用到的一些样式 color 设置文字颜色 font-family 定义文字字体 font-size 设置文字的大小 font-style 设置 文字斜体 line-height 设置行高 text-align 文字的对齐方式 list-style-type 列表样式 background 定义背景 可以设置 颜色图片之类的 cursor 设置鼠标的形状 border 设置标签的边框 margin 设置标签的外边距 padding 设置标签的内边距 position 定位 overflow 溢出 float 浮动 width 设置宽 height 设置高 a 标签这个比较特别 a 所有超链接 a:link 超链接文字格式 a:visited 浏览过的链接文字格式 a:active 按下链接的格式 a:hover 鼠标转到链接

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
c++ 根号
c++ 根号

本专题整合了c++根号相关教程,阅读专题下面的文章了解更多详细内容。

70

2026.01.23

c++空格相关教程合集
c++空格相关教程合集

本专题整合了c++空格相关教程,阅读专题下面的文章了解更多详细内容。

73

2026.01.23

yy漫画官方登录入口地址合集
yy漫画官方登录入口地址合集

本专题整合了yy漫画入口相关合集,阅读专题下面的文章了解更多详细内容。

298

2026.01.23

漫蛙最新入口地址汇总2026
漫蛙最新入口地址汇总2026

本专题整合了漫蛙最新入口地址大全,阅读专题下面的文章了解更多详细内容。

471

2026.01.23

C++ 高级模板编程与元编程
C++ 高级模板编程与元编程

本专题深入讲解 C++ 中的高级模板编程与元编程技术,涵盖模板特化、SFINAE、模板递归、类型萃取、编译时常量与计算、C++17 的折叠表达式与变长模板参数等。通过多个实际示例,帮助开发者掌握 如何利用 C++ 模板机制编写高效、可扩展的通用代码,并提升代码的灵活性与性能。

17

2026.01.23

php远程文件教程合集
php远程文件教程合集

本专题整合了php远程文件相关教程,阅读专题下面的文章了解更多详细内容。

114

2026.01.22

PHP后端开发相关内容汇总
PHP后端开发相关内容汇总

本专题整合了PHP后端开发相关内容,阅读专题下面的文章了解更多详细内容。

79

2026.01.22

php会话教程合集
php会话教程合集

本专题整合了php会话教程相关合集,阅读专题下面的文章了解更多详细内容。

94

2026.01.22

宝塔PHP8.4相关教程汇总
宝塔PHP8.4相关教程汇总

本专题整合了宝塔PHP8.4相关教程,阅读专题下面的文章了解更多详细内容。

74

2026.01.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
CSS3 教程
CSS3 教程

共18课时 | 4.9万人学习

SciPy 教程
SciPy 教程

共10课时 | 1.3万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号