表示层 CSS【JavaEE】

最新推荐文章于 2021-10-11 16:43:48 发布

二喵君

最新推荐文章于 2021-10-11 16:43:48 发布

阅读量398

点赞数

分类专栏： JavaEE笔记

本文链接：https://blog.csdn.net/sodacoco/article/details/102610222

版权

JavaEE笔记专栏收录该内容

6 篇文章 1 订阅

订阅专栏

CSS技术主要是美化页面，并提供了通用的美化样式的设计——选择器。

使用CSS，要先定义样式表，然后使用该样式表。

一、样式表的定义

CCS样式表的定义就是定义CCS选择器，有3种定义方式。

1> 标记选择器——通过HTML标签定义样式表

// 基本语法格式：
// 引用样式的对象{标签属性:属性值;标签属性:属性值;……}

// 例如：定义标签选择器p
p{
    color:#0000FF;
    text-decoration:underline;
    font-weight:bold; 
    font-size:25px;
}

// 使用标签选择器：

<body>   <p>这是第1行正文内容……</p>  </body>

2> 类别选择器——使用class定义样式表

// 基本语法格式：
// 格式1：     标签名.类名{标签属性:属性值;标签属性:属性值;……}
// 格式2：     .类名{标签属性:属性值;标签属性:属性值;……}

// 例如：定义类别选择器p
p.x{
    color:blue;
    font-weight:bold; 
    font-size:25px;
}

.info{
    font-size:12px;
    color:red;
}

// 使用标签选择器：
<body> 
    <p class="x">这是第1行正文内容……</p>
    <p class="info">这是第2行正文内容……</p> 
</body>

3> ID选择器——使用标签的id属性定义样式表

// 基本语法格式：
//     #id名称{标签属性:属性值标签属性:属性值;……}

// 例如：定义ID选择器
#x{
    color:red;
    font-weight:bold; 
    font-size:25px;
}

// 使用标签选择器：

<body> 
    <p>这是第1行正文内容……</p>
    <p id=“x">这是第2行正文内容……</p> 
</body>

二、样式表的使用

1> 行内式【不需要定义选择器】

利用style属性直接为元素设置样式，只对当前的标签起作用

<body>
    <p style="color:#FF0000; 
        font-size:20px; 
        text-decoration:underline;">正文内容1</p>
     
    <p style="color:#000000; 
        font-style:italic;">正文内容2</p>
</boby>

2> 内嵌式

在<head></head>标签对之间，利用<style></style>标签对定义选择器，内嵌式样式表的作用范围是本HTML文档内。

<head>
    //定义两个选择器，标签选择器p和类选择器info
    <style type="text/css">
        p{
            color:#0000FF;
            text-decoration:underline;
            font-weight:bold; 
            font-size:25px;
         }
        
        .info{font-size:12px;color:red;}
     </style>
</head>
<body>
     <p>这是第1行正文内容……</p>
     <p class="info">这是第2行正文内容……</p>
</body>

3>链接式

外联式样式表是将定义好的CSS单独放到一个以.css为扩展名的文件中，再使用<link>标签链接到所需要使用的网页中，在<head>与</head>之间。

//<link>标签链接到网页的格式：
    <link href="*.css文件路径" type="text/css" rel="stylesheet">

// 例如：
// 首先定义一个sheet_x.css文档，其代码如下：

h2{ color:#0000FF; }
p{ 
    color:#FF0000; 
    text-decoration:underline;
    font-weight:bold; 
    font-size:15px;
}

// 其次，在HTML中使用：
<html>
    <head> 
    <link href="sheet_x.css" 
          type="text/css" rel="stylesheet"> 
    </head>
     <body>
        <h2>CSS标题1</h2>
        <p>这是正文内容1……</p>
    </body>
</html>

3》CSS常用属性

CSS美化网页是通过设置网页元素的属性来实现的，主要有字体属性、颜色属性、背景属性、文本段落属性等。

1>字体属性

属性名	属性含义	属性值
font-family	字体	取值（如“宋体”）
font-size:	字体大小（字号）	取值单位：pt（点数），例“12pt”
font-style	字体风格	normal（普通，默认值），italic斜体，oblique中间状态
font-weight	字体加粗	normal（普通，默认值），bold（一般加粗），bolder（重加粗），lighter（轻加粗），number:100-900之间的加粗
font	字体复合属性	用来简化css代码，可以取值以上所有属性值，之间用空格分开

2>颜色和背景属性

颜色和背景属性主要有：color、background-color、background-image、background

属性名	属性含义	属性值
color	颜色	（颜色值是英文名称或16进制RGB值）例，red为#ff0000）
background-color	背景颜色	同color属性
background-image	背景图像	none:不用背景；url：图像地址
background-position	背景图片位置	top，left，right，bottom，center等
background	背景复合属性	简化css代码，可取值以上所有属性值，之间用空格分开

3>文本段落属性

文本段落的属性，包括字符间隔、文字修饰、纵向排列、文本转换、文本排列水平对齐方式、文本缩进，文本行高等。

属性名	属性含义	属性值
text-decoration	文字修饰	none,underline:下划线,overline:上划线,line-through:删除线,blink：文字闪烁
vertical-align	垂直对齐	baseline:默认的垂直对齐方式，super文字的上标，sub文字的下标，top垂直靠上，text-top使元素和上级元素的字体向上对齐，middle垂直居中对齐，text-bottom使元素和上级元素的字体向下对齐
text-align	水平对齐	left,right,center,justify:两段对齐
text-indent	文本缩进	缩进值（长度或百分比
line-height	文本行高	行高值（长度，倍数，百分比）
white-space	处理空白	normal将连续的多个空格合并,nowrap强制在同一行内显示所有文本，直到文本结束或者遇到<br>对象