CSS样式表定义

CSS样式表定义一个JSP页面是通过在HTML标签的基础上嵌入JSP动作和指令、CSS、Java变量和方法(Java代码段)、其他脚本元素(如JavaScript)等组成的。

大家好,又见面了,我是你们的朋友全栈君。

在网页制作过程中,定义样式表的方法主要有下面三种。

1.通过HTML标签定义样式表
CSS样式表的基本语法如下:

引用样式的对象{标签属性:属性值;标签属性:属性值;…}

(1)引用样式的对象:指的是需要引用该样式的HTML标签,可以是一个或多个标签,需要注意的是,这里使用的是去掉尖括号的标签名。例如,p、table等,而不是<p>、<table>。
(2)标签属性:属性值——这是一一对应的,每个属性与属性值对之间用分号隔开。要说明的是,CSS的属性设置与脚本语言的属性设置有一点不同,即属性名称的写法不同。在CSS中,凡属性名为两个或两个以上的单词构成时,单词之间以“-”隔开,如背景颜色属性background-color。
例如,“< h1>< /h1>标签和< h2>< /h2>标签内的文本居中显示,并采用蓝色字体”的样式表为:

 h1,h2{text-align:center;color:bule}

2.使用id定义样式表
在HTML页面中,id选择符用来对某一单一元素定义单独的样式,定义id选择符要在id名称前加上一个#号。使用id定义样式表的基本语法如下:

id名称{标签属性:属性值;标签属性:属性值;…}

使用时只需将要用该样式的网页内容前加一个id=“id名称”。例如:

#sample{font-family:宋体;font-size:60pt}
<p id = sample>段落文本</p>

3.使用class定义样式表
若要为同一元素创建不同的样式或为不同元素创建相同的样式,可以使用CSS类。CSS类有两种定义格式,定义时,在自定义类的名称前面加一个点号。

标签名.类名{标签属性:属性值;标签属性:属性值;…}

这种格式的类指明所定义的样式只能用在类名前所指定的标签上。例如:

h1.center{text-align:center}

该center类的样式只能用在< h1>标签上。

.类名{标签属性:属性值;标签属性:属性值;…}

这种格式的类使所有class属性值为该类名的标签都遵循该类所定义的样式。例如:

.text{font-family:宋体;color:red;}
<p class = "text">段落文本</p>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/158955.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Linux load average负载量分析与解决思路

    Linux load average负载量分析与解决思路top命令中loadaverage显示的是最近1分钟、5分钟和15分钟的系统平均负载。系统平均负载表示  系统平均负载被定义为在特定时间间隔内运行队列中(在CPU上运行或者等待运行多少进程)的平均进程树。如果一个进程满足以下条件则其就会位于运行队列中:  -它没有在等待I/O操作的结果  -它没有主动进入等待状态(也就是没有调用’wait’)  -没有被停止

    2022年7月17日
    13
  • $.ajax not function(已 解决:jQuery库冲突解决办法)

    $.ajax not function(已 解决:jQuery库冲突解决办法)

    2022年2月11日
    46
  • 网络安全2020年前景展望:九大未来的安全威胁

    网络安全2020年前景展望:九大未来的安全威胁

    2022年4月2日
    52
  • jsonp详解

    jsonp详解

    2021年8月24日
    66
  • 微信公众平台开发入门教程[2020版]

    微信公众平台开发入门教程[2020版]在这篇微信公众平台开发教程中,我们假定你已经有了PHP语言程序、MySQL数据库、计算机网络通讯、及HTTP/XML/CSS/JS等基础。我们将使用微信公众账号方倍工作室作为讲解的例子,二维码见左侧。本系列教程将引导你完成如下任务:创建新浪云计算平台应用 启用微信公众平台开发模式 体验常用接收消息及发送消息类型 了解数据收发原理及消息格式第一章申请服务器资源创建新浪云计算应用申请账号我们使用SAE新浪云计算平台作为服务器资源,并且申请PHP环境+MySQL数据库作为程.

    2022年6月6日
    255
  • DropDownList1_SelectedIndexChanged使用

    DropDownList1_SelectedIndexChanged使用       今天写代码给DropDownList1添加DropDownList1_SelectedIndexChanged事件,在运行测试时发现DropDownList1的index发生改变后DropDownList1_SelectedIndexChanged没有执行,查了一下DropDownList1的属性才知道AutoPostBack要设置成true,才会执行DropDownList1_S

    2022年7月18日
    13

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号