Welcome to My Homepage

Use the menu to select different Stylesheets

Stylesheet 1
Stylesheet 2
Stylesheet 3
Stylesheet 4
No Stylesheet

Same Page Different Stylesheets

This is a demonstration of how different stylesheets can change the layout of your HTML page. You can change the layout of this page by selecting different stylesheets in the menu, or by selecting one of the following links:
Stylesheet1, Stylesheet2, Stylesheet3, Stylesheet4.

No Styles

This page uses DIV elements to group different sections of the HTML page. Click here to see how the page looks like with no stylesheet:
No Stylesheet.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Hello World!

These paragraphs are styled with CSS.

p { text-align: center; color: red; } #para1 { text-align: center; color: red; } .center { text-align: center; color: red; } p.center { text-align: center; color: red; }

This paragraph refers to two classes.

* { text-align: center; color: blue; }

Hello world!

Every element on the page will be affected by the style.

Me too!

And me!

h1 { text-align: center; color: red; } h2 { text-align: center; color: red; } p { text-align: center; color: red; } h1, h2, p { text-align: center; color: red; } /* This is a single-line comment */ p { color: red; } p { color: red; /* Set text color to red */ }

Demonstrating the Box Model

The CSS box model is essentially a box that wraps around every HTML element. It consists of: borders, padding, margins, and the actual content.

This text is the content of the box. We have added a 50px padding, 20px margin and a 15px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

div { width: 320px; padding: 10px; border: 5px solid gray; margin: 0; } 320px (width) + 20px (left + right padding) + 10px (left + right border) + 0px (left + right margin) = 350px Total element width = width + left padding + right padding + left border + right border + left margin + right margin Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin a { color: hotpink; }

This is a link

Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.

Note: a:active MUST come after a:hover in the CSS definition in order to be effective.

Using CSS to style an HTML Form

A full-width input field:

Padded text fields:

Text fields with borders:

input[type=text] { border: none; border-bottom: 2px solid red; } input[type=text] { background-color: #3CBC8D; color: white; } input[type=text]:focus { background-color: lightblue; } input[type=text]:focus { border: 3px solid #555; }

Input with icon:

Animated search input:

A styled select menu.

The display Property

display: inline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. Aliquam venenatis gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet.

display: inline-block

display: block

CSS代表级联样式表 CSS描述了如何在屏幕，纸张或其他媒体上显示HTML元素 CSS节省了大量工作。它可以一次控制多个网页的布局外部样式表存储在CSS文件中选择器指向您要设置样式的HTML元素。声明块包含一个或多个用分号分隔的声明。每个声明都包含一个CSS属性名称和一个值，以冒号(:)分隔。多个CSS声明用分号(;)分隔，声明块用花括号({})括起来。 CSS选择器用于“查找”（或选择）要设置样式的HTML元素。 CSS选择器可以分为五类：简单选择器（根据name，id，class选择元素）组合器选择器（根据它们之间的特定关系选择元素）伪类选择器（根据特定状态选择元素）伪元素选择器（选择元素的一部分并设置其样式）属性选择器（根据属性或属性值选择元素）元素选择器基于元素名字选择HTML元素。 id选择器使用HTML元素的id属性来选择特定元素。元素的ID在页面中是唯一的，因此ID选择器用于选择一个唯一的元素！要选择具有特定ID的元素，请写一个井号（＃），后跟该元素的ID。 CSS注释使用/*开始，并用*/结尾所有HTML元素都可以视为盒子。在CSS中，谈论设计和布局时使用术语“盒子模型”。 CSS盒子模型本质上是一个包装每个HTML元素的框。它包括：页边距（margins），边框（borders），填充（padding）和实际内容（content） display:inline-block 与display:inline相比，主要区别在于display:inline-block允许在元素上设置宽度和高度。另外，在display:inline-block中，将遵守顶部和底部边距/填充，但在display:inline中则不考虑。与display:block相比，主要区别在于display:inline-block在元素之后不添加换行符，因此该元素可以位于其他元素旁边。 ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1374806-20200505-1588684777209)

“Web开发基础”实验报告