0

0

CSS+DIV第一天_html/css_WEB-ITnose

php中文网

php中文网

发布时间:2016-06-24 12:33:34

|

1002人浏览过

|

来源于php中文网

原创

CSS基础

 引用方法:

   基本语句结构:选择符{属性1:属性值1;属性2:属性值2}


笔灵降AI
笔灵降AI

论文降AI神器,适配知网及维普!一键降至安全线,100%保留原文格式;无口语化问题,文风更学术,降后字数控制最佳!

下载

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

   选择符:可以是HTML中任何的标识符,比如TR、TD、P、DIV、IMG甚至BODY都可以作为选


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

         择符。 选择符中的内容将会以大括号内属性值定义的格式来显示。


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

  除了选择符外,css还提供了几种选择器来让html调用css:


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

   群选择器:当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:


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

          p, td, li { font-size : 12px ; }


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

   id选择器:用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。


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

           例如我们首先定义一个层


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

          


           menubar就是我们要用到的样式,在样式表里是这样定义的。


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

           #menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}


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

           对,前面加个#即可!


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

   类别选择器:如果想用class=""来引用样式的话,那么就需要一个类别选择器,其做


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

             法是在定义在选择符前加一个“.”


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

             如:.14px {color : #f60 ;font-size:14px ;}


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

             此时就可以通过来调用了。


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

--------------------------------------------------------------------


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

基本的css调用已经复习完了。只要学会了编写css,配合上这些个调用方法,就可以玩转网页喽。
css的属性多的数不胜数,然而和任何一种语言一样,只要掌握了1/3的常用属性,就可以实现90%的功能,
所以我们先捡常用的来学。


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

css的常用属性:


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


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

字体属性:


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

这是最基本的属性,主要包括以下几个属性:


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


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


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

因为字体属性经常用到,驼驼比较熟悉,就暂且滑过。


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


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

颜色和背景属性


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


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


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

用法是这个样子的


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

属性:background 属性值:||||    
 ||||


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


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

此处也不多言,会了用法,用到的时候来抠就行了.


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


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

文本属性:


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


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

此处不同于上面的字体属性.它涉及到排版:行间距,字间距,文字装饰等等,我得承认,这很重要.


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


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


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

装饰超级链接:


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

这是比较常见css应用,是的,页面上永远都有那么多超级链接,超级链接的修饰永远都是很重要,
虽然我今天以前从来没仔细看过这一块,但它现在看起来也蛮简单.


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


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

CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:


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

a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
a:active {font-weight : bold ;text-decoration : none ;color : #F90 ;}


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

以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。
注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。


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

下面这段代码很有趣,可以点击这里看到它的效果


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

  
   

link css

   


   
  
  


  


   未访问的链接


   //*加链接,显示三种不同状态,并且定义了链接文本的字体和大小*//
  

访问过的链接


  

鼠标激活的链接


  
  



这个例子是从洪恩在线上copy过来的,驼驼以前做过这种咚咚,copy了一大段的js代码。
这算是种特效吧,而它的原理so easy  驼驼以前不是不会用link的css,只是没有想到。
所以很多时候创造力和想像力是很重要的。

容器属性:虾米是容器?驼驼到现在还没找到一个定律一样的解释。8过,凭经验,<div></div>、<tr></tr>......类似的标签都是容器。这些标签就像容器,
罐装了我们的网页内容。使他们能在正确的位置来体现。CSS的容器属性包括边距、填充距、边框和宽度、高度、浮动、清除等属性
边距属性
例:body{margin:1em 2em 3em 4em}  //*定义文本的上、右、下、左的边距分别为1、2、3、4em*// 
填充距属性
 
例:padding:1em 2em 3em 4em
边框属性
 
看上去很多,实际用起来很方便。
例:P{border:5px double purple}//*定义了四条边框为一样的值*//
图文混排
 
img{margin-right:2em;float:left}//*定义图片的右边距为2em,图片浮动在文字的左边*//
鼠标属性 
 在CSS当中,这种样式是通过“cursor”属性来实现的。Cursor属性有很多的属性值,
  我们来看一下它的详细列表
   
例子:<span style="“cursor:hand”">手的形状</span>

相关文章

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不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法
pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法

本专题系统整理pixiv网页版官网入口及登录访问方式,涵盖官网登录页面直达路径、在线阅读入口及快速进入方法说明,帮助用户高效找到pixiv官方网站,实现便捷、安全的网页端浏览与账号登录体验。

463

2026.02.13

微博网页版主页入口与登录指南_官方网页端快速访问方法
微博网页版主页入口与登录指南_官方网页端快速访问方法

本专题系统整理微博网页版官方入口及网页端登录方式,涵盖首页直达地址、账号登录流程与常见访问问题说明,帮助用户快速找到微博官网主页,实现便捷、安全的网页端登录与内容浏览体验。

135

2026.02.13

Flutter跨平台开发与状态管理实战
Flutter跨平台开发与状态管理实战

本专题围绕Flutter框架展开,系统讲解跨平台UI构建原理与状态管理方案。内容涵盖Widget生命周期、路由管理、Provider与Bloc状态管理模式、网络请求封装及性能优化技巧。通过实战项目演示,帮助开发者构建流畅、可维护的跨平台移动应用。

64

2026.02.13

TypeScript工程化开发与Vite构建优化实践
TypeScript工程化开发与Vite构建优化实践

本专题面向前端开发者,深入讲解 TypeScript 类型系统与大型项目结构设计方法,并结合 Vite 构建工具优化前端工程化流程。内容包括模块化设计、类型声明管理、代码分割、热更新原理以及构建性能调优。通过完整项目示例,帮助开发者提升代码可维护性与开发效率。

20

2026.02.13

Redis高可用架构与分布式缓存实战
Redis高可用架构与分布式缓存实战

本专题围绕 Redis 在高并发系统中的应用展开,系统讲解主从复制、哨兵机制、Cluster 集群模式及数据分片原理。内容涵盖缓存穿透与雪崩解决方案、分布式锁实现、热点数据优化及持久化策略。通过真实业务场景演示,帮助开发者构建高可用、可扩展的分布式缓存系统。

26

2026.02.13

c语言 数据类型
c语言 数据类型

本专题整合了c语言数据类型相关内容,阅读专题下面的文章了解更多详细内容。

29

2026.02.12

雨课堂网页版登录入口与使用指南_官方在线教学平台访问方法
雨课堂网页版登录入口与使用指南_官方在线教学平台访问方法

本专题系统整理雨课堂网页版官方入口及在线登录方式,涵盖账号登录流程、官方直连入口及平台访问方法说明,帮助师生用户快速进入雨课堂在线教学平台,实现便捷、高效的课程学习与教学管理体验。

14

2026.02.12

豆包AI网页版入口与智能创作指南_官方在线写作与图片生成使用方法
豆包AI网页版入口与智能创作指南_官方在线写作与图片生成使用方法

本专题汇总豆包AI官方网页版入口及在线使用方式,涵盖智能写作工具、图片生成体验入口和官网登录方法,帮助用户快速直达豆包AI平台,高效完成文本创作与AI生图任务,实现便捷智能创作体验。

524

2026.02.12

PostgreSQL性能优化与索引调优实战
PostgreSQL性能优化与索引调优实战

本专题面向后端开发与数据库工程师,深入讲解 PostgreSQL 查询优化原理与索引机制。内容包括执行计划分析、常见索引类型对比、慢查询优化策略、事务隔离级别以及高并发场景下的性能调优技巧。通过实战案例解析,帮助开发者提升数据库响应速度与系统稳定性。

53

2026.02.12

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Vue.js 开发基础教程
Vue.js 开发基础教程

共33课时 | 7.2万人学习

零基础新手入门PHP教程
零基础新手入门PHP教程

共237课时 | 31.5万人学习

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

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