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

最新推荐文章于 2024-01-26 11:37:07 发布

Shiwy_ab

最新推荐文章于 2024-01-26 11:37:07 发布

阅读量3.5w

点赞数 72

分类专栏： HTML_CSS_JS 文章标签： css 盒子模型选择器

本文链接：https://blog.csdn.net/Shiwy_ab/article/details/54908681

版权

HTML_CSS_JS 专栏收录该内容

4 篇文章 20 订阅

订阅专栏

在上一篇文章中，我总结了一下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>
                <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>

代码运行后的效果图：

Shiwy_ab

关注

72
点赞
踩
664

收藏

觉得还不错? 一键收藏
9
评论
制作一张简单的网页（HTML+CSS+JS) 【2】

在上一篇文章中，我总结了一下HTML，这一篇我把CSS简单做一下归纳，使网页变得富有美感。一.CSS样式的基本知识1.关于注释：/*注释内容*/2.最常见的css样式格式——嵌入式例如对span里的内容的字改为蓝色：<style type=text/css> span{ color:blue; } <...
复制链接

扫一扫