声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权;凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。
CSS3简介:
CSS3是CSS技术的升级版本,CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂,所以,把它分解为一些小的模块,更多新的模块也被加入进来。这些模块包括: 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。
CSS3完全向后兼容,所以没有必要修改的设计来让它们继续运作。网络浏览器也还将继续支持CSS2。CSS3主要的影响是将可以使用新的可用的选择器和属性,这些会允许实现新的设计效果(譬如动态和渐变),而且可以很简单的设计出现在的设计效果(比如说使用分栏)。
样式在HTML中的书写方式: 样式有三种书写方式,第一种是直接在style属性上写,style里有很多的样式子属性,不同的字属性使用分号分开,示例:
运行结果:
这种写法适合用于个别标签需要单独样式的情况下,如果好几个标签都需要同样的样式的话,使用这种写法就会导致很多重复的代码,不利于网页的优化,所以第二种写法就是在< style >标签里声明样式属性,之后只要是该样式里定义的标签就会统一使用< style >里声明的样式,示例:
运行结果:
第三种写法是在css文件里声明样式,这种方式好处是可以共享更多的网页,因为只需要使用< link >标签引用这个文件就可以使用文件里声明的样式了。示例:
创建一个后缀为. css的文件,将样式属性的声明写在文件里:
然后在HTML文件里使用< link >标签引用这个文件:
运行结果:
思维导图:
样式选择器:
并不是所有的标签都需要使用同一个样式,而且不是全部标签都得使用样式,那么同样的标签要使用不同的样式就需要使用到样式选择器了。
在这里介绍几种较为常用的样式选择器:
- element选择器,直接写标签的名称,也就是上面使用的那种方式,示例:
运行结果:
2.. class选择器,要使用这个选择器的标签需要使用class属性引用这个选择器的名称,也叫做类样式,示例:
运行结果,只有使用class属性引用了选择器的标签才会使用这个选择器里的样式,这些选择器都可以写在css文件里:
3.# id选择器,要使用这个选择器的标签需要使用id属性来引用这个选择器的名称,示例:
运行结果:
在这里要说明一下. class选择器与# id选择器的区别:id是唯一的是不可重复的,一个页面只可以使用一次,class则可以多次引用,一个页面内可以使用多次。虽然你重复地使用# id选择器浏览器也可以正常解析,有些IDE也不会报语法错误,但是当你需要用JavaScript通过id来控制div时就会出现错误。
id相当于是一个唯一的标识,用于区分不同的结构和内容,就象身份证或名字,如果一个屋子有2个人同名,就会出现混淆。class则是一个样式,可以套在任何结构和内容上,就象一件衣服。
所以从概念上说就是不一样的:id是先找到结构/内容,再给它定义样式;class是先定义好一种样式,再套给多个结构/内容。
当我们使用# id选择器时,应当遵循规范的语法不重复地去使用,要明白这两个选择器的区别。
错误写法示例:
运行结果:
4.*选择器,这个选择器表示给所有的标签都加上这个选择器里的样式:
运行结果:
- element,element选择器,使用逗号隔开可以给多个标签定义样式,示例:
运行结果:
- element element选择器,例如div p,选择给div内部所有的p标签定义样式,示例:
运行结果:
- element+element选择器,例如div+p,选择紧接着在div标签后的那个p标签(仅第一个有效),示例:
运行结果:
7.[attribute]选择器,[]里写属性名称,例如[title],只要写有括号里定义的属性名称就会使用此选择器的样式,示例:
运行结果:
这个选择器也可以自己定义属性的名称,不一定要使用html里的属性名称,只要标签里的属性名称和选择器上定义的属性名称相同就可以了,示例:
运行结果:
8.[attribute=value]选择器,只要标签里属性的名称与值和选择器里定义的属性名称和值相同,就会使用这个选择器里的样式,示例:
运行结果:
思维导图:
CSS3选择器参考:
相关推荐
JavaEE是Java企业版的简称,它是一种用于构建企业级应用程序的框架,涵盖了服务器端的开发技术,包括Servlet、JSP、EJB、JMS、JNDI等。本课件将重点讲解如何在Eclipse集成开发环境中配置和使用WebLogic服务器进行...
JavaEE在线打车系统是一个基于Java企业版(Java Enterprise Edition,简称JavaEE)技术构建的分布式应用程序,用于实现类似Uber或滴滴出行的在线叫车服务。这个系统通常包含多个组件,如用户界面、服务器端逻辑、...
【标题】"求精要诀——JavaEE编程开发案例精讲 源代码(8-12)"涉及的是JavaEE平台上的高级编程实践,主要涵盖第8至12章的关键知识点。JavaEE,全称Java Platform, Enterprise Edition,是Java语言在企业级应用开发...
java毕业设计——javaEE土地档案管理系统(论文+答辩PPT+源代码+数据库+讲解视频).zip java毕业设计——javaEE土地档案管理系统(论文+答辩PPT+源代码+数据库+讲解视频).zip java毕业设计——javaEE土地档案管理...
详解JAVAEE——SSH三大框架整合(spring+struts2+hibernate) 知识点一:SSH三大框架整合概述 SSH三大框架整合是指将Spring、Struts2和Hibernate三个框架进行整合,以便于在JAVAEE项目中实现复杂的业务逻辑。这种...
JavaEE、HTML、CSS、JavaScript开发文档集合 JavaEE、HTML、CSS、JavaScript开发文档集合JavaEE、HTML、CSS、JavaScript开发文档集合JavaEE、HTML、CSS、JavaScript开发文档集合JavaEE、HTML、CSS、JavaScript开发...
java毕业设计——javaEE商品供应管理系统(论文+答辩PPT+源代码+数据库+讲解视频).zip java毕业设计——javaEE商品供应管理系统(论文+答辩PPT+源代码+数据库+讲解视频).zip java毕业设计——javaEE商品供应管理...
《求精要诀——JavaEE编程开发案例精讲》是一本深入浅出的JavaEE编程教程,由清华大学出版社出版。本书旨在通过丰富的实例讲解,帮助读者掌握JavaEE平台上的核心开发技术,提升实际项目开发能力。书中源代码的提供,...
java毕业设计——javaEE土地档案管理系统的设计与实现(论文+答辩PPT+源代码+数据库).zip java毕业设计——javaEE土地档案管理系统的设计与实现(论文+答辩PPT+源代码+数据库).zip java毕业设计——javaEE土地档案管理...
在客户管理系统中,数据库通常会包含如`Customer`(客户)、`Order`(订单)、`Product`(产品)等表,用于存储客户的个人信息、购买历史和交易详情。数据库设计遵循第三范式,确保数据的一致性和完整性。可能还会...
10. **性能优化**:减少CSS文件大小、合理组织CSS结构、使用行内样式还是外部样式表、利用CSS Sprites技术合并图像等都是提升网页加载速度和性能的关键策略。 这个压缩包的“css特效”子文件可能包含了一些实际的...
Hibernate是一个强大的对象关系映射(ORM)框架,它简化了数据库操作,将数据库表与Java类映射,使得开发者可以使用面向对象的方式来处理数据库事务。在描述中提到,博客系统通过Hibernate实现DAO层,这意味着系统...
java毕业设计——javaEE健康管理系统(论文+开题报告+答辩PPT+源代码+数据库+讲解视频).zip java毕业设计——javaEE健康管理系统(论文+开题报告+答辩PPT+源代码+数据库+讲解视频).zip java毕业设计——javaEE健康...
该项目是一款基于JAVAEE技术的大型综合作业设计源码,涵盖130个文件,包括25个JSP页面、25个JAR库文件、23个PNG图像文件、16个XML配置文件、15个Java源代码文件、8个CSS样式表文件、6个JavaScript脚本文件、5个IML...
java毕业设计——javaEE健康管理系统的设计与实现(论文+答辩PPT+源代码+数据库).zip java毕业设计——javaEE健康管理系统的设计与实现(论文+答辩PPT+源代码+数据库).zip java毕业设计——javaEE健康管理系统的设计与...
《JavaEE开发技术与案例教程——刘彦君 课件》是刘彦君主编的一份详尽的教学资源,旨在深入浅出地介绍JavaEE技术及其实际应用。JavaEE(Java Platform, Enterprise Edition)是Java平台在企业级开发中的标准,主要...
设计并实现一个登录页面供用户提交用户名和密码信息以便登录,实现一个服务器端应用程序...禁止用户不通过登录页面直接进入登录成功页面;在登录成功页面显示此页面(登录成功页面)自部署以来被所有用户一共访问过多少次;...
JavaEE项目实战——图书管理系统 JavaEE项目实战——图书管理系统是一個完整的图书管理系统项目,旨在加深对数据库基础理论和基本知识的理解,掌握运用数据库应用系统开发软件的基本方法。本系统的设计目的在于提供...
JavaEE源代码 hibernate3JavaEE源代码 hibernate3JavaEE源代码 hibernate3JavaEE源代码 hibernate3JavaEE源代码 hibernate3JavaEE源代码 hibernate3JavaEE源代码 hibernate3JavaEE源代码 hibernate3JavaEE源代码 ...