WEB程序设计之CSS（一）

关注

原创最新推荐文章于 2026-05-21 10:05:11 发布 2.2k 阅读 AI 写同款· GEO 优化 ›

Web程序设计习题修改input标记为复选框，应对input标记做以下哪项修改？ A、type=“checkbox” B、type=“text” C、type=“radio” D、type=“select” 正确答案： A 修改以下哪个CSS属性，可使得元素的width值包含边框的宽度？ A、border-sizing B、box-sizing C、border-box D、box-border 正确答案： B 如... 阅读详情

WEB程序设计之CSS（一）

CSS（层叠样式表）：用于控制网页的表现

一、优点：

1、便于页面风格的统一和修改（样式重用、高效率开发）

2、实现表现和内容相分离（方便维护、错误修改、界面调整更加容易）

3、简化网页，提高页面浏览速度（减少文件量，降低服务器带宽成本，加快网页解析速度）

二、在html中使用css的四种方法

1、行内样式：混合在HTML标记里使用，对每个元素单独定义样式

<span style="font-family:SimSun;font-size:18px;">    <p style="color:blue">文字</p></span>

2、页面内部样式

在HTML的头部标签<head>与</head>之间添加样式

<span style="font-family:SimSun;font-size:18px;">    <head>
    <style>
    p{color:blue;}
    </style>
    </head></span>

如果一个网站有很多页面，每一个文件都会变大，后期维护难度也大，如果文件很少，CSS代码也不多，这种方式还是很不错的。

3、链入外部样式

把样式表保存为一个样式表文件，然后在页面中使用<link/>标签链接到这个CSS文件。

<span style="font-family:SimSun;font-size:18px;">    <head>
    <link rel="stylesheet" href="CSS文件URL" type="text/css" />
    </head></span>

这种方式将HTML文件和CSS文件彻底分成两个或者多个文件，实现了页面框架HTML代码与表现CSS代码的完全分离，使得前期制作和后期维护都十分方便，并且如果要保持页面风格统一，只需要把返些公共的CSS文件单独保存成一个文件，其他的页面就可以分别调用自身的CSS文件，如果需要改变网站风格，叧需要修改公共CSS文件就可以了，相当的方便，这才是我们xHTML+CSS制作页面提倡的方式。

4、导入外部样式

导入样式和链接样式比较相似，采用import方式导入CSS样式表，建议大家使用链接样式。CSS技巧：import与link的具体区别

四种样式的优先级按照“就近原则”：行内样式>页面内部样式>链接样式>导入样式

三、CSS的基本语法

选择符{属性1：值1；属性2：值2；……}

1、CSS选择器：

HTML标签选择器（HTML标记）：

<span style="font-family:SimSun;font-size:18px;">    h1{font-size:32px;}</span>

HTML选择器很方便，但是一下就把整个页面的所有相应的标记都改变了样式，显得不够灵活。

类选择器：允许同一元素有不同样式(通过选择类实现)

定义：

<span style="font-family:SimSun;font-size:18px;">    .redone{color:red;}</span>

应用：

<span style="font-family:SimSun;font-size:18px;">    <h2 class="redone">标题</h2>
    <p class="redone">段落</p></span>

通用选择器：

*表示所有的html标签

<span style="font-family:SimSun;font-size:18px;">    *｛
    margin:0px;
    padding:0px;
    ｝</span>

ID选择器：ID选择器在某一个HTML页面中只能使用一次，就像只有一个身份证（ID）一样，不能重复。

id属性值是唯一的，与class不同

一般用于网页中的“独一无二元素”，如页脚、页眉等

定义：

<span style="font-family:SimSun;font-size:18px;"><span class="com">#header{width:960px;border:1px solid #666;}</span></span>

应用：

<div id="header">我的网站</div>

选择器集体声明：

    h1,h2,h3,h4,h5,h6{color:#900;}

选择器的嵌套（派生选择器）：通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。

#div1 p a{color:#900;}/*意思是在ID为div1内的p标签内的链接a标签的文字颜色为红色*/

四、CSS属性

说明：1、不建议在font-family中设置超过宋体/黑体之外的字体,会导致未装字体的计算机显示不正常

由于中文文字的复杂性,点阵装的字体并不是全都适合于浏览器观看,因此推荐使用标准的宋体用于中文文字的显示,如果需要其他装饰性字体,应当多使用图片方式来替代纯文本的显示.

2、字体大小的单位，绝对单位：in，cm，mm，pt；相对单位：em，ex，px，%；

二、文本属性：

3、背景属性

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

css作业练习：

一、设计如图所示的网页，要求

1）标题文字居中，字的大小为32px，颜色为#666，有下划线；

2）段落文字的大小为14px，首行缩进，行高为180%；

3）第一行的CSS的文字效果为文字大小28px，加粗，颜色为蓝色；

4）第一行CSS的英文全称效果为斜体，背景色#ddd

参考代码：

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>CSS介绍</title>
    <style>
    h1{
    text-align: center;
    font-size: 32px;
    color:#666;
    text-decoration: underline;
    }
    p{
    font-size: 14px;
    text-indent: 2em;
    line-height: 180%;
    }
    .key{
    font-size: 28px;
    font-weight: bold;
    color: #00f;
    }
    .tip{
    font-style: italic;
    background: #ddd;
    }
    </style>
    </head>
    <body>
    <h1>CSS介绍</h1>
    <p><span class="key">CSS</span>(<span class="tip">Cascading Style Sheets</span>) 层叠样式表，是控制网页布局样式，并能够真正做到网页表现与内容分离的一种标记语言。相对于传统 HTML 的简单样式控制而言， CSS 能够对网页中的对象的位置排版进行象素级的精确控制，支持几乎所有的字体字号样式，以及拥有对网页对象盒模型样式的控制能力，并能够进行初步的页面交互设计，是目前最优秀的表现设计标记语言。归纳起来 CSS 2.0 有以下几个主要优势。
    </p>
    </body>
    </html>