学java前要学css_教你一招:学习Java必须学会的CSS用法

一:CSS概述

什么是CSS

CSS就是层叠样式表(Casading Style Sheets),通常称为CSS样式表,或者是级联样式表。主要用于设置HTML中的文本,内容(字体,大小,对齐),图片外形(宽高,边框样式,边距等),以及版面的布局等外观样式。

CSS以HTML为基础,提供了丰富的功能。还可以针对不同的浏览器设置不同的样式。

HTML和CSS的关系

HTML结构层:负责从语义的角度搭建页面

CSS:负责从审美角度美化页面

CSS的语法规则

02625796aeb5d7fb9eaae55940a71def.png

CSS是由选择器和{}组成的,

大括号的是由一条条声明组成

每一条语句都是要英文状态下的声明,每一条声明都是由属性:值;组成

CSS属性值一般不加引号,但它的属性值为数字时一般要加单位,单位一般为px

CSS中,不能出行HTML标签

CSS语法

CSS的标准语法主要由两方面构成一是 选择器。二是 声明框。

一、选择器

通过选择器可以选定页面指定的元素,并将声明块中的样式应用在选择器选中的元素中去。

二、声明框

是一对{  }标志,声明块紧跟在选择器后面,实际上声明块里面就是一组一组的属性名与属性值对应的结构。称之为声明,一个声明块中可以有多个声明。多个声明之间使用分号;  进行隔开,声明的样式与样式值之间用: 连接。

CSS常用选择器

元素选择器   通过元素选择器选择页面中所有指定的元素(选择器就是元素名)

1d8d20a389b7b4dcc07e785e140cdb3a.png

67e3980e4502defbb47ea9108b4fa459.png

ID选择器

通过元素的ID属性值,来选中唯一的一个元素。

f7336eedd314ff278fa48f9bdb6c3c19.png

b0e2bcc08a61ce373878f3fca968e9db.png

类选择器

通过为元素设置class属性,class属性和ID属性类似,但是class属性可以重复,把拥有相同class属性的元素称之为一组元素。可以为一个元素设置多个class属性值,多个值之间可以使用空格隔开。

cd0dceaca783d2256721bf976a0591ec.png

并集选择器

选择器分组,可以同时选中多个选择器对应的元素(选择器1,选择器2,选择器3{ })表示效果:满足选择器1的,满足选择器2的并且满足选择器3的元素都可以同时选中,多个选择器之间是并集关系。

35855f4cf56fbcc28d405c1d07e141b6.png

3f71a9ffb6486324f241f7cc9a45fd2c.png

通配选择器

通配选择器可以选择页面里的所有元素(*{ })。

6e48c0ff2ac0533c6cc6f0b6a82b0f20.png

6f22fb9e4a2eaf54aacc323d58033c7a.png

复合选择器(交集选择器)

可以选中多个同时满足多个选择器的元素(选择器1选择器2选择器3{   }),对于ID选择器来说不建议使用交集选择器.

78af32428145e69c8db8555314bc1995.png

ef1b2fc63e4cb6c54a0c141c976e7ce1.png

后代选择器

选中制定元素的指定后代元素(祖先元素 后代元素{  })也可以写后代的后代的后代元素。但是尽量不要写的太长,考虑到性能问题选择器尽量写的短一些。

子元素选择器

比如说span元素是p元素的子元素,就可以写成  p>span{   }

伪类选择器

伪类是专门用来表示元素的一种特殊状态,比如说常见的 a 元素的一些特殊状态(原始状态的超链接,访问过的超链接,运行中的超链接等等),当我们需要为这些处在特殊状态的元素设置样式的时候就可以使用伪类来定义。

重用属性

经常会用到一些基本的式样叠加,比如字体的颜色和加粗。网页中可能同时出现三种情况:1.字体为红色 2.字体加粗 3.字体红色加粗

这时我们只需要定义前两个css:

.red{color:red;}

.b{font-weight:bold;}

复制代码

第三种情况时用

子选择器:

相对来说,简化html文件的代码更加重要,因此在css中使用子选择器非常有益,同时也使css代码更加容易理解。比如下面的代码:

复制代码

如果div li a都有各自的式样,采用子选择器,可以省略代码中li 和a 的class属性,从而简化代码:

sub_nav { /* Some styling */ }

sub_nav li { /* Some styling */ }

sub_nav a { /* Some styling */ }

复制代码

组选择器:

当一些元素类型、class或者id都有共同的一些属性,你就可以使用组选择器来避免多次的重复定义。这可以节省不少字节。

例如:定义所有标题的字体、颜色和margin,你可以这样写:

h1,h2,h3,h4,h5,h6 {

"Lucida Grande",Lucida,Arial,Helvetica,sans-serif;

color:#333;

margin:1em 0;

}

复制代码

如果在使用时,有个别元素需要定义独立样式,你可以再加上新的定义,可以覆盖老的定义,例如:

h1 { font-size:2em; }

h2 { font-size:1.6em; }

复制代码

**看到这里别忘记点个小小的赞喔~

更多往期文章我已整合成PDF放在了我的社区,也整理了一些Java学习,阿里面试真题的zl,需要的小伙伴点击传送门**

尾巴

重用、子选择器和组选择器的灵活使用可以非常有效的减少代码,同时非常有利的增加代码的可读性,具体的应用需要在具体编写过程中体会。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/360172.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

标准I/O库之缓冲

标准I/O库提供缓冲的目的是尽可能减少使用read和write调用的次数。它也对每个I/O流自动地进行缓冲管理,从而避免了应用程序需要考虑这一点所带来的麻烦。 标准I/O提供了三种类型的缓冲: (1)全缓冲。这种情况下,在填满标…

java如何写安卓接口文档_android、java制作sdk以及自动生成文档

最近一直在做android开发,昨天经理让我写个接口SDK做个接口文档,以便后面的开发。这让我很焦灼,SDK怎么做?要是只有敲代码还好。可是那个接口文档!!!文档这东西最讨厌了,头都大了后来…

21世纪的设计模式:抽象工厂模式

这是我的演讲的第二部分,“ 21世纪的设计模式” 。 此模式在Java代码中到处都有使用,尤其是在更多“企业”代码库中。 它涉及一个接口和一个实现。 该界面如下所示: public interface Bakery {Pastry bakePastry(Topping topping);Cake bak…

java动态变量名反射_Java动态性—反射 - Eclipse666的个人空间 - OSCHINA - 中文开源技术交流社区...

1.什么是动态语言?程序运行时,可以改变程序的结构或者变量类型;如Python,javaScriptfunction(){var s"var a3;var b4;" evals(s);}在执行javascript代码的的过程中,可以改变变量的值或插入语句改变结构。但J…

mysql构建栋_【转载】这次拆库 应是微服务化的拆分方式

一、现状现状.png我们将一个大而全的系统一拆为三,容器,发布,测试都已经独立出去,但是原始的数据库还是一套,现在需要将数据库做一个拆分,A、B、C三个系统有各自的数据库之后,我们的微服务化在现…

使用SharePoint 2010新增的文档集内容类型来管理文档

使用SharePoint 2010新增的文档集内容类型来管理文档 SharePoint 2010新增加的文档集功能是作为内容类型存在的,使用范围在网站集中,需要激活“文档集”功能到网站集才可以正常使用。文档集其实就是一个SharePoint产品增强的文件夹和内容类型的综合体现。…

基于visual Studio2013解决算法导论之019栈实现(基于数组)

&#xfeff;&#xfeff;&#xfeff;题目用数组实现栈解决代码及点评#include <stdio.h> #include <stdlib.h> #include <time.h> #include <malloc.h> #include<assert.h>typedef struct Stack {int nTop;int nLen;int *pnArr; }Stack, *PSta…

关闭终端php就退出进程_解决windows下php-cgi进程经常自动关闭

php-cgi在linux中有fpm管理&#xff0c;Apache不是采用cgi这种模式&#xff0c;于是乎就出现了&#xff0c;在windows下&#xff0c;采用nginx时&#xff0c;开启的php-cgi监听非常不稳定&#xff0c;经常奔溃关闭。现在解决了这个问题。注意是win32位系统下解决的&#xff0c;…

php为什么获取不到id,微信小程序无法获取到unionId怎么办

UnionID机制说明如果开发者拥有多个移动应用、网站应用、和公众帐号(包括小程序)&#xff0c;可通过unionid来区分用户的唯一性&#xff0c;因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号(包括小程序)&#xff0c;用户的unionid是唯一的。换句话说&#x…

CUBA平台–新的Java企业应用程序框架

所以..你好&#xff0c;世界&#xff01; 我们的英语网站终于可以正常使用了&#xff0c;现在每个人都可以下载该平台&#xff0c;并可以以前所未有的速度更快地创建业务应用程序。 在我们决定与国际Java社区共享足够好之前&#xff0c;我们花了六年的永久发展和偶尔的革命&…

Abiword页面布局

Abiword页面布局 AP_Win32FrameImpl::_DocumentWndProc 文档窗口过程函数在WM_SIZE消息中设置FV_View对象的整体尺寸&#xff0c;跟窗体的&#xff1a;设备单位 转换成&#xff1a;布局单位。m_iWindowWidth 19695&#xff0c;m_iWindowHeight 8520 设备单位和布局单位的比例是…

php 文件内容对比,php 比较两个文件是否相同

-### php比较两个文件是否相同小一点的文件直接实用内置函数就可以了function md5_files($filename,$filename1){$file1 md5_file($filename);$file md5_file($filename1);if($file $file1){return "文件相同";}else{return "文件不同";}}md5_file()…

今日心得:给自己写信

1.tomorrow is another day 2.有一种人一认识就觉得温馨 3.这个世界只在乎你是否达到了一定的高度&#xff0c;不在乎你是站在巨人的肩膀还是垃圾上上去的 4.花儿总要在风雨的洗礼下盛开 5.有一种“无能为力”叫宿命 6.幸福是什么&#xff1f;有很多幸福的瞬间&#xff0c;幸福…

Hibernate READ_WRITE CacheConcurrencyStrategy如何工作

介绍 在我以前的文章中&#xff0c;我介绍了NONSTRICT_READ_WRITE二级缓存并发机制。 在本文中&#xff0c;我将使用READ_WRITE策略继续本主题。 直写式缓存 NONSTRICT_READ_WRITE是一种通读缓存策略&#xff0c;可更新最终无效的缓存条目。 尽管这种策略可能很简单&#xff0…

java hashmap替换key,HashMap 用可变对象作为 key 踩坑

点击上方☝Java编程技术乐园&#xff0c;轻松关注&#xff01;及时获取有趣有料的技术文章做一个积极的人编码、改bug、提升自己我有一个乐园&#xff0c;面向编程&#xff0c;春暖花开&#xff01;作者&#xff1a;Icharlehttps://icharle.com/hashmapkebianobj.html前言在 Ja…

(转)Eclipse平台技术概述

转载&#xff1a;周金根 http://zhoujg.blog.51cto.com/1281471/516833Eclipse&#xff1a;Eclipse平台技术概述2010-10-19 13:35:00标签&#xff1a;Eclipse 休闲 职场原创作品&#xff0c;允许转载&#xff0c;转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明…

带有光纤的可扩展,健壮和标准的Java Web服务

这篇博客文章讨论了负载下的基准Web服务性能。 要了解有关Web服务性能理论的更多信息&#xff0c;请阅读利特尔定律&#xff0c;可伸缩性和容错 。 使用阻塞和异步IO对Web服务进行基准测试 Web应用程序&#xff08;或Web服务&#xff09;如何在负载下&#xff0c;面对各种故障…

php js 图片旋转,jQuery实现可以控制图片旋转角度效果

本文实例讲述了jQuery实现可以控制图片旋转角度效果。分享给大家供大家参考&#xff0c;具体如下&#xff1a;运行效果截图如下&#xff1a;具体代码如下&#xff1a;/p>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">img { margin-top:100px; m…

【OAuth】快速入门

一、引言 1、什么是OAuth2.0&#xff1f; OAuth 2.0是一个关于授权的开放网络协议&#xff0c;允许用户授权第三方应用访问其在服务提供商上存储的资源&#xff08;如照片、视频、联系人列表&#xff09;&#xff0c;而无需将用户名和密码提供给第三方应用。OAuth 2.0在第三方应…

jert oracle 统计说明,Oracle JET简单入门(一)Oracle JET介绍

Oracle JET (Oracle Javascript Extension Toolkit)是一款 Oracle 的 JavaScript 拓展工具包。简单来说 Oracle JET 是一个一堆好用的前端工具结合体。Oracle JET 文档链接 http://docs.oracle.com/middleware/jet310/jet/developer/toc.htmOracle JET支持 Model-View-ViewMod…