您的位置：首页 > Web前端 > JavaScript

制作一张简单的网页（HTML+CSS+JS) 【2】

2017-02-07 13:14 946 查看

在上一篇文章中，我总结了一下HTML，这一篇我把CSS简单做一下归纳，使网页变得富有美感。

一.CSS样式的基本知识

1.关于注释：

/*注释内容*/

2.最常见的css样式格式——嵌入式
例如对span里的内容的字改为蓝色：

<style type=text/css>
span{
color:blue;
}
</style>

3.介绍两种选择器：类选择器和ID选择器
（1）类选择器
.类选择器名字{css样式代码；}
举例:在body部分这样写：

<span class="happy">你好</span>

在style部分这样写：

.happy{color:pink;}/*你好的颜色变成了粉色*/

(2)ID选择器
#ID选择器{css样式代码；}

与类选择器一样，只不过class变成ID。
注意点：类选择器可以使用很多次，很多个地方class等于一样都没问题，但是ID选择器只能用一次。
4.子选择器和包含（后代）选择器
直接举例：

<html>
<style>
.hello>li{
border:1px solid blue;
}
</style>
</head>
<body>
<ul class="hello">
<li>hello world!
<ul>
<li>HELLO WORLD!</li>
<li>HELLO WORLD!</li>
</ul>
</li>
</ul>
</body>
</html>

显示效果：

上面是子选择器，接下来我把style部分改成一下内容，其他不变：

.hello li{
border:1px solid blue;
}

显示效果：

总结：>作用于元素的第一代后代，空格作用于元素的所有后代。
5.通用选择器：*{里面填格式}
它作用于html中的所有标签元素。
6.伪类选择器：标签:hover{里面填格式}
它是指鼠标滑过这段字的时候会出现的效果。

二.CSS格式化排版

我把下面分为字体排版和段落排版，简单综合一下。
1.字体排版
（1）字体：font-family
（2）字号：font-size（用像素表示）
（3）颜色：color
（4）粗体：font-weight：bold
（5）斜体：font-style：italic
（6）下划线：text-decoration：underline
（7）删除线：text-decoration：line-through
2.段落排版
（1）首行缩进两个字符：text-indent：2em
（2）行高：line-height
（3）字间隔：letter-spacing（如果是英文，则表示字母与字母之间的间隔）
word-spacing（单词时间的间隔）
（4）居中：text-align：center；
右对齐：text-align：right；
左对齐：text-align：left；

三.盒子模型的介绍

1.在介绍盒子模型之前，先了解一下html中的标签分类。
（1）常见的块状元素：<div>、<p>、<h1>...<h6>、<ol>、<ul>、、<dl>、<table>、<address>、<blockquote>、<form>
（2）常见的内联元素：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、、<var>、<cite>、<code>
（3）常见的内联块状元素：<img>、<input>
一般情况下，块状元素都具备盒子模型的特征。
2.盒子模型的边框
（1）粗细：border-width（大多用像素表示）
（2）边框样式：border-style（dashed虚线、dotted点线、solid实线）
（3）颜色：border-color
（4）可以只设置一边：border-right、border-left、border-bottom、border-top
3.盒子模型——填充
元素内容与边框之间的距离就是填充用padding表示
4.盒子模型——边界
一个盒子模型和另一个盒子模型之间的距离就是边界用margin表示

四.实例介绍

在第三大点中介绍了盒子模型，接下来这个例子也会用到盒子模型，以及上面提到的一些样式的运用，在我上一篇博客介绍到的例子基础之上进行下一步的美化，其基本功能没有改变。但是我们可以看到，通过盒子模型我们把这个表单居中了，通过对字体、颜色、背景的改变使网页更加的富有美感。
代码如下：

<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
div {

font-weight:bold;
font-family: Microsoft Yahei;
width: 400px;
padding-left: 50px;
margin-left: 450px;
}

h1 {
text-align: center;
}

#sub {
background-color: #689;
width: 250px;
height: 30px;
color:white;
font-weight: bold;
}
body {
background-image: url("http://pic.qiantucdn.com/58pic/20/13/88/25r58PICqQa_1024.jpg");
}
</style>
</head>
<body>
<div id="sign">
<h1>Sigh Up</h1></br>
<h2>Your basic info</h2>
<form>
<strong>Name:</strong>
<input type="text" name="myname" id="name"/></br>
</br>

<strong>Passward:</strong>
<input type="password" name="mypassward" id="passward"/></br>
</br>

<strong>Age:</strong></br>
<input type="radio" name="age" value="1" checked="checked"/>Under 13</br>
<input type="radio" name="age" value="2" />13 or older</br>
</br>

<strong>Your profile:</strong></br>
<textarea cols="50" rows="4" name="profile" id="profile"></textarea></br>
</br>

<strong>Job Role:</strong></br>
<select>
<option value="Front-End Developer" selected="selected" name="job">Front-End Developer</option>
<option value="Back-End Developer" name="job">Back-End Developer</option>
</select></br>
</br>

<strong>Interests:</strong></br>
<input type="checkbox" name="development" value="1" checked="checked">Development</br>

4000
<input type="checkbox" name="design" value="2" >Design</br>
<input type="checkbox" name="business" value="3" >Business</br>
</br>

<input type="submit" name="Sign Up" value="Sign Up" id="sub" onclick="abc()">
</input>
</form>
</div>
</body>
</html>

代码运行后的效果图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css 盒子模型选择器

相关文章推荐

新的分享

章节导航