0

0

Html/Css(新手入门第二篇)

php中文网

php中文网

发布时间:2016-07-06 13:28:20

|

1114人浏览过

|

来源于php中文网

原创

一、在实际工作中,都是一个团队在做项目,不是一个人在工作。多人协作,就是每个团队都有自己
的命名习惯。
1、css选择符命名,规范。
2、都有命名规范文档。

二、css选择符作用:指定css样式所作用对象(范围)
1、标签选择符:针对html标签
2、id选择符:针对页面中只出现一次的内容,id
3、类选择符:针对某些元素,相同的样式,重复样式
*****默认情况下某些html元素本身有自己的默认值。
4、控制所有元素----使用通配符----*
通配选择符:*{属性:值},用于定义所有html元素
***** *的作用范围很广,但是它的效率很低。慎用
*{margin:0;pandding:0;}//重置所有元素的外边距和内边距为零
5、选择符的嵌套使用----包含选择符
前端开发的极限----就是代码非常精简。
6、如果多个选择符会有一些相同的样式,这个时候我们就可以把这些选择符组成一个组
选择符1,选择符2,......{属性:值}
*****css选择符就是表示你将把你定义的样式用给谁。
/*下面选择符,表示,这些选择符分为一组,他们都有相同的样式*/
body,ul,ol,li,p,hi,h2,h3,h4,h5,h6,form,fieldset,table,top a,.top,.top a,.top a:visited
/*表示针对类名为top里面的a*/
.top a,.top a:visited

三、css盒子模型
****一个盒子是由以下几部分构成的:
1、盒子里的内容 content
2、盒子的边框 border
3、盒子的边框与内容之间的距离,称为填充--padding,内边距(内补丁)
4、多个盒子存在,盒子与盒子之间的距离,称为边界--margin,外边距(外补丁)

*****就是盒子所在的实际宽度为例=左右边界+左右边框+左右内填充+内容宽度
*****css盒子的相关属性
【1】、内容属性:内容本身的宽=width,内容本身的高=height
【2】、内填充属性:内容与边界之间的距离 padding
*****在定义盒子的宽度时要考虑到内填充,变宽,边界的存在。
如果增加了内填充了,整个盒子宽度值要再减去你增加的内填充值。(css3中可以用box-
sizing:border-box;来令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中。

小盒子的上面=20 右面30 下面50 左面100 外边界
margin:20 30 50 100;
margin-top:
margin-right:
margin-bottom:
margin-left:

*****将来在使用外边距要注意浏览器的兼容性。
*****除了值为0的情况下,所有的非零的值,后面都要加单位。
*****我们需要将所有浏览器的默认内外边距都从零开始算。
在实际工作,不要用这个*(margin:0;padding:0),效率最低。
所以我们是用到了哪些元素就把哪些元素的默认值归零。

立即学习前端免费学习笔记(深入)”;

css的属性,虽然有继承的特点但是并不是所有的属性都有继承。
css布局主要是通过盒子模型来实现--w3c将网页内容放置在一些盒子中,对这个盒子的一些属性进行
控制。
内容:width height
内填充:padding
外框:border
外边界:margin

关于列表的属性介绍:--存在兼容性问题
list-style:列表的图片
语法:
list-style:list-style-image || list-style-position || list-style-type
列表的样式:列表的图片 列表符号位置 列表的样式
list-style-none 不要列表的符号。

DALL·E 2
DALL·E 2

OpenAI基于GPT-3模型开发的AI绘图生成工具,可以根据自然语言的描述创建逼真的图像和艺术。

下载

边框属性说明:
css语法:
border:border-width||border-style||border-color
根据语法,推理出它的使用方式
如果只写border,则后面要跟着的是三个不同的子元素,第一个:粗细,第二个:样式,第三个:颜

边框样式:粗细为两个像素 实线 蓝色
border:2px solid blue

*****css小技巧:
【1】、让盒子水平居中:将对象的左右边界设置为auto;
【2】、让盒子中的内容垂直居中:设置行高(line-height)=盒子的高度,但是不要有换行。
【3】、我们在调试的时候,可以适当加背景颜色。

*****html元素的分类:块与内联
背景图片默认情况下是进行水平与垂直方向上的平铺。
默认背景的图片在元素的左上角显示。
背景图片的依附方式:固定的定义是将图片固定在屏幕(可视区域)的某个位置。
兼容性 IE6只有html与body这两个元素支持这个属性

让你显得专业一点的技巧:翻转效果:其实思路就是准备两张大小相同,内容不同的图片,正常情况
下显示一张,鼠标进过的时候再显示另一张。(css3中常用transform属性来定义图片的翻转效果)

伪类,表示一种状态
:link

css精灵技巧:主要是为了减少http请求【css3中常用字体图标来替代传统的小图标(未来趋势)】
浏览器--服务器(交流)(例:购物超市--结账时候。)

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

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

豆包大模型
豆包大模型

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

通义千问
通义千问

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

腾讯元宝
腾讯元宝

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

文心一言
文心一言

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

讯飞写作
讯飞写作

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

即梦AI
即梦AI

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

ChatGPT
ChatGPT

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

相关专题

更多
俄罗斯Yandex引擎入口
俄罗斯Yandex引擎入口

2026年俄罗斯Yandex搜索引擎最新入口汇总,涵盖免登录、多语言支持、无广告视频播放及本地化服务等核心功能。阅读专题下面的文章了解更多详细内容。

178

2026.01.28

包子漫画在线官方入口大全
包子漫画在线官方入口大全

本合集汇总了包子漫画2026最新官方在线观看入口,涵盖备用域名、正版无广告链接及多端适配地址,助你畅享12700+高清漫画资源。阅读专题下面的文章了解更多详细内容。

35

2026.01.28

ao3中文版官网地址大全
ao3中文版官网地址大全

AO3最新中文版官网入口合集,汇总2026年主站及国内优化镜像链接,支持简体中文界面、无广告阅读与多设备同步。阅读专题下面的文章了解更多详细内容。

79

2026.01.28

php怎么写接口教程
php怎么写接口教程

本合集涵盖PHP接口开发基础、RESTful API设计、数据交互与安全处理等实用教程,助你快速掌握PHP接口编写技巧。阅读专题下面的文章了解更多详细内容。

2

2026.01.28

php中文乱码如何解决
php中文乱码如何解决

本文整理了php中文乱码如何解决及解决方法,阅读节专题下面的文章了解更多详细内容。

4

2026.01.28

Java 消息队列与异步架构实战
Java 消息队列与异步架构实战

本专题系统讲解 Java 在消息队列与异步系统架构中的核心应用,涵盖消息队列基本原理、Kafka 与 RabbitMQ 的使用场景对比、生产者与消费者模型、消息可靠性与顺序性保障、重复消费与幂等处理,以及在高并发系统中的异步解耦设计。通过实战案例,帮助学习者掌握 使用 Java 构建高吞吐、高可靠异步消息系统的完整思路。

8

2026.01.28

Python 自然语言处理(NLP)基础与实战
Python 自然语言处理(NLP)基础与实战

本专题系统讲解 Python 在自然语言处理(NLP)领域的基础方法与实战应用,涵盖文本预处理(分词、去停用词)、词性标注、命名实体识别、关键词提取、情感分析,以及常用 NLP 库(NLTK、spaCy)的核心用法。通过真实文本案例,帮助学习者掌握 使用 Python 进行文本分析与语言数据处理的完整流程,适用于内容分析、舆情监测与智能文本应用场景。

24

2026.01.27

拼多多赚钱的5种方法 拼多多赚钱的5种方法
拼多多赚钱的5种方法 拼多多赚钱的5种方法

在拼多多上赚钱主要可以通过无货源模式一件代发、精细化运营特色店铺、参与官方高流量活动、利用拼团机制社交裂变,以及成为多多进宝推广员这5种方法实现。核心策略在于通过低成本、高效率的供应链管理与营销,利用平台社交电商红利实现盈利。

122

2026.01.26

edge浏览器怎样设置主页 edge浏览器自定义设置教程
edge浏览器怎样设置主页 edge浏览器自定义设置教程

在Edge浏览器中设置主页,请依次点击右上角“...”图标 > 设置 > 开始、主页和新建标签页。在“Microsoft Edge 启动时”选择“打开以下页面”,点击“添加新页面”并输入网址。若要使用主页按钮,需在“外观”设置中开启“显示主页按钮”并设定网址。

72

2026.01.26

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
JavaScript—极速入门
JavaScript—极速入门

共23课时 | 3.9万人学习

Css3入门基础视频教程
Css3入门基础视频教程

共33课时 | 6.6万人学习

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

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