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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • dell服务器如何恢复掉线硬盘阵列

    dell服务器如何恢复掉线硬盘阵列如果一个RAID5中有两块硬盘掉线,理论上来说,这个RAID阵列彻底失效,数据全部丢失,无法恢复。此时,如果数据非常重要,建议寻求专业的数据恢复公司帮助。如果想要自己尝试,此时有很小的几率可以修复。进入RAID卡配置界面后,选择objects-logical drive–对象,逻辑驱动器看到两块硬盘的状态都是failed–失败,如下:如果知道哪块硬盘是后掉线的,就将这个

    2022年6月26日
    271
  • python如何多行输出_python换行输出 Python里具体怎么用\n换行输出一个数字?[通俗易懂]

    python里如何把每打印10个数就换行的实现print(“每输出十个数字换行,共计输出100个:”)fornuminrange(1,100):#循环一百次print(“%3d”%num,end=””)#不换行输出if(num%10==0):print(“”)#换行输出人的一生要有多艰难,多坎坷而又要多幸运,多凑巧,才能遇到一个绊住自己心的人。如何用python将内…

    2022年4月10日
    89
  • HttpSession详解「建议收藏」

    HttpSession详解「建议收藏」HttpSession服务端的技术服务器会为每一个用户创建一个独立的HttpSessionHttpSession原理当用户第一次访问Servlet时,服务器端会给用户创建一个独立的Sessi

    2022年7月4日
    24
  • POJ 3009-Curling 2.0(DFS)

    POJ 3009-Curling 2.0(DFS)

    2022年1月11日
    33
  • compass 制作精灵图

    compass 制作精灵图用compass快速制作精灵图1.现在images文件夹新建一个文件夹装各种小图标,命名为Icon;2.然后再sass文件加上这几句命令:@import”compass/utilities/sprites” ; //导入compass精灵模块;$Icon-spacing:5px; //设置生成的精灵图里面每个小图标的间距是5px;如果只是想设置某个图标的间距可以这样做:

    2022年5月3日
    42
  • emgucv自适应二值化

    emgucv自适应二值化一 理论概述 转载自 OpenCV 基于局部自适应阈值的图像二值化 nbsp nbsp 局部自适应阈值则是根据像素的邻域块的像素值分布来确定该像素位置上的二值化阈值 这样做的好处在于每个像素位置处的二值化阈值不是固定不变的 而是由其周围邻域像素的分布来决定的 亮度较高的图像区域的二值化阈值通常会较高 而亮度较低的图像区域的二值化阈值则会相适应地变小 不同亮度 对比度 纹理的局部图像区域将会拥有相对应

    2025年11月9日
    2

发表回复

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

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